 |  |
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 operate similarly, except that header cells are typically rendered in bold text and centered by default. <td> cell contents are rendered in the regular base font, left-justified.
The align, valign, and other attributes 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 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 nonbreaking 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 forces a break.
5.4.1. 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 accommodate an overextended 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. The following code:
<td rowspan=3>
creates a cell that occupies the current row plus two more rows below that. The browser ignores overextended rowspan values and extends the current cell only 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 Figure 5-1, the blank cell in the upper-left corner does this with the tag:
<td colspan=2 rowspan=2></td>
|  | |
| 5.3. The <tr> Tag |  | 5.5. Border Color and Backgrounds |
Copyright © 2003 O'Reilly & Associates. All rights reserved.