Question

Consider the following HTML table definition.

<table>
 <tbody>
  <tr>
   <td rowspan='2'>A</td>
   <td>2</td>
   <td rowspan='2'>B</td>
  </tr>
  <tr>
   <td rowspan='2'>C</td>
  </tr>
  <tr>
   <td>1</td>
   <td>3</td>
  </tr>
 </tbody>
</table>

I expect the table to look like:

+---+---+---+
| A | 2 | B |
|   +---+   |
|   | C |   |
+---+   +---+
| 1 |   | 3 |
+---+---+---+

But in Firefox, IE8, and Chrome, the table is rendered like:

+---+---+---+
| A | 2 | B |
+---+---+---+
| 1 | C | 3 |
+---+---+---+

If I add another column to the table, like so:

<table>
 <tbody>
  <tr>
   <td>a</td>
   <td rowspan='2'>A</td>
   <td>2</td>
   <td rowspan='2'>B</td>
  </tr>
  <tr>
   <td>b</td>
   <td rowspan='2'>C</td>
  </tr>
  <tr>
   <td>c</td>
   <td>1</td>
   <td>3</td>
  </tr>
 </tbody>
</table>

…I get the following, which is more like what I want.

+---+---+---+---+
| a | A | 2 | B |
+---+   +---+   |
| b |   | C |   |
+---+---+   +---+
| c | 1 |   | 3 |
+---+---+---+---+

Questions:

1. Are the browsers behaving correctly? If so, why does the table collapse non-intuitively in the case of the first HTML segment given above?

2. Is there any valid HTML/css that will force the table to display as I intend it to?

Answer 1

I think this actually works…
Your cell height isn’t fixed, so it seems as if it doesn’t work. But if you try it like this:

<table border="1">
<tr>
    <td height="50px" rowspan="2">A</td>
    <td>2</td>
    <td rowspan="2">B</td>
</tr>
<tr>
    <td rowspan="2">C</td>
</tr>
<tr>
    <td>1</td>>
    <td>3</td>
</tr>
</table>

You’ll see that the table behaves as you want:

_{(source: myimg.de)}

So if you want your table to look like you explained, I think all you need to do is define the cell height in css or like i described above.