XHTML Tutorial: Standards-Based Web Design

by Paul Bohman

• Images |
• Simple Data Tables

Tables

It's kind of a pain to create tables by hand. It's easier to do it inside of a tool like Dreamweaver that does most of the work for you, but it is still important to learn the markup, so that you know what tools like Dreamweaver are doing.

Tables have rows and columns. They are a grid of information. A simple table in XHTML looks like this:

<table border="1">
  <tr>
    <th>Color</th>
    <th>Size</th>
  </tr>
  <tr>
    <td>Red</td>
    <td>Large</td>
  </tr>
    <tr>
    <td>Blue</td>
    <td>Small</td>
  </tr>
</table>

• <tr> means" table row"
• <th> means "table header" cell
• <td> means "table data" cell

The table will look something like this in the browser:

And there you have it. A simple data table. Look back at the markup and compare it to the visible table. You'll notice that we designate table rows, but there is no markup that designates a table column, at least not explicitly. The columns are designated as either header cells or data cells within rows. The first cell within a row is the first column, and the second cell is the second column, and so on. You could have fun with this table by adding more and more data cells to each row. Just remember to make sure that you have the same number of cells per row, or else you're going to have some odd-looking tables that won't display correctly.

Don't Use Tables Just for Visual Formatting

Those of you who have created web sites in the past probably know that it is possible to use tables for layout purposes. In the interest of using elements for what they're supposed to be used for, it is better to use tables to display a grid of data, not merely for visual layout purposes. While you should be aware that it is possible to use tables for layout, CSS is better. CSS is more powerful, cleaner, standards-based, and more modern. CSS also has accessibility benefits because it helps to separate content (the XHTML) from the "look and feel" or "presentation" of that content (the CSS). With a clean separation between content and presentation, it is usually easier to ensure that the content itself is usable and accessible. One of the reasons for this is because if you remove the styles from the XHTML, you essentially have a text-only version, which helps you to "visualize" how pages sound to screen reader users.