Title: Colspan and Rowspan
URL: http://www.activejump.com/j-6.shtml
Email: webmaster@activejump.com
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 | |
|
|
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 | |
|
|
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 | |
|
|
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 | |
|
|
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 | |
|
|
|