Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 2: Working with tables CHAPTER 5 239

FIGURE 5-15 he rendered page with the footer containing only two cellsT

The rowspan attribute tells the browser that a <td> or <th> element should be the size

of multiple vertical cells. In the previous example, when you want to add a column with only

two cells, use <td rowspan=”n”> where n equals the number of rows to span, in this case, 2.

Remember that adding a column also requires you to add the column to the header and to

modify the colspan attribute in the footer. The following is the modified table.

<table>

<thead>

<tr>

<th>Vehicle #</th>

<th>Category</th>

<th>Year</th>

<th>Make</th>

<th>Model</th>

<th>Price</th>

</tr>

</thead>

<tbody id="antiqueCars">

<tr>

<th>1</th>

<td rowspan="2">Antique</td>

<td>1957</td>

<td>Ford</td>

<td>Thunderbird</td>

<td>14,000</td>

</tr>

<tr>

<th>2</th>

<td>1958</td>

<td>Chevrolet</td>

<td>Impala</td>

<td>3,000</td>

</tr>

</tbody>

<tbody id="nonAntiqueCars">

<tr>

<th>3</th>

<td rowspan="2">Non-Antique</td>