HTML Code Tutorial

Tables and Rowspan

Rowspan is a feature of HTML that is useful when we want a column in a multiple row table to extend downward into the next row. When used properly with the colspan attribute, we can create some interesting page layouts.

It should be noted that it takes a browser longer to process a page built using mutliple row tables and some search engine spiders still experience difficulty with complicated table arrangements.

2 Row 2 Column Table

In this example notice than only one column definition is provided on the second row. The first column on the second row is treated as if it doesn't exist, because column 1 on row 1 occupies its position.

The rain in spain falls mainly on the plain
Row 1 Column 1 (Rowspan=2)

The rain in spain falls mainly on the plain
Row 1 Column 2 (Rowspan=1)

The rain in spain falls mainly on the plain
Row 2 Column 1 (Rowspan=1)


Code without text:

<table width="400" cellpadding="5" cellspacing="0" border="1">
<tr valign="top">
<td colspan="1" rowspan="2"></td>
<td colspan="1" rowspan="1"></td>
</tr>
<tr valign="top">
<td colspan="1" rowspan="1">
</td></tr></table>



NOTE: The code for this page makes use of rowspan and colspan. Check out the source code.

2 Row 3 Column Table

This example shows a 2 row 3 column table. It is useful when you want a tower ad or sitemap on each side of the page with text in the center. Because the first column on the first row spans into what would be the first column on the second row, only one column definition is used on the second row. The third column definition on the second row is omitted because we want the one existing column to be 2 columns wide. Clear as MUD!
I know, but check the code.

The rain in spain falls mainly on the plain
Row 1 Column 1 Rowspan=2

The rain in spain falls mainly on the plain
Row 1 Column 2 Rowspan=1

The rain in spain falls mainly on the plain
Row 1 Column 3 Rowspan=1

The rain in spain falls mainly on the plain
Row 2 Column 1 Rowspan=1

The code without text:

<table width="400" cellpadding="5" cellspacing="0" border="1">
<tr align="center" valign="top">
<td colspan="1" rowspan="2" bgcolor="#78B0DA"></td>
<td colspan="1" rowspan="1"></td>
<td colspan="1" rowspan="1" bgcolor="#FF8080"></td>
</tr>
<tr align="center" valign="top">
<td colspan="2" rowspan="1"></td></tr></table>