Spanning Cells
Two very useful cell attributes are the rowspan and colspan attributes. These
allow any given cell to span more than one row or one column.
I know. That sounds a little confusing. Let's look at the example
below.
<body>
<table border="1">
<tr>
<td colspan="2">Text1 </td>
</tr>
<tr>
<td>Text2</td>
<td>Text3</td>
</tr>
</table>
</body>
Notice how the first row only has one cell tag in the code <td>.
Also notice how there is only one cell in the first row of the table that has
spanned over two columns.
You can have the cell span over more columns if you like. Let's try to
span it over 3 columns.
<body>
<table border="1">
<tr>
<td colspan="3">Text1 </td>
</tr>
<tr>
<td>Text2</td>
<td>Text3</td>
<td>Text4</td>
</tr>
</table>
</body>
If you wanted the cell to span over three rows instead of three columns you'd
use the rowspan attribute.
<body>
<table border="1">
<tr>
<td rowspan="2">Text1 </td>
<td>Text2</td>
</tr>
<tr>
<td>Text3</td>
</tr>
</table>
</body>
To span it over 3 columns...
<body>
<table border="1">
<tr>
<td rowspan="3">Text1 </td>
<td>Text2</td>
</tr>
<tr>
<td>Text3</td>
</tr>
<tr>
<td>Text4</td>
</tr>
</table>
</body>
|