sylviawee
asked on
FP2002 or DW3 : Creating Fixed Width Table with Percentage
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
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
ASKER
Yes, I've done that...cellpading/spacing/
<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">BlankWhiteSpa
</tr>
</table>
Here how it looks like.
http://dev.otsb.com.my/chat/images/shot.gif
Help me out. Thanks.
<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">BlankWhiteSpa
</tr>
</table>
Here how it looks like.
http://dev.otsb.com.my/chat/images/shot.gif
Help me out. Thanks.
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">BlankWhiteSpa
</tr>
</table>
On the first line change cellspacing to read cellspacing="0" width="100%"
RCMB
<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">BlankWhiteSpa
</tr>
</table>
On the first line change cellspacing to read cellspacing="0" width="100%"
RCMB
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
1 + 18 + 1 + 78 = 98
Make your cell widths read 1%, 20%, 1%, 78% so you get 100% utilized
RCMB
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 width="9" valign="top"><img src="tabright.gif" width="5" height="29"></td>
<td width="531" valign="top">BlankWhiteSpa
</tr>
</table>
It is more accurate when you specify the width.
Regards
hhammash
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 width="9" valign="top"><img src="tabright.gif" width="5" height="29"></td>
<td width="531" valign="top">BlankWhiteSpa
</tr>
</table>
It is more accurate when you specify the width.
Regards
hhammash
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 width="10" valign="top"><img src="tabright.gif" width="5" height="29"></td>
<td width="531" valign="top">BlankWhiteSpa
</tr>
</table>
Thanks
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 width="10" valign="top"><img src="tabright.gif" width="5" height="29"></td>
<td width="531" valign="top">BlankWhiteSpa
</tr>
</table>
Thanks
Or just see how it is suitable for you and divide.
ASKER
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.
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.
Please paste your table code again.
RCMB
RCMB
ASKER
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?
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?
ASKER
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"> </td>
</tr>
</table>
<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"> </td>
</tr>
</table>
ASKER
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"> </td>
</tr>
</table>
<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"> </td>
</tr>
</table>
ASKER
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"> </td>
</tr>
</table>
<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"> </td>
</tr>
</table>
ASKER
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
However, seanpowell's code works on second testing ...
just wanna thank you guys for the effort. case closed!
Thanks Sylvia :-)
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