HTML and CSS [Electronic resources] نسخه متنی

Spanning Rows

As you're setting up your data table, you might find that you need to have a single column span a number of rows within the table. To do this, you'll use the rowspan attribute with the value of rows you want to span to the table header or table cell in question (see Example 4-9).

Example 4-9. Using rowspan to span two rows

<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table 
demonstrates rowspan">
<caption>Demonstrating rowspan</caption>
<tr>
<th rowspan="2">Header (spans 2 rows)</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th>Header (no span)</th>
<td>data</td>
<td>data</td>
</tr>
</table>

Figure 4-10 shows the spanned header rows.

You can also span rows within table cells. If you wanted to make the second column span all three rows, you could do so by using the rowspan attribute in the appropriate table data cell (see Example 4-10).

Example 4-10. Spanning three rows in a table cell

<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table
 demonstrates rowspan">
<caption>Demonstrating rowspan</caption>
<tr>
<th rowspan="2">Header (spans 2 rows)</th>
<td rowspan="3">data (spans 3 rows)</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<th>Header (no span)</th>
<td>data</td>
</tr>
</table>

You'll notice that I've removed any unnecessary table cells (see Figure 4-11).