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 table layouts for our data.
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 |
The rain in spain falls mainly on the plain |
|
The rain in spain falls mainly on the plain |
Code without text:
<table style="width: 400px">
<tr>
<td colspan="1" rowspan="2"></td>
<td colspan="1" rowspan="1"></td>
</tr>
<tr>
<td colspan="1" rowspan="1">
</td></tr></table>
2 Row 3 Column Table
This example shows a 2 row 3 column table.
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 |
The rain in spain falls mainly on the plain |
The rain in spain falls mainly on the plain |
The rain in spain falls mainly on the plain | ||
The code without text:
<table style="width: 400px;margin: 10px">
<tr>
<td colspan="1" rowspan="2" style="border: solid #ffefef 1px;background:#78B0DA"></td>
<td colspan="1" rowspan="1" style="border: solid #ffefef 1px"></td>
<td colspan="1" rowspan="1" style="border: solid #ffefef 1px;background:#FF8080"></td>
</tr>
<tr>
<td colspan="2" rowspan="1" style="border: solid #ffefef 1px"></td></tr></table>