Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

up vote 10 down vote accepted

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
+----------+--------------------+  ------
share|improve this answer

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.

share|improve this answer
    
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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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