Spanning Columns Using the colspan Attribute

Last update on: 06-13-2008
As you saw when looking at the td and th elements, both can carry an attribute that allows the table to span more than one column.

Remember that whenever you work with tables, you need to think in terms of grids. The colspan attribute allows a cell to stretch across more than one column, which means it can stretch across more than one rectangle horizontally in the grid. Take a look at the following example, which uses the deprecated border, width, height, and bgcolor attributes to illustrate a point visually.

Example:

In the browser:

You can see here that, for each extra column that a cell spans, you do not add in a cell for that row. So, if a table has three columns and one of the cells spans two columns, you have only two <td> elements in that row.

Creating Tables's lessons:

Introducing Tables
Basic Table Elements And Attributes
Splitting Up Tables Using A Head Body And Foot
Spanning Columns Using The Colspan Attribute
Spanning Rows Using The Rowspan Attribute