Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 2: Working with tables CHAPTER 5 231

Figure 5-12 shows the rendered output as four rows with three columns in each row. It’s

not obvious that there are columns in each row, however, and there is no header or footer.

You might also want to see a border around all cells to make the table more obvious. This

table needs improvement. Would alternating column colors improve it?

FIGURE 5-12 he rendered table with rows and columnsT

Adding header cells

Use the <th> element instead of the <td> element to display a header. The header can be

horizontal or vertical. For example, you might want a header across the top to label each

column and a header down the left side (in the first column) to label each row. The following

is the modified table.

<table>

<tr>

<th>Vehicle #</th>

<th>Year</th>

<th>Make</th>

<th>Model</th>

</tr>

<tr>

<th>1</th>

<td>1957</td>

<td>Ford</td>

<td>Thunderbird</td>

</tr>

<tr>

<th>2</th>

<td>1958</td>

<td>Chevrolet</td>

<td>Impala</td>

</tr>

<tr>

<th>3</th>

<td>2012</td>

<td>BMW</td>

<td>Z4</td>

</tr>

<tr>

<th>4</th>

<td>2003</td>