HTML Cookbook Table Course

Lesson 15

Intro to Colspan and Rowspan

You can build "super cells" using colspan and rowspan.

With colspan, you can combine adjacent cells in the same row to make "super wide" cells.

With rowspan, you can combine adjacent cells in the same column to make "super tall" cells.

Let's start with a 4x4 table:

Column 1 Column 2 Column 3 Column 4
Row 1

Row 2

Row 3

Row 4

Now we'll combine the top row cells into one big cell using
<td colspan="4">. We will span 4 columns. Since the first data cell takes up the whole row, we only need 1 <td> tag in the first row:

Column 1 Column 2 Column 3 Column 4
Row 1

colspan="4"

Row 2

Row 3

Row 4

Now we'll combine the first column cells into one big cell using
<td rowspan="4">. We will span 4 rows. Since the first data cell takes up a whole column, we only need 3 <td> tags in the 2nd, 3rd & 4th rows:

Column 1

Column 2

Column 3

Column 4

Row 1

rowspan="4"

Row 2

Row 3

Row 4

For the last table, we'll use colspan and rowspan as above. Then we'll use both colspan and rowspan to combine 4 cells into one "super-wide super-tall" cell.