[Chapter 5] 5.4 The <th> and <td> Tags
Author: Stephen Spainhour and Valerie Quercia
Date: Fri Aug 29 18:05:19 1997

#

| Chapter 5 Tables |

## 5.4 The <th> and <td> Tags

The `<th>` (table header) and `<td>` (table data) tags go inside the `<tr>` tags of an HTML table to create the cells and contents of each cell within a row. The two tags are identical, except that Netscape and Mosaic render the `<th>` cells in bold text and centered by default. (Internet Explorer does not use bold text for `<th>` cells.) `<td>` cell contents are by default rendered in the regular base font, left justified.

The `align`, `valign`, and Internet Explorer-specific attributes all work the same in the cell tags as they do in the row tag. When specified for `<th>` and `<td>`, these attributes override the same behavior set in the upper-level tags for their specific cell.

The other attributes to the cell tags are very important to the layout of your table. The `width` attribute can be used to set the width of a table cell, and all cells within its column. As with the `<table>` tag, a value may be given in an integer number of pixels or a percentage of the width of the table. A `width` value may be ignored by the browser if contents within the column have a fixed width larger than the value (i.e., an image or non-breaking line of text). You should use only one `width` value in the cells of the same column. If two `width` values are specified in the same column of cells, the browser uses the larger value.

The `nowrap` attribute, when included in a cell tag, disables regular linebreaking of text within a table cell. With `nowrap`, the browser assembles the contents of a cell onto a single line, unless you insert a `<br>` or `<p>` tag, which will force a break.

###

#### Cell Spanning

It is common to have table cells span several columns or rows. This behavior is set within the `<th>` and `<td>` tags with the `colspan` and `rowspan` attributes. Each value is given in an integer number of columns or rows the cell is to stretch across. For example:

    <td colspan=3>

tells the browser to make the cell occupy the same horizontal space as three cells in rows above or below it. The browser flows the contents of the cell to occupy the entire space.

If there aren't enough empty cells on the right, the browser just extends the cell over as many columns as exist to the right; it doesn't add extra empty cells to each row to accomodate an over-extended `colspan` value.

Similar to the `colspan` attribute, `rowspan` stretches a cell down two or more rows in a table. You include the `rowspan` attribute in the `<th>` or `<td>` tag of the uppermost row of a table where you want the cell to begin and set its value equal to the number of rows you want it to span. The cell then occupies the same space as the current row and an appropriate number of cells below that row. For example:

    <td rowspan=3>

creates a cell that occupies the current row plus two more rows below that. The browser ignores overextended `rowspan` values and will only extend the current cell down rows you've explicitly defined by other `<tr>` tags following the current row.

You may combine `colspan` and `rowspan` attributes to create a cell that spans both rows and columns. In our example table in the blank cell in the upper-left corner does this with the tag:

    <td colspan=2 rowspan=2></td>

The <tr> Tag |  | Internet Explorer Tables