 |
Chapter 5 |  |
|
Chapter 5 | |
Contents:
The <table> Tag
The <caption> Tag
The <tr> Tag
The <th> and <td> Tags
Internet Explorer Tables
HTML tables offer another creative way to lay out the information in your Web documents. Not only can they be used for standard table comparisons, but also as a way to place the elements of your page more precisely. The HTML table standard has never been totally nailed down, but most graphical browsers use a slightly trimmed version of the proposed standard to great effect. There are also many new extensions, which allow you to add to the visual value of your tables.
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 will be displayed within each table cell.
Table cells are defined across each row of a table. The number of cells in a row is determined by the number of <th> or <td> tags contained within a <tr>. If a table cell spans more than one row (using the rowspan attribute), the affected rows below it automatically accomodate the cell, and no additional cell tag is needed to represent it in those rows.
Here is an example of an HTML table. shows the 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 will look in different browsers (as with all of your HTML documents).
<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>
![[Graphic: Figure 5-1]](figs/wm_0501.gif)
The contents of table cells may be any data that can can be displayed in an HTML document. This can be plain text, images, tagged text, and other HTML structures. The table cells will be sized according to their contents and in relation to other cells.
Tables are normally treated as floating objects within a browser window. They are aligned in the browser window to match the containing 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 will then flow along the opposite side of the table, if there is room.
The hspace and vspace attributes are used to 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 in 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 will fit all of 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%">
will always stretch the table to the full width of the browser window. This is a conditional instruction, however. The size of table cells is always determined by the size of the biggest "fixed" content such as an image or a non-breaking line of text. Therefore, a table may need to be wider than you want to allow it. If the table cells contain mostly wrapping text elements such as paragraphs (<p>), the browser will usually accomodate your request.
The border attribute to <table> is used to control the borders within and around the table. Simply using border with no attributes will add 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 and no border attributes turn table borders off completely.
The remaining attributes for the <table> tag get confusing from here on in, because they are supported by different browsers. Netscape only supports the two attributes cellpadding and cellspacing. 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.
Internet Explorer only supports the valign attribute in the <table> tag. valign sets the vertical alignment of the contents of a cell. It accepts values of either top or bottom. The default is to center cell contents. When used in the <table> tag, Internet Explorer sets the vertical alignment for all cells in a table. Both Netscape and Internet Explorer also support valign in the lower-level tags of a table with the same functionality. The lower-level specification overrides the upper-level specification.
The other attributes for the <table> tag are exclusive to Internet Explorer. They can also be used in the <tr>, <th>, and <td> tags. They are discussed in the "Internet Explorer Tables" section at the end of this chapter.
