 |  |
Chapter 5. Tables
Contents:
The <table> Tag
The <caption> Tag
The <tr> Tag
The <th> and <td> Tags
Border Color and Backgrounds
Advanced Table Tags
HTML tables offer a detailed way to present data, as well as a creative way to lay out the information in your web documents. The standard HTML model for tables is straightforward: a table is a collection of data arranged and related in rows and columns of cells. Most cells contain data values; others contain row and column headers that describe the data.
The HTML 4.01 table specification defines a number of tags and attributes for creating tables. Newly supported tags allow you to organize and display table data with great detail, and with the application of CSS-style elements, table styles can be standardized across your documents.
The main tags that describe tables are: <table>, <caption>, <tr>, <th>, and <td>. The <table> tag surrounds the table and gives default specifications for the entire table such as background color, border size, and spacing between cells. The optional <caption> tag is placed within the <table> tags and provides a caption for the table. <tr> tags denote each row of the table and contain the tags for each cell within a row. <th> and <td> describe the table cells themselves, <th> being a header cell and <td> being a regular cell. <th> and <td> tags surround the information that is displayed within each table cell.
Figure 5-1 shows an HTML table rendered in two different browsers. Note how differently each browser displays the same table. You should keep these differences in mind when designing tables and test to see how your table looks in different browsers (as with all of your HTML documents).
Figure 5-1. HTML table rendered by Navigator (top) and by Explorer (bottom)
Here is the code that renders the table:
<table border cellspacing=0 cellpadding=5>
<caption align=bottom> Kumquat versus a poked
eye, by gender</caption>
<tr>
<td colspan=2 rowspan=2></td>
<th colspan=2 align=center>Preference</th>
</tr>
<tr>
<th>Eating Kumquats</th>
<th>Poke In The Eye</th>
</tr>
<tr align=center>
<th rowspan=2>Gender</th>
<th>Male</th>
<td>73%</td>
<td>27%</td>
</tr>
<tr align=center>
<th>Female</th>
<td>16%</td>
<td>84%</td>
</tr>
</table>The contents of table cells may be any data that can be displayed in an HTML document. This can be plain text, images, tagged text, and other HTML structures. The table cells are sized according to their contents and in relation to other cells.
5.1. The <table> Tag
Tables are normally treated as floating objects within a browser window. They're aligned in the browser window to match the text flow, usually left-justified (or centered). Unlike inline images, however, text normally floats above and below a table but not beside it. Internet Explorer and Netscape allow you to set the alignment of a table and float text around it with the align attribute. align accepts two values, left and right. These values instruct the browser to align the table with either the left or right margin of the text flow around it. Text then flows along the opposite side of the table, if there is room.
The hspace and vspace attributes add extra space between the table and surrounding content. hspace adds space to the left and right sides of the table; vspace adds space above and below it. The value of each attribute is given as an integer number of pixels.
The width attribute can give you some control over the width of a table. Tables are normally rendered at the width that fits all the contents. The width attribute allows you to widen the table beyond the default size to occupy a set number of pixels or a percentage of the window's width. For example:
<table width="100%" >
always stretches the table to the full width of the browser window. This is a conditional instruction, however. The size of a table cell is always determined by the size of the biggest "fixed" content, such as an image or a nonbreaking line of text. Therefore, a table may need to be wider than you wish it. If the table cells contain mostly wrapping text elements such as paragraphs (<p>), the browser usually accommodates your request.
The border attribute to <table> controls the borders within and around the table. Simply using border with no attributes adds default borders to a table, which are not rendered the same in any two browsers. You can set border width by giving the attribute an integer number of pixels as a value. The border=0 setting turns table borders off completely.
The amount of space around each cell is controlled by the cellpadding and cellspacing attributes to the <table> tag. Each accepts an integer number of pixels as a value. cellpadding sets the space between a cell's contents and its edges, whether borders are on or off. cellspacing sets the space between adjacent table cells. If borders are turned on, cellspacing will add the space outside of the border (half on one side, half on the other). The border width is not included or affected by cellspacing or cellpadding.
The additional attributes to the <table> tag are supported only by Internet Explorer. The rules and frames attributes tell the browser where to draw the rules (or borders) in the table. These settings depend on the use of other tags for the table such as <colgroup> or <tfoot>, which group table cells into distinct sections. There are many different values for rules and frames, making this feature quite versatile. It is, however, not supported in other browsers.
The other <table> attributes exclusive to Internet Explorer set backgrounds and colors for 3D borders. They are also usable in the lower-level <tr>, <th>, and <td> tags. They are discussed presently.
|  | |
| 4.5. Frame Border Attributes |  | 5.2. The <caption> Tag |
Copyright © 2003 O'Reilly & Associates. All rights reserved.