Foundation HTML5 with CSS3

Building Tables

The td element must be a child of a tr element and must have a start tag. The end tag, though, is

optional, and the rules here are similar to those for the tr element. You may omit the end tag if the td

element is immediately followed by either another td element or by a th element (more on this one later!)

or if its parent contains no further content (meaning it’s the last cell in its row).

Required Attributes

The td element has no required attributes.

Optional Attributes

In addition to the global attributes, the following are optional attributes of the td element.

 colspan: a positive integer indicating the number of adjacent columns to be

spanned by the table cell.

 rowspan: a positive integer indicating the number of adjacent rows to be spanned

by the table cell.

 headers: a space-separated list of unique IDs referencing th elements that act as

headers for the table cell.

The colspan attribute

The colspan attribute accepts a positive integer and instructs the browser to create a cell that spans as

many columns of the table as the attribute’s value indicates. Listing 7-6 demonstrates this.

Listing 7-6. A table demonstrating usage of the colspan attribute

<table>

<tr>

<td colspan="2">Utility Belts</td>

</tr>

<tr>

<td>New</td>

<td>Used</td>

</tr>

<tr>

<td>9</td>

<td>27</td>

</tr>

</table>

Figure 7-1 shows the rendered output of this code. For illustrative purposes, we’ve added a background

color to the spanned cell.