Maximum Height for TDs

[bendee]

I have a pretty basic three-column, three-row table, like so:

<table>
<tr>
<td>header</td>
<td>header</td>
<td>header</td>
</tr>
<tr>
<td>menu option</td>
<td rowspan="3">content</td>
<td rowspan="3">content</td>
</tr>
<tr>
<td>menu option 2</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

so there are three headers, one column with two links in it, and two other columns with content in them. the problem is with the column on the left. as the content tds expand, the tds on the menu expand evenly to match them. I want to change things so that only the third, empty cell will expand as the content cells get longer. I tried using the height attribute of the td tag and also using style="height: 20px;", but neither one kept the cells from expanding. Any ideas?

[tedster]

A couple things come to mind. First, all the cells in any row MUST have the same height. It's the nature of a row of table cells. Would the attribute valign="top" in the left cell fix your problem?

Second approach - use a rowspan="2" attribute in the content cells but not the cell you want to limit. You'll just need to add another <tr> with just one <td></td> element that stays empty to accommodate that extra row.

[bendee]

Hi Ted,

Thanks for the response. Actually, that's the problem I'm having... I have one big cell with a rowspan="3" and next to it, three smaller cells. I'd like the first two cells to remain static, while the third cell expands as the larger content cell expands. But right now, all three of them expand along with the large cell.

[Purple Martin]

What you've discovered is that tables are supposed to grow/shrink to fit the content in them. Setting the height of a table cell isn't allowed in valid HTML because it's supposed to adjust itself according to the content.

One other point. I recommend you change this:

<tr>
<td>header</td>
<td>header</td>
<td>header</td>
</tr>

to this:

<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>

because the <th> tag denotes a table header whereas the <td> tag denotes table data. Using the correct tag in the correct place helps browsers interpret what they are supposed to display/read.