1. Technology

What do the HTML table attributes colspan and rowspan do?

By

Modern working
daneger/E+/Getty Images
Question: What do the HTML table attributes colspan and rowspan do?

HTML tables are made up of rows (using the TR element) of columns (using the TD or TH elements). This creates a very uniform grid of columns and rows. If you have a 3x5 table (3 rows of 5 columns) there will be 15 table cells in the table.

But what if you wanted some of those cells to be combined? This article explains how to use two attributes in your HTML tables to combine cells across rows and columns.

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 colspan 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?

The colspan attribute tells the browser to create a cell that spans more than one column. Cells with a colspan larger than 1 will be wider than standard cells and cross over column boundaries. There will be no border in the middle of the columns of a cell set to span multiple columns.

When you set the colspan on a cell, you need to remove the cells in that row that the spanning 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>col 1 row 1</td>
    <td>col 2 row 1</td>
    <td>col 3 row 1</td>
  </tr>
  <tr>
    <td colspan="3">col 1 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?

The rowspan attribute 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 colspan="2" rowspan="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.

©2014 About.com. All rights reserved.