Advanced Data Tables | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

So far, the discussion of tables has mentioned five elements: table , caption , tr , th , and td . These are the most commonly used elements. HTML 4 introduced several new elements that provide increased control over table formatting: col , colgroup , thead , tfoot , and tbody . A variety of attributes to control table data formatting are also supported in standards-aware browsers.

Rather than the simple structure presented earlier, a full HTML/XHTML table is defined by the specification using the following structure:

An opening <table> tag.
An optional caption specified by <caption> </caption> .
One or more groups of rows. These might consist of a header section specified by <thead> , a footer section specified by <tfoot> , and a body section specified by <tbody> . Although all these elements are optional, the table must contain at least a series of rows specified by <tr> . The rows themselves must contain at least one header or data cell , specified by <th> and <td> , respectively.
One or more groups of columns specified by <colgroup> with individual columns within the group indicated by <col> .
A closing </table> tag.

The main difference between strict standards-oriented tables and the more basic table form is that rows and columns can be grouped together. The advantage to grouping is that it conveys structural information about the table that might be useful for rendering the table more quickly or keeping it together when displaying on the screen. For example, specifying the <thead> or <tfoot> might allow a consistent header or footer to be used across larger tables when they span many screens (or sheets of paper when printed). The use of these elements is mandatory when working with dynamically populated tables that incorporate databinding as introduced by Microsoft and discussed later in this chapter.

The example that follows illustrates the use of the relatively uncommon HTML/XHTML table elements just presented.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Standard HTML/XHTML Tables  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <table border="1" frame="box" rules="groups">   <caption>  Fun with Food  </caption>   <colgroup>   <col />   </colgroup>   <colgroup>   <col align="center" />   <col align="char" char="." charoff="2" />   </colgroup>   <thead>   <tr>   <th bgcolor="yellow">  Fruit  </th>   <th bgcolor="yellow">  Color  </th>   <th bgcolor="yellow">  Cost per pound  </th>   </tr>   </thead>   <tfoot>   <tr>   <th colspan="3">  This has been another fine table example.  </th>   </tr>   </tfoot>   <tbody>   <tr>   <td>  Grapes  </td>   <td>  Purple  </td>   <td>  .45  </td>   </tr>   <tr>   <td>  Cherries  </td>   <td>  Red  </td>   <td>  .99  </td>   </tr>   <tr>   <td>  Kiwi  </td>   <td>  Brown  </td>   <td>  .50  </td>   </tr>   </tbody>   </table>   </body>   </html>

The first thing to notice in this code is the use of the frame and rules attributes for the <table> tag. The frame attribute specifies which sides of the frame that surrounds the table will be visible. In this example, the value is set to box , which means that the frame around the outside of the table is on. Other values for this attribute include above , below , hsides , vsides , lhs , rhs , void , and border . The meaning of all these values is discussed in the table syntax section of Appendix A.

Do not confuse the idea of the frame attribute with that of rules . The rules attribute defines the rules that might appear between the actual cells in the table. In the example, the value of rules is set to groups; this displays lines between the row or column groupings of the table. The rules attribute also takes a value of none , groups , rows , cols , and all .

The other major difference in the preceding table example is the inclusion of the <thead> and <tbody> tags. <thead> contains the rows ( <tr> ), headings ( <th> ), and cells ( <td> ) that make up the head of the table. In addition to organization and the application of styles, the advantage of grouping these items is that it might be possible to repeat the elements over multiple pages (under certain browsers). Imagine printing out a large table and having the headers for the rows appear on every page of the printout. This is what <thead> might be able to provide. Similarly, the <tfoot> tag creates a footer to use in the table, which also might run over multiple pages. Lastly, the <tbody> tag indicates the body of the table, which contains the rows and columns that make up the inner part of a table. Whereas there should be only one occurrence of <thead> and <tfoot> , there can be multiple occurrences of <tbody> . Multiple bodies in a document might seem confusing, but these elements are more for grouping purposes than anything else. When a table is specified without <thead> , <tfoot> , or <tbody>, it is assumed to have one body by default.

Notice that one of the < col> tags in the example uses the char value for align in conjunction with the char attribute:

  <col align="char" char="." />

This is meant to make the contents of the cells in that column line up with a certain character; in this case, a decimal point. The intended effect would be useful for aligning numbers with decimal points:

Unfortunately, this doesn't seem to work in just any browser:

Although data tables are becoming more difficult to code, you can take heart from the variety of tools that can be used to create them. Most HTML editing tools can easily add the elements needed to make tables; Macromedia Dreamweaver and Homesite offer tools for table creation. This is good, because the combination of standard table elements along with various proprietary extensions introduced by Microsoft results in a dizzying array of elements and attributes for the individual table cells. For those inclined to delve into all the details, the complete syntax for the table element and all associated elements can be found in Appendix A.

< Day Day Up >