HTML Code Tutorial

Tutor Ebook Download

Tables and Colspan

Webster defines a column as: a vertical division of typed or printed lines on paper.

In Figure #1 shown below we have divided a white rectangle into 5 equal columns and colored them red.


Figure #1

The code:
<tr><td></td><td></td><td></td><td></td><td></td></tr>

colspan is an attribute of the <td> tag. It tells the browser how many columns one cell of a row should span. It is used with multi row tables divided into multiple columns.

In Figure #2 shown below we illustrate the concept with a green row that spans 4 columns and a blue row that spans 3 columns.


Figure #2

Simplified code green:
<tr><td colspan="4"></td><td></td></tr>
Simplified code blue:
<tr><td colspan="3"></td><td></td><td></td></tr>

Text Example

Though you might not use colspan to control text and a simple image on a page, like the example below, colspan comes in handy when you have a page sectioned off like the one you are reading.

We added a border here because it will make the concept of colspan easier to see.

Sometimes you want a cell to reach across two or more columns. If you don't

use colspan, the browser tries to keep things symetrical. That may not be the right word, but when we add colspan you'll see the difference.

This is what it looks like without. Kinda nasty.

Without colspan


Sometimes you want a cell to reach across two or more columns. If you don't

use colspan, the browser tries to keep things symetrical. That may not be the right word, but when we add colspan you'll see the difference.

This is what it looks like with.

With colspan

Here's the code using colspan. We left out font tags and paragraph tags to make it clearer.

<table width="300" border="1">
<tr><td colspan="2">Sometimes you want a cell to reach across two or more columns. If you don't</td></tr>
<tr>
<td>use colspan, the browser tries to keep things symetrical. That may not be the right word, but when we add colspan you'll see the difference.</td>
<td><img src="images/doggy.gif" width="121" height="79" alt=""></td></tr>
<tr><td colspan="2">this is what it looks like with.</td></tr></table>

In the example above we have a 3 row table.
The second row has 2 columns.
The first row has one cell that spans 2 columns.
The third row has one cell that spans 2 columns.

Take a quiz. Take a Quiz on this Information.




CGI Online
How to Create a Website -Tutorial
Main Website


This Free HTML Tutorial
is provided by Net Success 2000 Plus Inc.

Last Modified: September 26, 2007

HTML Codes Tutor Ebook