The colspan attribute is an HTML feature that enables a table cell in a web page to extend over multiple columns. HTML is one of the main ways in which web pages are created. One way to bring structure into an HTML web page is the concept of a table. A table has multiple rows and columns. The information in the individual cells of the table appears vertically and horizontally organized.
Often, when displaying an HTML table, one would like some information to apply or spread over multiple columns. When such a piece of information is limited to one row, then the colspan attribute comes in handy. Therefore colspan=N, where N is some number such as 2, 3, etc., indicates that the cell spreads or spans that many columns.
Consider an example where sales data is shown as a table with three column headings: the sales region, the person heading the region, and the sales amount. When the total is shown, only the sales amount total is of interest. The person cell will be empty in that row. Rather than showing an empty cell it is nice to bring attention to the total instead. The following code achieves this.
<html>
<table border="1">
<tr> <th>Region</th> <th>Sales Head</th>
<th>Sales</th> </tr>
<tr> <td>East</td> <td>Lewis</td>
<td>$2,100</td> </tr>
<tr> <td>South</td> <td>Lilian</td>
<td>$2,880</td> </tr>
<tr> <td>West</td> <td>Larnoe</td>
<td>$1,900</td> </tr>
<tr> <td colspan="2">Total Sales</td>
<td>$6,880</td> </tr>
</table>
</html>
In this example, a table is created, and three headings — Region, Sales Head and Sales — are specified, followed by three rows of data. Each cell in the table is indicated by the td attribute, for "table data." In the fourth row, the phrase Total Sales is given along with the total amount. Notice that the phrase "Total Sales" is emphasized by its cell spanning two columns: the Region column and the Head column; this is achieved by specifying colspan=2. This cell spans two columns, so this row has just two td attributes and not three as in the other rows.
One can copy this code into a text file and bring it up in a browser to view the effect. A web page may not often require showing data within table cells as in the example above. The table concept is very useful for organizing the information on a web page, however.
A web page often consists of a header on top, such as the company name and logo, one or more menus on top or at the sides, main information in the middle, and summary information at the bottom. To achieve this, a table structure may be used underneath without the reader being aware of it. Quite often some information spreads over multiple columns using the colspan attribute, preventing the web page from looking clunky.
As an example, one may want a personal page with three columns: Family, Career, and Community. It would be a nice effect to break the monotonous columns with a photo, somewhere down the page, wherein it spreads across all columns. The following code achieves this with a span value of 3.
<html>
<table width=900 border="0">
<tr>
<td width=300> Family <br> Me <br> Doggie... </td>
<td width=300> Career <br> Executive at Acme... </td>
<td width=300> Community <br> Hospital Volunteer... </td>
</tr>
<tr> <td colspan="3" align=center> <img src=...> My Photo </td> </tr>
<tr>
<td> Family details... </td>
<td> Career continued... </td>
<td> Community continued... </td>
</tr>
</table>
</html>