post-tables

Semantic Coding

To table or not to table, that is the question…

The Internet is really a big library of information, with the smattering of cake recipes, photos of celebrities, and bad cartoons thrown in for flavor. Unfortunately, most of the information out there is junk. The data has no reference or connection to other bits of data. While this is fine for the average visitor that can make the visual connection between an image and the text below it, those without the benefit of sight cannot.

One of the important benefits of standards-based programming is the connection between data and context. When the visual dressings are removed from a page, the information continues to make sense. The misuse of the table is the culprit for much of the bad information context; let’s look at how the information could be presented properly.

Old style programming

Here is a simple table with information about a work of art

the happy fish
The Happy Fish, 2001
Mixed Media, 16”X12”
Salvador Dalicious, Spanish
The Fish Museum, 2002:23

This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.

The code for this simple table would be:

  1. <table cellspacing=“0” cellpadding=“0” border=“1”>
  2. <tr>
  3. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  4. <td><img src=“spacer.gif” width=“200px” height=“10px” alt=“”></td>
  5. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  6. </tr>
  7. <tr>
  8. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  9. <td><img src=“happyfish.jpg” width=“200px” height=“150px” alt=“photo of a happy fish”></td>
  10. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=””></td>
  11. </tr>
  12. <tr>
  13. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  14. <td> The Happy Fish, 2001<br />
    Mixed Media, 16”X12” <br />
    Salvador Dalicious, Spanish<br />
    The Fish Museum, 2002:23</td>
  15. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“”></td>
  16. </tr>
  17. <tr>
  18. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“ ”></td>
  19. <td><p> This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.</p></td>
  20. <td><img src=“spacer.gif” width=“10px” height=“10px” alt=“ ”></td>
  21. </tr>
  22. </table>

elements to this object, an image, specific details, and a description. These bits of information are scattered and there is no connection between one cell and another.

With standards-based programming, choose the most appropriate container for your data. This is a work of art and all of the information is directly related to that work of art. This would be a good place to use a Definition List.

The definition list features data terms and data descriptions. It can include multiple terms and multiple definitions. For this example, I am going to use a single term, the work of art’s title. The other elements will be definitions. Style sheets would give the preferred look to the information.

  1. <dl>
  2. <dt>The Happy Fish, 2001</dt>
  3. <dd><img src=“happyfish.jpg” width=“200px” height=“150px” alt=“photo of a happy fish”></dd>
  4. <dd> Mixed Media, 16”X12”</dd>
  5. <dd>Salvador Dalicious, Spanish</dd>
  6. <dd>The Fish Museum, 2002:23</dd>
  7. <dd> This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.</dd>
  8. </dl>

The Happy Fish, 2001
the happy fish
Mixed Media, 16”X12”
Salvador Dalicious, Spanish
The Fish Museum, 2002:23
This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.

While the previous example provided context to the data with data terms and data definitions, we could go further. We could add classes to the definitions to give them more context and allow us to customize their presentation more:

  1. <dd class=“media”> Mixed Media, 16”X12”</dd>
  2. <dd class=“artist”> Salvador Dalicious, Spanish …</dd>

If this were a page devoted to this work of art in a gallery, we could expand the information into more detail.

  1. <dl>
  2. <dt><img src=“happyfish.jpg” width=“200px” height=“150px” alt=“photo of a happy fish”></dt>
  3. <dt>Title</dt>
  4. <dd>The Happy Fish </dd>
  5. <dt>Creation Date</dt>
  6. <dd>2001</dd>
  7. <dt>Media</dt>
  8. <dd> Mixed Media</dd>
  9. <dt>Dimensions </dt>
  10. <dd>16”X12”</dd>
  11. <dt>Artist </dt>
  12. <dd>Salvador Dalicious, Spanish </dd>
  13. <dt>Owner </dt>
  14. <dd>The Fish Museum </dd>
  15. <dt>Accession # </dt>
  16. <dd>2002:23</dd>
  17. <dt>Description</dt>
  18. <dd> This assemblage of a happy fish and packing boxes reflects the struggle of creatures with bulges on their heads in society.</dd>
  19. </dl>


This presentation of the information is inherently more accessible to web site visitors, including Google.

Use a table for tabular data.

Use a table when there are columns and rows and their intersection provides the answer to your question. How much does it cost to ship a Tiny Tim cd to Canada?
Here’s an example of a proper table:

Shipping Costs for Tiny Tim Cds
Quantity United States Canada
1 $1.00 $1.25
2 $1.25 $1.50
3 $1.25 $1.50
4 $1.50 $2.00
5+ $2.00 $3.00

To give the data in this table more context, there are some rarely used tags and attributes that give the table super powers.

First, we are going to remove unnecessary attributes that are now handled with CSS. The cellpadding and borders are not necessary. We will keep the cellspacing=”0”.
<table cellspacing=“0”></table>
We begin with a caption tag that defines the purpose of the table
<caption>Shipping Costs for Tiny Tim cd’s </caption>
Next, we define the header of the table and define the scope of the particular elements. This table uses the top row to define the data and each column has a header.

  1. <thead>
  2. <tr>
  3. <th scope=“col”>Quantity</th>
  4. <th scope=“col”>United States</th>
  5. <th scope=“col”>Canada</th>
  6. </tr>
  7. </thead>


We have defined the header and explained how the columns will define the information below them. Now we will begin the body of the table.

  1. <tbody>
  2. <tr>
  3. <td>1</td>
  4. <td>$1.00</td>
  5. <td>$1.25</td>
  6. </tr>
  7. <tr>
  8. <td>2</td>
  9. <td>$1.00</td>
  10. <td>$1.25</td>
  11. </tr>
  12. <tr>
  13. <td>3</td>
  14. <td>$125</td>
  15. <td>$150</td>
  16. </tr>
  17. <tr>
  18. <td>4</td>
  19. <td>$1.25</td>
  20. <td>$1.50</td>
  21. </tr>
  22. <tr>
  23. <td>5+</td>
  24. <td>$21.00</td>
  25. <td>$3.00</td>
  26. </tr>

We have now inserted information into the various rows, it is time to close the table

</tbody></table>
The style sheet will define the look of the caption, border details, cell padding, table margins, background colors, text-alignment, etc.

Navigate around the table

Tables have traditionally been used to build navigation elements. But once again, this is not the most appropriate container for the information. Here’s a common example:

HOME
ABOUT US
CONTACT US
STORE
FUN STUFF
LEGAL STUFF

This is not tabular data; it is simply a list of links. So, let’s use a list for these links. There are three types of lists, the Definition List, the Ordered List, and the Unordered List.

We have already looked at the definition list and this doesn’t seem to be the right place to use it. There are no terms and definitions, just a list.

An ordered list has a hierarchy, such as:
1.xxx
2.xxx
3.xxx.
This would be appropriate if these links were chapters in a book and you needed to read them in a particular order. This doesn’t seem appropriate either.

The unordered list is used for lists of data that have no specific connection or order. This seems to be the best solution for our navigation bar. We will apply a class to the navigation list to customize it in the style sheets.

  1. <ul class=“navigation”>
  2. <li><a href=“home.html” title=“return to the home page”>HOME</a></li>
  3. <li><a href=“about.html” title=“Find out more about our company”>ABOUT US</a></li>
  4. <li><a href=“contact.html” title=“Get information on how to contact us”>CONTACT US</a></li>
  5. ...

Here is a sample style sheet:

:200px; border:none; border-top:1px solid #000; margin:5px; padding:0;}
This says: Don’t use any bullets, make the navigation bar 200 pixels wide, only put a border on the top, make it 1 pixel wide, solid and black. Give the list a margin of 5 pixels on all sides and give it no padding inside.

ul.navigation li {border:1px solid #000; border-top: none; list-style:none;}
Give each list item a border on all sides but the top. This, combined with the above code will keep the borders from doubling up, giving them a uniform look.

ul.navigation li a {display: block; padding:2px 5px; background-color:#999; text-decoration:none; }
This makes the links fill the space in the list containers, gives them some padding on all sides, makes the background light grey, and removes the underline from the link

ul.navigation li a:hover {background-color: #000; color:#fff;}
This makes the background on the link black and the text white when the mouse hovers over the link.

Choosing the right container for your information

Consider the information you have on your site and what would be the best way to display it. The table can be your best friend when you have tabular data. But, it is not the best solution for navigation elements or laying out related information.