What do the colspan and rowspan attributes do?

Question: What do the colspan and rowspan attributes do?

Answer:

Once you have a table with many rows and columns, you may end up with a situation where you want the data in one cell to flow across several rows or columns. This is where the attributes collspan and rowspan come into play. They are attributes of the <td> and <th> tags. In other words, you create a cell and then have it span the number of columns or rows you'd like.

First create your table, with several rows and columns:

<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td>col 1 row 1</td><td>col 2 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 1 row 2</td><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>

What is Colspan?

Colspan tells the browser to create a cell that spans more than one column. Cells with a multiple colspan will be wider and cross over column boundaries. If the table border is not zero, there will be no separator in the middle of the columns of a cell with multiple colspan.

When you set the colspan on a cell, you need to remove the cells in that row that the colspan cell is taking over. For example, if you are setting the colspan to 2, then you'll need to remove 1 cell from the row:

<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td colspan="2">col 1 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 1 row 2</td><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>

If you're making the colspan 3, then you'll need to remove 2 cells from the row:

<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td colspan="3">col 1 row 1</td></tr>
<tr><td>col 1 row 2</td><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>

What is Rowspan?

Rowspan acts in exactly the same way as colspan, only instead of spanning the columns in a table, the cell will span 2 or more rows in the table.

<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td rowspan="2">col 1 row 1</td><td>col 2 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>

Just like with colspan, if you span a row, you need to remove cells from the row(s) below the rowspan cell. If you span 2 rows, you'll need to remove 1 cell, and if you span 3 rows, you'll need to remove 2 cells.

<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td rowspan="3">col 1 row 1</td><td>col 2 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 2 row 2</td><td>col 3 row 2</td></tr>
<tr><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>

Spanning Rows and Columns Together

One cell can also span both rows and columns in a table.

<table border="1">
<tr><th>header cell 1</th><th>header cell 2</th><th>header cell 3</th></tr>
<tr><td rowspan="2" colspan="2">col 1 row 1</td><td>col 3 row 1</td></tr>
<tr><td>col 3 row 2</td></tr>
<tr><td>col 1 row 3</td><td>col 2 row 3</td><td>col 3 row 3</td></tr>
<tr><td>col 1 row 4</td><td>col 2 row 4</td><td>col 3 row 4</td></tr>
</table>

Remember that table cells can only span in a rectangular shape, so if you span 3 columns and 2 rows, the cell will take up all 3 columns in both rows - not just the first row.