Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML Table Widths

Status
Not open for further replies.
chosenones

chosenones

Programmer
Sep 14, 2003
6
US
Here is the code with borders ON so you can see what is happening:
Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd&quot;>[/URL]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;>
<title>The Cheramie's Home Page</title>
<style type=&quot;text/css&quot;>
	td.hframingcell   {height: 16px; background: url(borderH.gif) repeat-x}
	td.vframingcell   {width: 16px; background: url(borderV.gif) repeat-y}
	/*16 different corner types*/
	td.framingcell0000  {width: 16px; height: 16px; background: url(border0000.gif) no-repeat}
	td.framingcellX000  {width: 16px; height: 16px; background: url(borderX000.gif) no-repeat}
	td.framingcell0X00  {width: 16px; height: 16px; background: url(border0X00.gif) no-repeat}
	td.framingcellXX00  {width: 16px; height: 16px; background: url(borderXX00.gif) no-repeat}
	td.framingcell00X0  {width: 16px; height: 16px; background: url(border00X0.gif) no-repeat}
	td.framingcellX0X0  {width: 16px; height: 16px; background: url(borderX0X0.gif) no-repeat}
	td.framingcell0XX0  {width: 16px; height: 16px; background: url(border0XX0.gif) no-repeat}
	td.framingcellXXX0  {width: 16px; height: 16px; background: url(borderXXX0.gif) no-repeat}
	td.framingcell000X  {width: 16px; height: 16px; background: url(border000X.gif) no-repeat}
	td.framingcellX00X  {width: 16px; height: 16px; background: url(borderX00X.gif) no-repeat}
	td.framingcell0X0X  {width: 16px; height: 16px; background: url(border0X0X.gif) no-repeat}
	td.framingcellXX0X  {width: 16px; height: 16px; background: url(borderXX0X.gif) no-repeat}
	td.framingcell00XX  {width: 16px; height: 16px; background: url(border00XX.gif) no-repeat}
	td.framingcellX0XX  {width: 16px; height: 16px; background: url(borderX0XX.gif) no-repeat}
	td.framingcell0XXX  {width: 16px; height: 16px; background: url(border0XXX.gif) no-repeat}
	td.framingcellXXXX  {width: 16px; height: 16px; background: url(borderXXXX.gif) no-repeat}
	td.links            {width: 25%;}
</style>
</head>
<body>
 <table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;75%&quot; border=&quot;1&quot;>
 <tr>
  <td width=&quot;16px&quot;> </td>
  <td width=&quot;25%&quot;> </td>
  <td width=&quot;16px&quot;> </td>
  <td width=&quot;*&quot;> </td>
  <td width=&quot;16px&quot;> </td>
 </tr>
 <tr>
  <td class=&quot;framingcell0XX0&quot;></td>
  <td class=&quot;hframingcell&quot;></td>
  <td width=&quot;16px&quot; class=&quot;hframingcell&quot;></td>
  <td class=&quot;hframingcell&quot;></td>
  <td class=&quot;framingcell00XX&quot;></td>
 </tr>

 <tr>
  <td class=&quot;vframingcell&quot;></td>
  <td colspan=&quot;3&quot;><h1>The Cheramie's Home Page</h1></td>
  <td class=&quot;vframingcell&quot;></td>
 </tr>

 <tr>
  <td class=&quot;framingcellXXX0&quot;></td>
  <td class=&quot;hframingcell&quot;></td>
  <td class=&quot;framingcell0XXX&quot;></td>
  <td class=&quot;hframingcell&quot;></td>
  <td class=&quot;framingcellX00X&quot;></td>
 </tr>
 <tr>
  <td class=&quot;vframingcell&quot;></td>
  <td class=&quot;links&quot;>Links bar here</td>
  <td class=&quot;vframingcell&quot;></td>
  <td rowspan=&quot;3&quot; colspan=&quot;2&quot;>(Some long content)</td>
 </tr>
 <tr>
  <td class=&quot;framingcellXX00&quot;></td>
  <td class=&quot;hframingcell&quot;></td>
  <td class=&quot;framingcellX00X&quot;></td>
 </tr>
 <tr>
  <td colspan=&quot;3&quot;></td>
 </tr>
 </table>
</body>
</html>

OK, here's the problems: First, this looks horrible everywhere but my (preferred) Mozilla browser (see screenshots below). Second, the first row of the table contains
Code: 
width
attributes. Without these, the page doesn't even look good in Mozilla, but these cause the W3C validator to choke.

I didn't try Netscape yet.

How do I get this to work?

Screenshots:
Mozilla.jpg

IE.jpg

Opera.jpg
 
Sort by date Sort by votes
I think the other browsers probably don't like
[tt]
<td width=&quot;*&quot;>
[/tt]
&quot;*&quot; is not a valid width value (except in framesets), you need to use either a pixel or percentage value. In this case, a value of &quot;75%&quot; should fix it (I think).

To keep the validator happy, you can replace
[tt]
<td width=&quot;16&quot;> </td>
<td width=&quot;25%&quot;> </td>
[/tt]
with
[tt]
<td style=&quot;width:16px&quot;> </td>
<td style=&quot;width:25%&quot;> </td>
[/tt]


-- Chris Hunt
 
Upvote 0 Downvote
OK, this did fix the validation problem. It did not fix the visual problem. 75%+25%=100%. The browser tries to do this, shrinking the columns I use for the border. IE and Mozilla shrink all three border columns to about 4px each. Opera shrinks the first column to 4px and properly displays the others. (The borders are supposed to be 16px)
 
Upvote 0 Downvote
IE doesn't always render the contents of a cell (including style attributes) if the cell is empty.

If I put &quot;x&quot;, or even non-breaking spaces in each of your empty cells, it looks a whole lot different. Try the following code (sorry, I didn't have the border images you used, so was unable to see the end result for myself. Maybe you have a URL we can get these from if this doesn't solve the problem?):

Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd&quot;>[/URL]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;>
<title>The Cheramie's Home Page</title>
<style type=&quot;text/css&quot;>
	td.hframingcell		{ height: 16px; background: url(borderH.gif) repeat-x; }
	td.vframingcell		{ width: 16px; background: url(borderV.gif) repeat-y; }
	/*16 different corner types*/
	td.framingcell0000	{ width: 16px; height: 16px; background: url(border0000.gif) no-repeat; }
	td.framingcellX000	{ width: 16px; height: 16px; background: url(borderX000.gif) no-repeat; }
	td.framingcell0X00	{ width: 16px; height: 16px; background: url(border0X00.gif) no-repeat; }
	td.framingcellXX00	{ width: 16px; height: 16px; background: url(borderXX00.gif) no-repeat; }
	td.framingcell00X0	{ width: 16px; height: 16px; background: url(border00X0.gif) no-repeat; }
	td.framingcellX0X0	{ width: 16px; height: 16px; background: url(borderX0X0.gif) no-repeat; }
	td.framingcell0XX0	{ width: 16px; height: 16px; background: url(border0XX0.gif) no-repeat; }
	td.framingcellXXX0	{ width: 16px; height: 16px; background: url(borderXXX0.gif) no-repeat; }
	td.framingcell000X	{ width: 16px; height: 16px; background: url(border000X.gif) no-repeat; }
	td.framingcellX00X	{ width: 16px; height: 16px; background: url(borderX00X.gif) no-repeat; }
	td.framingcell0X0X	{ width: 16px; height: 16px; background: url(border0X0X.gif) no-repeat; }
	td.framingcellXX0X	{ width: 16px; height: 16px; background: url(borderXX0X.gif) no-repeat; }
	td.framingcell00XX	{ width: 16px; height: 16px; background: url(border00XX.gif) no-repeat; }
	td.framingcellX0XX	{ width: 16px; height: 16px; background: url(borderX0XX.gif) no-repeat; }
	td.framingcell0XXX	{ width: 16px; height: 16px; background: url(border0XXX.gif) no-repeat; }
	td.framingcellXXXX	{ width: 16px; height: 16px; background: url(borderXXXX.gif) no-repeat; }
	td.links			{ width: 25%; }
</style>
</head>
<body>

<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;75%&quot; border=&quot;1&quot;>
<tr>
	<td width=&quot;16&quot;> </td>
	<td width=&quot;25%&quot;> </td>
	<td width=&quot;16&quot;> </td>
	<td> </td>
	<td width=&quot;16&quot;> </td>
 </tr>

 <tr>
	<td class=&quot;framingcell0XX0&quot;> </td>
	<td class=&quot;hframingcell&quot;> </td>
	<td width=&quot;16&quot; class=&quot;hframingcell&quot;> </td>
	<td class=&quot;hframingcell&quot;> </td>
	<td class=&quot;framingcell00XX&quot;> </td>
 </tr>

 <tr>
	<td class=&quot;vframingcell&quot;> </td>
	<td colspan=&quot;3&quot;><h1>The Cheramie's Home Page</h1></td>
	<td class=&quot;vframingcell&quot;> </td>
 </tr>

 <tr>
	<td class=&quot;framingcellXXX0&quot;> </td>
	<td class=&quot;hframingcell&quot;> </td>
	<td class=&quot;framingcell0XXX&quot;> </td>
	<td class=&quot;hframingcell&quot;> </td>
	<td class=&quot;framingcellX00X&quot;> </td>
 </tr>

 <tr>
	<td class=&quot;vframingcell&quot;> </td>
	<td class=&quot;links&quot;>Links bar here</td>
	<td class=&quot;vframingcell&quot;> </td>
	<td rowspan=&quot;3&quot; colspan=&quot;2&quot;>(Some long content)</td>
 </tr>

 <tr>
	<td class=&quot;framingcellXX00&quot;> </td>
	<td class=&quot;hframingcell&quot;> </td>
	<td class=&quot;framingcellX00X&quot;> </td>
 </tr>

<tr>
	<td colspan=&quot;3&quot;> </td>
</tr>
</table>

</body>
</html>

BTW - if you do use non-breaking spaces, but find the table border cells grow and shrink if the font size is changed, then I suggest using a 1x1 pixel spacer GIF.

I also found that removing the &quot;px&quot; from the width values in your TD tags helped, and not specifying a width for the dynamically sized colums, instead of putting 100%, also helped.

Hope this helps!

Dan
 
Upvote 0 Downvote
Grr - I just noticed that too - shouldn't do, if put inside a code tag though, right?

So yes, everywhere in the code above where you have:

Code: 
<TD> </TD>

or

Code: 
<TD CLASS=&quot;xx&quot;> </TD>
,

then add
Code: 
&
Code: 
nbsp;
inbetween the open and close tags.

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
170
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
809
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
146
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top