Section 10.1. Using Tables the Right Way

10.1. Using Tables the Right Way

HTML tables have seen a lot of use in the short history of the Web. Originally created to display data in a spreadsheet-like format, tables became a popular layout tool. Faced with HTML's limitations, designers got creative and used table rows and columns to position page elements like banner headlines and sidebars. As you'll see in Part III of this book, CSS does a much better job of laying out Web pages. You can concentrate on using (and formatting) tables for their original purposedisplaying data (Figure 10-1).

Figure 10-1. You can do all of your page layout and design with CSS, and use tables for what they were intendeddisplaying rows and columns of information. CSS created the attractive fonts, borders, and background colors in this table about indoor lawn mowers, but the underlying structure is all thanks to HTML.

HTML (and XHTML) has a surprising number of tags dedicated to table building. This chunk of HTML creates the very simple table pictured in Figure 10-2.

  <table> <caption align="bottom">  Table 1: CosmoFarmer.com's Indoor Mower Roundup  </caption> <colgroup> <col id="brand" />  <col id="price" /> <col id="power" /> </colgroup>  <thead> <tr>    <th scope="col">  Brand  </th>  <th scope="col">Price</th>    <th scope="col">Power Source</th>  </tr>  </thead>  <tbody>  <tr>  <td>  Chinook Push-o-matic Indoor Mower  </td>  <td>7.00</td>    <td>Mechanical</td> </tr> <tr>    <td>Sampson Deluxe Apartment Mower</td>    <td>0.00</td>    <td>Mechanical</td> </tr> </tbody>  </table>  

Even with only three rows and three columns, the table uses nine unique HTML tags: <table>, <caption>, <colgroup>, <col>, <thead>, <tbody> <tr>, <th>, and <td>. In general, more HTML isn't a good thing, but a table's various tags give you lots of useful hooks to hang CSS styles on. The headers of each columnthe <th> tagscan look different from other table cells if you create a <th> tag style. This saves you the hassle of having to create lots of classes like .tableHeader and applying them by hand to individual table cells. In the next section, you'll see examples of how you can use these different tags to your advantage.

Figure 10-2. Data tables, like this one, usually have headers created with the <th> tag. Header cells announce what type of information appears in a row or column. Price tells you that you'll find the cost of each lawn mower listed in the cells below. The actual data presented in a table is enclosed in <td> tags.

---

Note: For an in-depth article on the HTML used to create tables, visit www.456bereastreet.com/archive/200410/bring_on_the_tables/.

---