By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,864 Members | 1,283 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,864 IT Pros & Developers. It's quick & easy.

Problem with HTML tables

P: n/a
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.

Nov 10 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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.
Nov 10 '06 #2

P: n/a
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.
Nov 11 '06 #3

P: n/a
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/
Nov 11 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.