Solved

FP2002 or DW3 : Creating Fixed Width Table with Percentage

Posted on 2004-04-15
18
266 Views
Last Modified: 2013-12-24
I'm used to setting the table width in pixels instead of percentage. Cuz it is easier to work with. However, now I need to use table that uses width in percentage.

Say I wanna create 1 tab - two images involved (one rounded corner on the left and one on the right)
I will use a table, divided into 4 column in one row. That means there's only 4 cells involved.

In the first column the width=1%, I put in image rounded cornerleft with width size=5pixels
In the second column, width=20%, I can just fill in the cell with background color similar to the color of the rounded corners.
In the third column, width=1%, I inserted the second image rounded cornerright with width size=5pixels
And the fourth column, width=80%, cell color left to white.

When I preview it in browser, it should look good, because I tried it using table with pixels width and it works properly cross browsers but now, using table with width in percentage, it doesn't work at all. There' a gap between the first image and the second column.

What's the problem? Any fast solution?

Regards
Sylvia
0
Comment
Question by:sylviawee
  • 8
  • 5
  • 3
  • +1
18 Comments
 
LVL 12

Expert Comment

by:rcmb
Comment Utility
Have you verified the cell padding and cell spacing?

Right click on the table and select table properties. In the table properties set the cell padding to 0 and the cell spacing to 0. Also set Borders Size to 0 and uncheck the Show both cells and table borders.

This should correct the problem.

I also recommend setting the fourth column to 78% vice 80% to ensure you do not exceed the width of the window. In you current configuration you will exceed the window by 2%.

RCMB
0
 

Author Comment

by:sylviawee
Comment Utility
Yes, I've done that...cellpading/spacing/border=0. Here's the code...

<table border="0" cellspacing="1" width="100%">
            <tr>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="18%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1%" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="78%" valign="top">BlankWhiteSpace</td>
            </tr>
</table>

Here how it looks like.
http://dev.otsb.com.my/chat/images/shot.gif

Help me out. Thanks.

0
 
LVL 12

Expert Comment

by:rcmb
Comment Utility
In your code you have:

<table border="0" cellspacing="1" width="100%">
          <tr>
                    <td width="1%" valign="top">
                    <img src="tableft.gif" width="5" height="29"> </td>
                    <td width="18%" bgcolor="#CCCCCC" valign="top">Hello</td>
                    <td width="1%" valign="top">
                    <img src="tabright.gif" width="5" height="29"></td>
                    <td width="78%" valign="top">BlankWhiteSpace</td>
          </tr>
</table>

On the first line change cellspacing to read cellspacing="0" width="100%"

RCMB
0
 
LVL 12

Expert Comment

by:rcmb
Comment Utility
Also I see that you have the second cell width at 18% vice your previous setting of 20%

1 + 18 + 1 + 78 = 98

Make your cell widths read 1%, 20%, 1%, 78% so you get 100% utilized

RCMB
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 400 total points
Comment Utility
1% is not a good idea for a cell that needs to be 5 pixels wide.
And you should set the padding explicitly to be safe :-)

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td width="5" valign="top"><img src="tableft.gif" width="5" height="29"></td>
    <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px;">Hello</td>
    <td width="5" valign="top"><img src="tabright.gif" width="5" height="29"></td>
    <td width="80%" valign="top">BlankWhiteSpace</td>
  </tr>
</table>
0
 
LVL 14

Expert Comment

by:hhammash
Comment Utility
Hi,

Try replacing 100% with the actual size of 100% which is 677 and divide accordingly

<table border="0" cellspacing="0" cellpadding="0" width="677">
  <tr>
    <td width="9" valign="top"><img src="tableft.gif" width="5" height="29"></td>
    <td width="120" bgcolor="#CCCCCC" valign="top" style="padding:5px;">Hello</td>
    <td width="9" valign="top"><img src="tabright.gif" width="5" height="29"></td>
    <td width="531" valign="top">BlankWhiteSpace</td>
  </tr>
</table>

It is more accurate when you specify the width.

Regards
hhammash
0
 
LVL 14

Expert Comment

by:hhammash
Comment Utility
Hi,

Sorry,  here the columns=667

<table border="0" cellspacing="0" cellpadding="0" width="677">
  <tr>
    <td width="10" valign="top"><img src="tableft.gif" width="5" height="29"></td>
    <td width="116" bgcolor="#CCCCCC" valign="top" style="padding:5px;">Hello</td>
    <td width="10" valign="top"><img src="tabright.gif" width="5" height="29"></td>
    <td width="531" valign="top">BlankWhiteSpace</td>
  </tr>
</table>


Thanks
0
 
LVL 14

Expert Comment

by:hhammash
Comment Utility
Or just see how it is suitable for you and divide.


0
 

Author Comment

by:sylviawee
Comment Utility
Hhammash,

Using your suggestion is easier because that is pixel - I'm so used to using pixel width rather than percentage, but I am in a situation that I need to use percentage width. :(

Tried all the above suggestions, still doesn't work.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 12

Expert Comment

by:rcmb
Comment Utility
Please paste your table code again.

RCMB
0
 

Author Comment

by:sylviawee
Comment Utility
Seanpowell,

If TABLE="100%" and two TD with "20%" and "80%" each and another two TD with "5", that would make it more than 100% rite?
0
 

Author Comment

by:sylviawee
Comment Utility
Table Using Pixels (the best and neat approach)

<table border="0" cellspacing="0" cellpadding="0" width="760">
            <tr>
                        <td width="5" valign="top">
                        <img border="0" src="tableft.gif" width="5" height="29"></td>
                        <td width="150" bgcolor="#CCCCCC" style="border-top-style: solid; border-top-
width: 1 border-top-color: #999999">
                        <p align="center">Customer Service</td>
                        <td width="5" valign="top">
                        <img border="0" src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img border="0" src="tableft.gif" width="5" height="29"></td>
                        <td width="150" bgcolor="#CCCCCC" style="border-top-style: solid; border-top-width: 1 border-top-color: #999999">
                        <p align="center">Customer Service</td>
                        <td width="5" valign="top">
                        <img border="0" src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img border="0" src="tableft.gif" width="5" height="29"></td>
                        <td width="150" bgcolor="#CCCCCC" style="border-top-style: solid; border-top-width: 1 border-top-color: #999999">
                        <p align="center">Customer Service</td>
                        <td width="5" valign="top">
                        <img border="0" src="tabright.gif" width="5" height="29"></td>
                        <td width="600" valign="top">&nbsp;</td>
            </tr>
</table>
0
 

Author Comment

by:sylviawee
Comment Utility
Table Using Percent - Sean Powell
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="5" style="border-collapse: collapse" bordercolor="#111111">
            <tr>
                        <td width="5" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px">
                        Hello</td>
                        <td width="5" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px">
                        Hello</td>
                        <td width="5" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px">
                        Hello</td>
                        <td width="5" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="80%" valign="top">&nbsp;</td>
            </tr>
</table>
0
 

Author Comment

by:sylviawee
Comment Utility
Table Using Percent - RCMB

<table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="78%" valign="top">&nbsp;</td>
            </tr>
</table>
0
 

Author Comment

by:sylviawee
Comment Utility
Have a look at how it look like here...

http://dev.otsb.com.my/chat/images/shot2.gif
0
 
LVL 12

Assisted Solution

by:rcmb
rcmb earned 100 total points
Comment Utility
Delete your table in html view and replace it with the code below:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="1%"><img border="0" src="tableft.gif" width="5" height="29"></td>
    <td width="20%" bgcolor="#CCCCCC" valign="top">Hello</td>
    <td width="1%" valign="top">
    <img border="0" src="tabright.gif" width="5" height="29"></td>
    <td width="80%" bgcolor="#CCCCCC" valign="top">Hello</td>
  </tr>
</table>

Then take a look - I think you will see the table as you desire.

RCMB
0
 

Author Comment

by:sylviawee
Comment Utility
RCMB the first cell and the second cell doesn't give a smooth look, it still has that white gap in between.
However, seanpowell's code works on second testing ...

just wanna thank you guys for the effort. case closed!
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Thanks Sylvia :-)
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now