How do you use colspan and rowspan in HTML tables?

Question

I don't know how to merge rows and columns inside HTML tables.

Example

Can you please help me with making such a table in HTML?

@DavidThomas I can make table with 5 rows and 3 columns. But I don't really know where to apply rowspan, etc. — Max Frai, Mar 22 '12 at 21:07
@DAvid: It seems pretty clear the asker doesn't know where to begin, it's sometimes hard when you don't even know if an attribute that you're looking for exists (rowspan in this case) — Chris Sobolewski, Mar 22 '12 at 21:10
A good way to lean about this, if you are lucky enough to have a visual editor like Dreamweaver, is to create the basic table grid and then merge together the needed cells. Then inspect the code that has been produced. You'll see where the various cells are merged and how it's done with code. Dreamweaver typically produces clean and compliant code, so it will set a good example for a learner. — Surreal Dreams, Mar 22 '12 at 21:42

score 120 · Answer 1 · answered Mar 22 '12 at 21:29

If you're confused how table layouts work, they basically start at x=0, y=0 and work their way across. Let's explain with graphics, because they're so much fun!

When you start a table, you make a grid. Your first row and cell will be in the top left corner. Think of it like an array pointer, moving to the right with each incremented value of x, and moving down with each incremented value of y.

For your first row, you're only defining two cells. One spans 2 rows down and one spans 4 columns across. So when you reach the end of your first row, it looks something like this:

Preview #0001

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

Now that the row has ended, the "array pointer" jumps down to the next row. Since x position 0 is already taken up by a previous cell, x jumps to position 1 to start filling in cells. * See note about difference between rowspans.

This row has four cells in it which are all 1x1 blocks, filling in the same width of the row above it.

Preview #0002

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

The next row is all 1x1 cells. But, for example, what if you added an extra cell? Well, it would just pop off the edge to the right.

Preview #0003

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

* But what if we instead (rather than adding the extra cell) made all these cells have a rowspan of 2? The thing you need to consider here is that even though you're not going to be adding any more cells in the next row, the row still must exist (even though it's an empty row). If you did try to add new cells in the row immediately after, you'd notice that it would start adding them to the end of the bottom row.

Preview #0004

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Enjoy the wonderful world of creating tables!

score 113 · Accepted Answer · edited Sep 26 '15 at 10:20

113

I'd suggest:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}

<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

References:

edited Sep 26 '15 at 10:20

Cristian Ciupitu

20,270
7
50
76

answered Mar 22 '12 at 21:09

David Thomas

249,100
51
377
410

2

Don't forget to add the pretty colors. – Blazemonger Mar 22 '12 at 21:11
31

I leave the 'pretty colours' as an exercise for the reader in this case. – David Thomas Mar 22 '12 at 21:19
If anyone is interested, how this works in general, see @animousons's excellent explanation below https://stackoverflow.com/a/9830847/362951 – mit Aug 07 '18 at 10:13

score 14 · Answer 3 · edited Sep 26 '15 at 10:30

If anyone is looking for a rowspan on both the left AND on the right, here is how you can do it:

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Alternatively, if you want to add the LEFT and RIGHT to an existing rowset, you can achieve the same result by throwing them in with a collapsed colspan in between:

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

score 5 · Answer 4 · edited Jul 19 '12 at 11:46

5

Use rowspan if you want to extend cells down and colspan to extend across.

edited Jul 19 '12 at 11:46

Luke

11,426
43
60
69

answered Mar 22 '12 at 21:08

Wadester

453
4
12

score 3 · Answer 5 · edited Jul 18 '14 at 07:32

3

You can use rowspan="n" on a td element to make it span n rows, and colspan="m" on a td element to make it span m columns.

Looks like your first td needs a rowspan="2" and the next td needs a colspan="4".

edited Jul 18 '14 at 07:32

khellang

17,550
6
64
84

answered Mar 22 '12 at 21:07

Surreal Dreams

26,055
3
46
61

score 2 · Answer 6 · answered Mar 22 '12 at 21:09

The property you are looking for that first td is rowspan: http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

score 2 · Answer 7 · answered Mar 22 '12 at 21:12

<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

score 1 · Answer 8 · answered Jul 13 '20 at 10:46

I have used ngIf for one of my similar logic. it is as follows:

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

here, i'm getting rowspan value from my model object.

score 0 · Answer 9 · answered Apr 17 '18 at 10:06

Colspan and Rowspan A table is divided into rows and each row is divided into cells. In some situations we need the Table Cells span across (or merged) more than one column or row. In these situations we can use Colspan or Rowspan attributes.

Colspan The colspan attribute defines the number of columns a cell should span (or merge) horizontally. That is, you want to merge two or more Cells in a row into a single Cell.

<td colspan=2 >

How to colspan ?

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

Rowspan The rowspan attribute specifies the number of rows a cell should span vertically. That is , you want to merge two or more Cells in the same column as a single Cell vertically.

<td rowspan=2 >

How to Rowspan ?

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>

score 0 · Answer 10 · answered Mar 22 '12 at 21:15

0

<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>

answered Mar 22 '12 at 21:15

Wadester

453
4
12

score -1 · Answer 11 · answered Mar 23 '12 at 10:44

It is similar to your table

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>

How do you use colspan and rowspan in HTML tables?

11 Answers11

Linked

Related