Problem with HTML tables

[Phil]

I'm trying to make a 4 x 13 table in html, but it won't format
correctly... maybe someone can see what I'm doing wrong.

<table border="1">
<tr>
<td colspan="3" rowspan="5">Cell 1, 1</td>
<td rowspan="4">Cell 1, 4</td>
</tr>
<tr>
<td>Cell 5, 4</td>
</tr>
<tr>
<td colspan="3">Cell 6, 1</td>
<td rowspan="8">Cell 6, 4</td>
</tr>
<tr>
<td>Cell 7, 1</td>
<td>Cell 7, 2</td>
<td>Cell 7, 3</td>
</tr>
<tr>
<td>Cell 8, 1</td>
<td>Cell 8, 2</td>
<td>Cell 8, 3</td>
</tr>
<tr>
<td>Cell 9, 1</td>
<td>Cell 9, 2</td>
<td>Cell 9, 3</td>
</tr>
<tr>
<td>Cell 10, 1</td>
<td>Cell 10, 2</td>
<td>Cell 10, 3</td>
</tr>
<tr>
<td>Cell 11, 1</td>
<td>Cell 11, 2</td>
<td>Cell 11, 3</td>
</tr>
<tr>
<td colspan="2">Cell 12, 1</td>
<td>Cell 12, 3</td>
</tr>
<tr>
<td colspan="2">Cell 13, 1</td>
<td>Cell 13, 3</td>
</tr>
</table>

Cell 5, 4 ends up in Row 1 next to Cell 1, 4 (it should be beneath 1,
4).

If anybody could help me find the bug here, I'd greatly appreciate it.

[Ben C]

On 2006-11-10, Phil <ph*******@gmail.comwrote:

I'm trying to make a 4 x 13 table in html, but it won't format
correctly... maybe someone can see what I'm doing wrong.

<table border="1">
<tr>
<td colspan="3" rowspan="5">Cell 1, 1</td>
<td rowspan="4">Cell 1, 4</td>
</tr>
<tr>
<td>Cell 5, 4</td>
</tr>
<tr>
<td colspan="3">Cell 6, 1</td>
<td rowspan="8">Cell 6, 4</td>
</tr>
<tr>
<td>Cell 7, 1</td>
<td>Cell 7, 2</td>
<td>Cell 7, 3</td>
</tr>
<tr>
<td>Cell 8, 1</td>
<td>Cell 8, 2</td>
<td>Cell 8, 3</td>
</tr>
<tr>
<td>Cell 9, 1</td>
<td>Cell 9, 2</td>
<td>Cell 9, 3</td>
</tr>
<tr>
<td>Cell 10, 1</td>
<td>Cell 10, 2</td>
<td>Cell 10, 3</td>
</tr>
<tr>
<td>Cell 11, 1</td>
<td>Cell 11, 2</td>
<td>Cell 11, 3</td>
</tr>
<tr>
<td colspan="2">Cell 12, 1</td>
<td>Cell 12, 3</td>
</tr>
<tr>
<td colspan="2">Cell 13, 1</td>
<td>Cell 13, 3</td>
</tr>
</table>

Cell 5, 4 ends up in Row 1 next to Cell 1, 4 (it should be beneath 1,
4).

If anybody could help me find the bug here, I'd greatly appreciate it.

The first row contains two cells and spans four columns altogether. It
also spans at least four rows.

The second row contains one cell ("Cell 5,4"). It can't start at the
left edge of its row because there's a rowspanning cell in the way
("Cell 1,1") so it goes as far right as it needs to. This takes it to
column 5 (starting at 1). The "rows" above it don't contain anything,
and therefore have zero height, so "Cell 5,4" appears at the top. There
is a small gap above it if you look closely corresponding to
border-spacing around the non-existent cell in the empty row above it.

I think it will be easier if you put empty <td></td>s in your table
everywhere there are "gaps" so that each <trends up with the same
number of explicitly spanned columns and rows. In other words, if the
width is 13, and you have one cell with a colspan of 3 and another with
a colspan of 6, add four more empty <td>s in that row. Or just one with
a colspan of 4 if you like. Pad out the columns in a similar fashion.

You can control visibility of the empty cells with the empty-cells CSS
property.

This way the mapping between your HTML and the grid that the UA works
out for the table stays much simpler and therefore easier to control.

[Phil]

Actually, this table should be 4 columns wide and 13 rows high and I
just realized my mistake. I needed some empty row containers (tr) in
there. Thanks for the help.

This is what it looks like in the end...

<table border="1">
<tr>
<td colspan="3" rowspan="5">Cell 1, 1</td>
<td rowspan="4">Cell 1, 4</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>Cell 5, 4</td>
</tr>
<tr>
<td colspan="3">Cell 6, 1</td>
<td rowspan="8">Cell 6, 4</td>
</tr>
<tr>
<td>Cell 7, 1</td>
<td>Cell 7, 2</td>
<td>Cell 7, 3</td>
</tr>
<tr>
<td>Cell 8, 1</td>
<td>Cell 8, 2</td>
<td>Cell 8, 3</td>
</tr>
<tr>
<td>Cell 9, 1</td>
<td>Cell 9, 2</td>
<td>Cell 9, 3</td>
</tr>
<tr>
<td>Cell 10, 1</td>
<td>Cell 10, 2</td>
<td>Cell 10, 3</td>
</tr>
<tr>
<td>Cell 11, 1</td>
<td>Cell 11, 2</td>
<td>Cell 11, 3</td>
</tr>
<tr>
<td colspan="2">Cell 12, 1</td>
<td>Cell 12, 3</td>
</tr>
<tr>
<td colspan="2">Cell 13, 1</td>
<td>Cell 13, 3</td>
</tr>
</table>
Ben C wrote:

On 2006-11-10, Phil <ph*******@gmail.comwrote:

I'm trying to make a 4 x 13 table in html, but it won't format
correctly... maybe someone can see what I'm doing wrong.

<table border="1">
<tr>
<td colspan="3" rowspan="5">Cell 1, 1</td>
<td rowspan="4">Cell 1, 4</td>
</tr>
<tr>
<td>Cell 5, 4</td>
</tr>
<tr>
<td colspan="3">Cell 6, 1</td>
<td rowspan="8">Cell 6, 4</td>
</tr>
<tr>
<td>Cell 7, 1</td>
<td>Cell 7, 2</td>
<td>Cell 7, 3</td>
</tr>
<tr>
<td>Cell 8, 1</td>
<td>Cell 8, 2</td>
<td>Cell 8, 3</td>
</tr>
<tr>
<td>Cell 9, 1</td>
<td>Cell 9, 2</td>
<td>Cell 9, 3</td>
</tr>
<tr>
<td>Cell 10, 1</td>
<td>Cell 10, 2</td>
<td>Cell 10, 3</td>
</tr>
<tr>
<td>Cell 11, 1</td>
<td>Cell 11, 2</td>
<td>Cell 11, 3</td>
</tr>
<tr>
<td colspan="2">Cell 12, 1</td>
<td>Cell 12, 3</td>
</tr>
<tr>
<td colspan="2">Cell 13, 1</td>
<td>Cell 13, 3</td>
</tr>
</table>

Cell 5, 4 ends up in Row 1 next to Cell 1, 4 (it should be beneath 1,
4).

If anybody could help me find the bug here, I'd greatly appreciate it.

The first row contains two cells and spans four columns altogether. It
also spans at least four rows.

The second row contains one cell ("Cell 5,4"). It can't start at the
left edge of its row because there's a rowspanning cell in the way
("Cell 1,1") so it goes as far right as it needs to. This takes it to
column 5 (starting at 1). The "rows" above it don't contain anything,
and therefore have zero height, so "Cell 5,4" appears at the top. There
is a small gap above it if you look closely corresponding to
border-spacing around the non-existent cell in the empty row above it.

I think it will be easier if you put empty <td></td>s in your table
everywhere there are "gaps" so that each <trends up with the same
number of explicitly spanned columns and rows. In other words, if the
width is 13, and you have one cell with a colspan of 3 and another with
a colspan of 6, add four more empty <td>s in that row. Or just one with
a colspan of 4 if you like. Pad out the columns in a similar fashion.

You can control visibility of the empty cells with the empty-cells CSS
property.

This way the mapping between your HTML and the grid that the UA works
out for the table stays much simpler and therefore easier to control.

[Stephen Poley]

On 10 Nov 2006 16:29:53 -0800, "Phil" <ph*******@gmail.comwrote:

>Actually, this table should be 4 columns wide and 13 rows high and I
just realized my mistake. I needed some empty row containers (tr) in
there. Thanks for the help.

This is what it looks like in the end...

<tr>
<td colspan="3" rowspan="5">Cell 1, 1</td>
<td rowspan="4">Cell 1, 4</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>Cell 5, 4</td>
</tr>

The above is equivalent to:

<tr>
<td colspan="3" rowspan="2">Cell 1, 1</td>
<td>Cell 1, 4</td>
</tr>
<tr>
<td>Cell 5, 4</td>
</tr>

If this is actually appropriate use of tables (is it?) then I'd expect
to see a few TH's in there as well.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/