John Doe Smith John Doe Smith - 1 month ago 24
HTML Question

HTML table rowspan strange behavior

I have the following html code:

<table border="1">
<tbody>
<tr>
<td rowspan="4">1 Rowspan=4</td>
<td rowspan="3">2 Rowspan=3</td>
</tr>
<tr>
<td>3 something</td>
</tr>
<tr>
<td>4 something</td>
</tr>
<tr>
<td>5 something</td>
</tr>
<tr>
<td>6 something</td>
<td>7 something</td>
</tr>
<tr>
<td>8 something</td>
<td>9 something</td>
</tr>
</tbody>
</table>


It behaves like this:

enter image description here

This is wrong! There should be only 2 columns!

I want to have cell #3 below #2 and #4 below #1.

Why isn't that possible?

Here is a fiddle: http://jsfiddle.net/FvY5b/

Answer

The markup violates the HTML table model. If check the markup with http://validator.w3.org in HTML5 mode, it reports an error: “A table row was 3 columns wide and exceeded the column count established by the first row (2).”

So as suggested in @Aditi’s answer and Madara Uchiha’s comment, change rowspan="4" to rowspan="2" and remove rowspan="3" and set the height of the first row in CSS (as the obvious intent is to make it higher than it would otherwise be).