Can I spread 2 cells across 3 rows in an HTML table?

Question

I know its possible to spread 1 cell across multiple rows using the rowspan attribute, however is it possible to spread 2 cells evenly across multiple rows, without resorting to a nested table?

Answer 1

Sounds like this is what you are after:

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

If so, then no, technically speaking this isn't possible in HTML, however that's only because of how we are thinking of the rows.

Instead of 3 rows, if this table were actually 6 rows, then it would work if you adjusted the rowspans to:

where rs# is rowspan="#"

+----------+--------------------+  ------
|          |                    |      <- Row 1  
|          |       rs2          |  ------
|    rs3   |                    |      <- Row 2
|          +--------------------+  ------
|          |                    |      <- Row 3
+----------+       rs2          |  ------
|          |                    |      <- Row 4
|          +--------------------+  ------
|    rs3   |                    |      <- Row 5
|          |       rs2          |  ------
|          |                    |      <- Row 6
+----------+--------------------+  ------

Answer 2

Sure. rowspan will honor the width set for the column it is used in. In other words, if the first column in the example below is 200 pixels wide, then any table cell in that column, even if it uses rowspan will also be 200 pixels wide.

<style type="text/css">
    td {border: 1px solid #000;}
</style>
<table>
    <tr>
        <td rowspan="3">This spans two rows but only one row wide</td>
        <td rowspan="3">This spans two rows but only one row wide</td>
        <td>This is one cell wide and high</td>
    </tr>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
    </tr>
</table>

Here's an example with a cell spreading across multiple rows and columns

<style type="text/css">
    td {border: 1px solid #000;}
</style>
<table>
    <tr>
        <td rowspan="3" colspan="2">This spans two rows but only one row wide</td>
        <td>This is one cell wide and high</td>
    </tr>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
    </tr>
</table>

This page is old but still explains how this works very well.

If that isn't what you're looking for then we'll need you to better explain why rowspan isn't what you're looking for.