Tables: Colspan and Rowspan

The easiest way to lay out a table spanning columns and rows is to first make a table with as many columns and rows as you need. Sometimes it helps to sketch this out on paper. Add the required rowspan="x" and/or colspan="x" to the <td> tag you want to span, and erase the cells you want to eliminate, including <td> and </td>. Always turn on borders when making complex tables. You can turn them off when you have your cells setup.

Begin by creating your table.

one	two	three
four	five	six
seven	eight	nine

<table align="center" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr> 
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
  <tr> 
    <td>seven</td>
    <td>eight</td>
    <td>nine</td>
  </tr>
</table>

If you want the top row to be one cell, add colspan="3" to the first <td> tag and erase the tags for the rest of the cells in the first row.

one
four	five	six
seven	eight	nine

<table align="center" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td colspan="2">one</td>
  </tr>
  <tr> 
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
  <tr> 
    <td>seven</td>
    <td>eight</td>
    <td>nine</td>
  </tr>
</table>

If you would rather have cells one, four and seven to be all one column, add rowspan="3" to the first <td> tag. Delete <td>four</td> and <td>seven</td>.

one	two	three
	five	six
	eight	nine

<table align="center" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td rowspan="3">one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td>five</td>
    <td>six</td>
  </tr>
  <tr>
    <td>eight</td>
    <td>nine</td>
  </tr>
</table>

You can also span columns and rows at the same time. We will start with a table with four columns and four rows.

1a	2a	3a	4a
1b	2b	3b	4b
1c	2c	3c	4c
1d	2d	3d	4d

<table align="center" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>1a</td>
    <td>2a</td>
    <td>3a</td>
    <td>4a</td>
  </tr>
  <tr>
    <td>1b</td>
    <td>2b</td>
    <td>3b</td>
    <td>4b</td>
  </tr>
  <tr>
    <td>1c</td>
    <td>2c</td>
    <td>3c</td>
    <td>4c</td>
  </tr>
  <tr> 
    <td>1d</td>
    <td>2d</td>
    <td>3d</td>
    <td>4d</td>
  </tr>
</table>

1a	2a		4a
1b	2b	3b	4b
1c	2c	3c	4c
1d	2d	3d	4d

<table align="center" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>1a</td>
    <td colspan="2">2a</td>
    <td>4a</td>
  </tr>
  <tr>
    <td>1b</td>
    <td>2b</td>
    <td>3b</td>
    <td>4b</td>
  </tr>
  <tr>
    <td>1c</td>
    <td>2c</td>
    <td>3c</td>
    <td>4c</td>
  </tr>
  <tr> 
    <td>1d</td>
    <td>2d</td>
    <td>3d</td>
    <td>4d</td>
  </tr>
</table>

1a	2a		4a
	2b	3b	4b
	2c	3c	4c
	2d	3d	4d

<table align="center" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td rowspan="4">1a</td>
    <td colspan="2">2a</td>
    <td>4a</td>
  </tr>
  <tr>
    <td>2b</td>
    <td>3b</td>
    <td>4b</td>
  </tr>
  <tr>
    <td>2c</td>
    <td>3c</td>
    <td>4c</td>
  </tr>
  <tr>
    <td>2d</td>
    <td>3d</td>
    <td>4d</td>
  </tr>
</table>

1a	2a		4a
	2b		4b
			4c
	2d	3d	4d

<table align="center" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td rowspan="4">1a</td>
    <td colspan="2">2a</td>
    <td>4a</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">
    <td>4b</td>
  </tr>
  <tr>
    <td>4c</td>
  </tr>
  <tr>
    <td>2d</td>
    <td>3d</td>
    <td>4d</td>
  </tr>
</table>

To Top TO TOP