4

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?

11

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
+----------+--------------------+  ------
7

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.

2
  • Your example seems to illustrate how to spread 1 cell across 2 (or more) rows. My question is whether you can spread 2 cells across 3 rows.
    – sanity
    Jul 7 '11 at 14:05
  • Sure you can. You can spread it out over as many rows as you want. I'll update my example to show that.
    – John Conde
    Jul 7 '11 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.