1. Technology

HTML Table Tags That are Often Forgotten

Some Table Elements That Improve Your Tables

By

There are many ways you can make your tables more accessible, but the easiest is to use table elements that are already a part of the HTML specification. Here's how to use these elements (and one attribute) so that your HTML tables are more accessible and effective.

The CAPTION Element

Table captions are very common on tables in printed media, but for some reason, web designers often leave them off of tables on web pages. They are very easy to use, just add the caption text inside the CAPTION element right after you open your table:

<table style="width: 400px; border: 1px solid #000;">
  <caption>Table 1.1: A record of the fur shed annually by Jennifer's dog, Shasta</caption>
  <tr>
    <th>Month</th>
    <th>Fur Shed (mm)</th>
  </tr>
  <tr>
    <td>January</td>
    <td>3</td>
  </tr>
  ...
</table>

See this example

To be valid, your CAPTION element should appear right after you open the table, no other location is correct. However, that doesn't mean that the caption has to appear at the top of the table. You can also make it appear to the right, left, or bottom—depending upon where you want it and where it makes the most sense. (This property doesn't work in IE 6.) Change the location with the caption-side style property:

<table style="width: 400px; border: 1px solid #000; caption-side: bottom;">
  <caption>Table 1.1: A record of the fur shed annually by Jennifer's dog, Shasta</caption>
  <tr>
    <th>Month</th>
    <th>Fur Shed (mm)</th>
  </tr>
  <tr>
    <td>January</td>
    <td>3</td>
  </tr>
  ...
</table>

See this example

If you need it to work in IE6 use the align attribute on the caption tag:

<table style="width: 400px; border: 1px solid #000; caption-side: bottom;">   <caption align="bottom">Table 1.1: A record of the fur shed annually by Jennifer's dog, Shasta</caption>   <tr>
    <th>Month</th>
    <th>Fur Shed (mm)</th>
  </tr>
  <tr>
    <td>January</td>
    <td>3</td>
  </tr>
  ...
</table>

See this example

What to Use the CAPTION Element For

Captions provide additional information about the table. Since they typically appear above the table, you can use them as a title, but to make your tables accessible, you want to provide more information than just a title.

You can't include paragraphs within the CAPTION element, but you can add quotations, anchors, and most text elements. Use these elements to provide the most complete caption you can without compromising the page. You don't need to summarize the entire table, leave that to the attribute on page 2—the summary attribute.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Tables
  7. Useful HTML Table Elements and One Attribute That are Often Left Off Tables

©2014 About.com. All rights reserved.