colspan and rowspan

Topics on This Page

Introduction
colspan
rowspan
Combining colspan and rowspan
Example

Introduction

As I've said earlier, all of the cells in a column have to be the same width, and all of the cells in a row have to be the same height. You can, however, join two or more adjacent cells into a single cell.

Let's look at a simple 3x3 table:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
    <td> Cell #3 </td>
  </tr>
  <tr>
    <td> Cell #4 </td>
    <td> Cell #5 </td>
    <td> Cell #6 </td>
  </tr>
  <tr>
    <td> Cell #7 </td>
    <td> Cell #8 </td>
    <td> Cell #9 </td>
  </tr>
</table>
</center>

colspan

With colspan, we can join adjacent cells in the same row so that they "span" one or more columns. Let's join cells 1 and 2 into a single cell, and cells 7, 8 and 9 into a single cell:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc">
  <tr>
    <td colspan="2"> Cells #1 and #2 </td>
    <td> Cell #3 </td>
  </tr>
  <tr>
    <td> Cell #4 </td>
    <td> Cell #5 </td>
    <td> Cell #6 </td>
  </tr>
  <tr>
    <td colspan="3"> Cells #7, #8 and #9 </td>
  </tr>
</table>
</center>

In colspan, specify the number of columns you want the cell to span. The <td> (or <th>) tag then defines a cell that spans that number of columns. You'll reduce the number of <td> tags needed in the row: our first row now only needs two <td> tags, and our third row now only needs one <td> tag.

rowspan

rowspan is similar, but it joins cells vertically instead of horizontally so that they span one or more rows. Let's see how we can use rowspan:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc">
  <tr>
    <td rowspan="2"> Cells #1 and #4 </td>
    <td> Cell #2 </td>
    <td rowspan="3"> Cells #3, #6 and #9 </td>
  </tr>
  <tr>
    <td> Cell #5 </td>
  </tr>
  <tr>
    <td> Cell #7 </td>
    <td> Cell #8 </td>
  </tr>
</table>
</center>

In rowspan, specify the number of rows you want the cell to span. In the subsequent rows, omit defining the row that is spanned. Our second row only needs to define the middle cell, #5, because the left and right cells are already defined because of the rowspan. In our third row, we need to define cells 7 and 8.

Combining colspan and rowspan

We can use colspan and rowspan to join cells both horizontally and vertically. Note that you can only create rectangular groupings: we could not make an L-shape by combining cells 1, 4 and 5, for example, but we can make a rectangle by combining 1, 2, 4 and 5:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc">
  <tr>
    <td colspan="2" rowspan="2"> Cells #1-2 and #4-5 </td>
    <td> Cell #3 </td>
  </tr>
  <tr>
    <td> Cell #6 </td>
  </tr>
  <tr>
    <td> Cell #7 </td>
    <td> Cell #8 </td>
    <td> Cell #9 </td>
  </tr>
</table>
</center>

Example

Here is a table with no colspans or rowspans. Try combining some of the cells by using these attributes.