[Chapter 5] 5.4 The <th> and <td> Tags

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>