Silly html tables question

Boo · 04-03-2002 6:04pm #1

Why doesn't this table display correctly? The border of the last cell seems to be messed up. I've tried viewing this in Opera, Netscape 4.07 and IE 5.5, and they all have the same problem.
Setting cellspacing to zero seems to solve the problem, but that means that it doesn't display as it should.
It does display correctly also if you put in a dummy row of <td></td> six times somewhere, but that also affects how the table looks. The only real solution seems to be to make the two inner rows sub tables themselves, but that seems to be a workaround rather than a solution, also I'm writing this code to attempt to reduce the number of tables being used.
- Boo

<html>
<body>
<table width=400 cellpadding=0 border=1 cellspacing=5>
	<tr>
		<td colspan=3>
			row 1 col 1
		</td>
		<td colspan=3>
			row 1 col 2
		</td>
	</tr>
	<tr>
		<td colspan=2>
			row 2 col 1
		</td>
		<td colspan=2>
			row 2 col 2
		</td>
		<td colspan=2>
			row 2 col 3
		</td>
	</tr>
</table>

</body>
</html>

seamus · 04-03-2002 6:09pm

How about not specifying sizes. For example:

<table width=60% cellpadding=0 border=1 cellspacing=5>
	<tr>
		<td width=50%>
			row 1 col 1
		</td>
		<td> <!----will be auto-set to 50%>
			row 1 col 2
		</td>
	</tr>
	<tr>
		<td width=33&>
			row 2 col 1
		</td>
		<td width=33%>
			row 2 col 2
		</td>
		<td> <!-----Will be set to 34%, but unnoticable>
			row 2 col 3
		</td>
	</tr>
</table>

Boo · 04-03-2002 6:18pm

The browsers are too 'smart' for that, and try to create an extra cell in the top row (giving 3 on top and 3 on bottom) if that code is used. However, even if you specify the percentages for all the cells, you end up (with the same result as the initial situation), erm correction, you end up with some weirdness.

- Boo

seamus · 04-03-2002 6:27pm

Your code worked grand for me. I don't know what you meant by wierdness in the last cell. Row1 col 1 was just a little bigger than you wanted, that's all.

Here's a roundabout way of doing it, but if you want to use borders, it won't work.

<table width=400 cellpadding=0 border=1 cellspacing=5>
	<tr>
		<td width=50%>
			row 1 col 1
		</td>
		<td> 
			row 1 col 2
		</td width=50%>
	</tr>
</table>
<table width=400 cellpadding=0 border=1 cellspacing=5>
	<tr>
		<td width=33%>
			row 2 col 1
		</td>
		<td width=33%>
			row 2 col 2
		</td>
		<td wodth=33%> 
			row 2 col 3
		</td>
	</tr>
</table>

Boo · 04-03-2002 6:30pm

Well the cells are not dividing out evenly as they should, but also the cell border between cells row 2 col 2, and row 2 col 3 is ... umm... unusual.
What browser are you using?

- Boo

Keeks · 04-03-2002 6:31pm

This works

<html>
<body>
<table width=60% cellpadding=0 border=1 cellspacing=5>
	<tr>
		<td width=50% colspan=3>
			row 1 col 1
		</td>
		<td colspan=3> <!----will be auto-set to 50%>
			row 1 col 2
		</td>
	</tr>
	<tr>
		<td colspan=2 width=33&>
			row 2 col 1
		</td>
		<td colspan=2 width=33%>
			row 2 col 2
		</td>
		<td colspan=2> <!-----Will be set to 34%, but unnoticable>
			row 2 col 3
		</td>
	</tr>
</table>


</body>
</html>

seamus · 04-03-2002 6:33pm

Scratch that, I just missed the messedupness.

. I normally don't bother using borders and just fiddle around with cellpadding to get the spacing I need. I'm out of ideas.

Boo · 04-03-2002 6:36pm

That still has the same problem (with the border between the last two cells). I also believe it has the problem with the column sizing, but just at this size we can't see it.
Btw, just to avoid confusion, that 33&, should be 33%, and the html comment should be closed with '-->' instead of just '>'.
- Boo

Baz_ · 04-03-2002 6:49pm

strange one that, cant really recommend anything more than the two inner tables. take it over to webmaster and you might get a more experienced reply, from the saged developers.

nahdoic · 04-03-2002 8:19pm

There's no big mystery why this happens. It just does. Standard HTML table tags were originally intended for laying out information, not formatting correct to the nearest pixel. If you want to get everything perfect to the nearest pixel then either use CSS or make sure you set cellspacing to zero. When you try doing a different number of <td>'s in the 2nd row than what was used in the first, then the browser has trouble deciding how wide each cell should be and how is it going to manage to fit this cell spacing in. Its solution is to squish some together to save on space. Try using different combinations in the first and 2nd row and you will see some bizarre results. Keep the first row the same and try 6 <td colspan=1>'s in the 2nd, and it lays it all out perfect.

Do not be shy about using several nested tables to get the perfect design. A really good design using basic HTML demands the use of an excessive amount of tables.

Boo · 05-03-2002 10:56am

The reason we are trying to avoid shed loads of nested tables is that the tables will be using a background color, and some versions of Netscape (4.07 and 4.7 at least) take a remarkably long time to render them.
Thanks anyway for the help everyone!
- Boo

Hobbes · 06-03-2002 11:16am

I had a similar problem before and I created a blank row with the total number of cells first (in your case 6). Try that (might work)

Yerac · 06-03-2002 11:28am

Yes, I've just been looking at that problem. It does seem strange and is one of those horrible peculiarities of html (although at least it's consistent in all browsers for a change

).

The suggestions of a blank, dummy row seem to be the best, but again this is dependent on what exact design you're looking for. Just to note as well, the third dummy row can appear anywhere i.e. right at the top, middle or bottom. It just seems like using colspan requires that there be one row with the basic number of elements present.

Boo · 06-03-2002 12:00pm

As I mentioned in the first post, it does fix that particular spacing problem if you put in the dummy row of empty cells, however this does cause another problem because of the cellspacing which is necessary to reduce the number of tables.
The code I had given was perhaps too simple for people to see that I'm not just being pedantic

The following is much closer to what is actually being considered, and you can see the problems mentioned earlier far easier with it (I have the dummy row in here so you can see it)... Incidentally, if you take out the dummy row, how Opera handles the table is a little unusual :P

<html>
<body>
<table width=300 bgcolor=gray cellpadding=2 border=1 cellspacing=5>
	<tr> <!-- The top row -->
		<td bgcolor=lightgrey colspan=3>
			row 1 col 1
		</td>
		<td bgcolor=lightgrey colspan=3> 
			row 1 col 2
		</td>
	</tr>
	<tr> <!-- The bottom row -->
		<td bgcolor=lightgrey colspan=2>
			row 2 col 1
		</td>
		<td bgcolor=lightgrey colspan=2>
			row 2 col 2
		</td>
		<td bgcolor=lightgrey colspan=2>
			row 2 col 3
		</td>
	</tr>
	<tr> <!-- The dummy row -->
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>


</body>
</html>

Enygma · 06-03-2002 12:24pm

using

<html>
<body>
<table width="300" bgcolor="gray" cols="6" cellpadding="5" cellspacing="5" border="1">
	<tr> 
		<td bgcolor="lightgrey" colspan="3" width="100">row 1 col 1</td>
		<td bgcolor="lightgrey" colspan="3" width="100">row 1 col 2</td>
	</tr>
	<tr> 
		<td bgcolor="lightgrey" colspan="2" width="100">row 2 col 1</td>
		<td bgcolor="lightgrey" colspan="2" width="100">row 2 col 2</td>
		<td bgcolor="lightgrey" colspan="2" width="100">row 2 col 3</td>
	</tr>
</table>

</body>
</html>

should fix it up for IE (you can take out the dummy row).

Netscape 4.x looks crap though. Mozilla is fine.

nahdoic · 06-03-2002 12:58pm

that is one sweet solution. I never knew you could pass the number of cols as an attribute of the table tag.

bonkey · 06-03-2002 1:02pm

That last one appears fine on my IE6. Unfortunately, it also screws up under my Opera 6 - the so-called "standards-based browser".

Which highlights a very simple point. Although HTML is a well defined standard, there is no well-implemented standard. Which means that you end up writing your HTML to be browser-specific if you want to do anything beyond the simple and want it to appear exactly correctly.

Bah.

jc

Hobbes · 06-03-2002 1:14pm

what like this standard?! -> http://www.w3.org/TR/html401/

The problem isn't with the standard, it's with some companies purposely breaking the standard.

bonkey · 06-03-2002 1:48pm

Like I said - its well defined (although there are some holes), but its not well-implemented.

No-one has a fully compliant browser that I am aware of.

jc

Silly html tables question

Comments