Loading...

As long as they fit within the rectangular confines of a table, cells can be arranged and distributed in any number of ways.

So far in this lesson, any table examples shown have the same number of table data cells in each row. This is a common treatment of tables, but there will be plenty of opportunities where you need a cell that stretches across multiple columns, or one that stretches down over multiple rows. The <td> tag has a couple attributes that can accomplish this for us. Click through the tabs below to read more.

Spanning Columns

Spanning Rows

Spanning Both

If you have a table that is three columns wide, but want one cell in the top row to stretch all three columns, you will use the colspan attribute. When assigning colspan, set it equal to the number of columns you want the cell to take up. Just remember to balance things out. If we want the cell stretching all three columns, it'll be the only cell in that row, as it's taking up the whole width of the table. However, if you want a cell to just take up two columns of space, you need to add a one-column cell to equal the three-column width of the table.

The first table cell spanning all three columns:

<table border="1">
<tr>
<td colspan="3">Row 1, Columns 1-3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>

Row 1, Columns 1-3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

The second table cell in the first row spanning two columns:

<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td colspan="2">Row 1, Columns 2-3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>

Row 1, Column 1 Row 1, Columns 2-3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

When setting out to do the same thing, but stretching a cell down across rows, you'll use the rowspan attribute. It functions the same as colspan, but just watch out that you keep track of the table's balance, as it can be harder to remember when jumping down between <tr></tr> sets.

The first table cell spanning all three rows:

<table border="1">
<tr>
<td rowspan="3">Rows 1-3, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 2</td>
</tr>
</table>

Rows 1-3, Column 1 Row 1, Column 2
Row 2, Column 2
Row 3, Column 2

The first table cell spanning two rows:

<table border="1">
<tr>
<td rowspan="2">Rows 1-3, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</table>

Rows 1-2, Column 1 Row 1, Column 2
Row 2, Column 2
Row 3, Column 1 Row 3, Column 2

Both of these attributes can be used to combine cells into any needed configuration. This can allow for some very complex and detailed table setups. Again, be sure to consider the original balance of the table. Note the maximum number of rows and columns involved, and then make sure the spans of the cells in each row and column add up to those numbers.

A table with the first cell spanning two rows and two columns, and the cell in the fourth row spanning all four columns:

<table border="1">
<tr>
<td rowspan="2" colspan="2">Rows 1-2,
Columns 1-2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
</tr>
<tr>
<td>Row 2, Column 3</td>
<td>Row 2, Column 4</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
<td>Row 3, Column 4</td>
</tr>
<tr>
<td colspan="4">Row 4, Columns 1-4</td>
</tr>
</table>

Rows 1-2, Columns 1-2 Row 1, Column 3 Row 1, Column 4
Row 2, Column 3 Row 2, Column 4
Row 3, Column 1 Row 3, Column 2 Row 3, Column 3 Row 3, Column 4
Row 4, Columns 1-4