You are using a previous version of Active Jump.

Go To Current Version of This Page

Active Jump Logo


Information
The Basics
Text
Pictures
Spacing
Colors
Links
Alignment
Lists/Bullets
Tables
Frames
Multimedia
Forms
ISO Characters
Meta Tags
Contact Us


Email Support
Email Contact

Divider

Colspan and Rowspan
Introduction
These two features, Colspan and Rowspan, allow you to extend columns and rows across multiple other columns and rows when they would usually be forced to stop. In this section you will learn how to extend columns and rows.
The Problem
Normally, when creating a cell, the cell cannot pass over into the space below or above another cell. For example, look at the table below. The cell on the bottom row, cannot move past the length of that on the top row without extending both cells.

My Homepage - Microsoft Internet Explorer
Cell 1 Cell 2
Cell 3

As you can see, cell 3 is unable to reach across to the area below cell 2. Using the colspan attribute, you will see in the table below, that cell 3 is now able to cross over beneath cell 2.

My Homepage - Microsoft Internet Explorer
Cell 1 Cell 2
Cell 3

This is very similar to the row span attribute as well, although rowspan connects cells vertically, instead of horizontally. For example, look at the table below.

My Homepage - Microsoft Internet Explorer
Cell 1 Cell 2
Cell 3 Cell 4

Rowspan has the ability to extend verticle rows, so if we wanted to extend cell 1 to cover the area of both cell 1 and cell 3, using the rowspan attribute, the final table would look like the table below.

My Homepage - Microsoft Internet Explorer
Cell 1 Cell 2
Cell 4

Column Span
Column Span extends cells on a horizontal row (left and right). The line to add for Column Span is COLSPAN="X". This line adds onto the <TD> cell so the final result would look like this.

<TD COLSPAN="X">

The "X" in the line, is replaced with the number of cells it extends past. So for example, if it is covering the distance that of 3 cells above or below it, the line would look like <TD COLSPAN="3">. Here is an example using Column Span.

index.html - Notepad
....<BODY>

<TABLE BORDER="1">
<TR> <TD> Cell 1 </TD> <TD> Cell 2 </TD> </TR>
<TR> <TD COLSPAN="2"> Cell 3 </TD> </TR>
</TABLE>

</BODY>....

My Homepage - Microsoft Internet Explorer
Cell 1 Cell 2
Cell 3

Row Span
Row Span extends cells on a vertical row (up and down). The line to add for Row Span is ROWSPAN="X". This line adds onto the <TD> cell so the final result would look like this.

<TD ROWSPAN="X">

The "X" in the line, is replaced with the number of cells it extends. So for example, if it is covering the distance that of 3 cells left or right of it, the line would look like <TD ROWSPAN="3">. Here is an example using Row Span.

index.html - Notepad
....<BODY>

<TABLE BORDER="1">
<TR> <TD ROWSPAN="2"> Cell 1 </TD>
<TD> Cell 2 </TD> </TR> <TR> <TD> Cell 3 </TD> </TR>
</TABLE>

</BODY>....

My Homepage - Microsoft Internet Explorer
Cell 1 Cell 2
Cell 3

Test Your HTML
Printer Friendly Version


Jonathan David VerLee
webmaster@activejump.com


White