Spanning Columns And Rows
Using Tables
Most tables have cells that stretch across two or
more rows or column in the table. These cells span the related rows
and columns. Often, the spanning cells contain information relevant
to rows and columns, such as a common heading or shared data.
You can create spanning cells across rows and
columns (or both) using two attributes defined for the <td>
and <th> tags. The colspan
attribute creates a cell that spans two or more columns. The rowspan
attribute creates a cell that spans two or more rows. You can use
these attributes together, creating a cell that spans rows and
columns simultaneously.
Simple
spans
Our example table: a spanning row heading cell.
We'll add another row whose single cell spans both heading cells in
the next row. Here is the HTML code and the resulting table:
|
<tableborder=1>
<tr>
<th></th>
<thcolspan=2>Coffee</th>
</tr>
<tr>
<th></th>
<th>Nescafe</th>
<th>MaxwellHouse</th>
</tr>
<tr>
<th>Roast</th>
<td>Columbian</td>
<td>Dark Roast</td>
</tr>
<tr>
<th>Quantity</th>
<td>1 lbs</td>
<td>2 lbs</td>
</tr>
</table>
|
|
Coffee |
|
Nescafe |
Maxwell House |
| Roast |
Columbian |
Dark Roast |
| Quantity |
1 lbs |
2 lbs |
Noitce that the first row of this table has only two
cells. The first cell is empty, lining up with the empty cell in the
beginning of the second row. The next cell has the
colspan
attribute set to
2,
causing it to span the next two cells in the next row. You can verify
this by seeing that the cell containing "Coffee" spans the two
cells containing "Nescafe" and "Maxwell House".
We can create a similar row-spanning cell by adding an
additional column to the table:
|
<table border=1>
<tr>
<th></th>
<th></th>
<th colspan=2>Coffee</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Nescafe</th>
<th>MaxwellHouse</th>
</tr>
<tr>
<th rowspan=2>SafeWay</th>
<th>Roast</th>
<td>Columbian</td>
<td>Dark Roast</td>
</tr>
<tr>
<th>Quantity</th>
<td>1 lbs.l</td>
<td>2 lbs</td>
</tr>
</table>
|
| |
Coffee |
| Nescafe |
Maxwell House |
| SafeWay |
Roast |
Columbian |
Dark Roast |
| Quantity |
1 lbs |
2 lbs |
Rowspans make things a bit more complicated. Since we
are creating a new column when we insert a row-spanning cell, we have to
add corresponding cells to every other row,
except
the rows corresponding to the spanning cell. Checking
the HTML, we added another blank cell to the first two header rows, and
the spanning cell to the third row. We did not add another cell to the
fourth row, since its first cell is actually the spanning cell from the
preceding row. The fourth row already has four cells: the first comes
from the third row, and the remaining three are explicitly defined.
You need to be careful when defining tables with
multiple spanning rows and columns, as we'll see. Make sure you count
columns carefully, ensuring that the right cells line up with the
corresponding spanning cells.
Spanning rows
and columns
Our example table has four empty cells in the upper left
corner, corresponding to the two header rows and header columns. We
specified all four cells explicitly, but could have used just one cell,
spanning both rows and columns.
If the first cell in the first row were defined as:
<th rowspan=2 colspan=2></th>
the cell would span the first two cells of the first two
rows. The resulting HTML is somewhat smaller:
<table border=1>
<tr>
<th rowspan=2 colspan=2></th>
<th colspan=2>Coffee</th>
</tr>
<tr>
<th>Nescafe</th>
<th>MaxwellHouse</th>
</tr>
<tr>
<th rowspan=2>SafeWay</th>
<th>Roast</th>
<td>Columbian</td>
<td>Dark Roast</td>
</tr>
<tr>
<th>Quantity</th>
<td>1 lbs</td>
<td>2 lbs</td>
</tr>
</table>
Since this cell is the equivalent of two cells wide, it
replaces the first two cells in the second row.
Spanning cells are not limited to the edges of a table.
Here is a 4x4 table with the center spanning both rows and columns:
| 13 |
14 |
15 |
16 |
| 12 |
22 |
17 |
| 11 |
18 |
| 10 |
21 |
20 |
19 |
See if you can write HTML to produce this table, before
you look at the source to get the answer.
Offset spans
Multiple spans in a table need not align. As long as the
spanning cells do not try to occupy the same space within the table,
everything works out fine. Here is a brickwork pattern, created using
alternating two- and three-column spans:
| A |
A |
| A |
A |
A |
| A |
A |
| A |
A |
A |
| A |
A |
| A |
A |
A |
Tables can get complicated and require careful attention
as you define your spans. They are worth the effort, though, since many
table layouts and document formats are only achievable through spanning
table cells.
It's worth your time to experiment with various spanning
cells, learning how they affect tables.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index
3:
Creating Tables - Everything About HTML Tables