Lesson 4

Tabulated Data

Tables are really easy to make because they are nice and logical. They don't require many elements and they are self-formatting in nature. They have been around forever, so they are well-supported by the various browsers.

Let me just get one thing straight before we go further. Tables are not for laying out pages. They are for presenting tabulated data. All over the web, you will find tables being used for page layout, because it looks good and is easy to do. This is not a good thing, because it makes the page unsuitable for user agents other than web browsers. Nowadays, you must take into account the possibility that your document could be accessed by all manner of user agents. These include, but are not limited to:

  • Cellular phones
  • Televisions
  • Personal Digital Assistants (PDAs)
  • Braille devices
  • Speech synthesizers
  • Search engines

None of these user agents handle tables very well. So if you are learning from scratch, learn to do without tables unless trying to present tabulated data.

Okay, my lecture is over. Let us take a quick look at the most common elements involved in defining the structure of tables:

table
This element encloses a table.
caption
This element describes the nature of a table. Only one caption is permitted, and it must immediately follow the opening <table> tag.
tr
This element encloses a row of table cells.
th
This element defines a table cell that contains header information.
td
This element defines a table cell that contains data.
thead
This element is used to enclose a row group that defines a table's header. Only one group is permitted.
tfoot
This element is used to enclose a row group that defines a table's footer. Only one group is permitted, and it must come before a tbody element.
tbody
This element is used to enclose a row group that defines a table's body.

Okay, there are a lot of elements there for something that I claimed was “easy” but if you will bear with me, you will see that tables really are quite simple to create and manipulate. I will be introducing still more table elements (and some attributes) as we work through this tutorial, but there is no need to panic.

Time to make a simple table. Create page12.html with the following code:

<table>
  <caption>Mixing the primary colors</caption>
  <tr>
    <th>&nbsp;</th>
    <th>Red</th>
    <th>Yellow</th>
    <th>Blue</th>
  </tr>
  <tr>
    <th>Red</th>
    <td>Red</td>
    <td>Orange</td>
    <td>Purple</td>
  </tr>
  <tr>
    <th>Yellow</th>
    <td>Orange</td>
    <td>Yellow</td>
    <td>Green</td>
  </tr>
  <tr>
    <th>Blue</th>
    <td>Purple</td>
    <td>Green</td>
    <td>Blue</td>
  </tr>
</table>

Viewed in a browser, you should see the following:

As you can see, the basic structure of a table is quite logical. The indentations I have used in the code help to show that structure and make it easier to alter afterwards. Notice that the caption and th elements are centered by the browser. The td elements remain in the default (left-justified) position. Notice also that I have inserted a non-breaking space character entity in the first cell. If I had left this blank, the top headings would have moved one cell to the left, and the final column would have had no heading at all.

The table looks pretty ugly like that. It will look better when a simple border is applied to it. CSS will always be the best way of altering the look of a table, but certain table attributes exist in XHTML that you can use. Let us create a new example, page13.html, that includes some of these attributes. This is quite a feast of typing, so you might want to just get it from the source code:

<table border="2px" cellspacing="2px" cellpadding="10px">
  <caption><strong>Global Browser Statistics</strong></caption>
  <thead>
    <tr>
      <th>Browser</th>
      <th>Percentage</th>
      <th>Number</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3" align="right"><em>source: <a href="http://thecounter.com">thecounter.com</a> - May 2002</em></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Internet Explorer 5.x</td>
      <td>54%</td>
      <td>219,146,705</td>
    </tr>
    <tr>
      <td>Internet Explorer 6.x</td>
      <td>34%</td>
      <td>141,191,308</td>
    </tr>
    <tr>
      <td>Netscape 4.x</td>
      <td>4%</td>
      <td>16,606,594</td>
    </tr>
    <tr>
      <td>Internet Explorer 4.x</td>
      <td>3%</td>
      <td>13,080,856</td>
    </tr>
    <tr>
      <td>Others</td>
      <td>5%</td>
      <td>20m (approx)</td>
    </tr>
  </tbody>
</table>

Viewed in a browser, you should see the following:

The first thing you will notice when looking at the code is that the <table> tag has been given a number of attributes. The border attribute allows you to draw a border around all the cells (and the table as a whole), with a width specified in pixels. The cellspacing attribute specifies the gap, in pixels, between each cell. The cellpadding attribute allows you to specify some space around the contents of each cell, again in pixels.

It should be noted that styling can be controlled to a far greater extent using Cascading Style Sheets. Future versions of XHTML may deprecate many or all of these attributes.

Then the header and footer of the table is defined. The footer must always be defined before the body of the table. Neither the header nor the footer of the table are necessary, but by defining them you have greater flexibility if you want to format these areas as blocks within their own right.

In the footer, the colspan attribute is used to “merge” the cells together. The number in quotes tells the browser how many cells to merge. The align attribute right-justifies the text within that cell, although CSS is certainly a better tool for this task.

It is important to note that some browsers render tables with some of these attributes already applied. It is quite common to see a 2 pixel border rendered, as well as 2 pixels of cellspacing. Test on various browsers to see the results. It may be necessary to apply border="0", cellspacing="0", and cellpadding="0" to your tables to ensure they render correctly. Once again, CSS affords greater control than XHTML for these situations.

Nesting

It is perfectly possible to nest tables within each other. This is an often-used trick for controlling the layout of a page. The fact that it is possible does not mean it is a good idea, however. First of all, it will rapidly render your code almost unreadable, depending on how deep your nesting goes. Secondly, it should rarely be required for presenting tabulated data. Finally, tables are not supposed to be used for layout anyway!

Ooh! Pretty pictures

Images offer many advantages to the web developer. Here are just a few of them:

  • Liven up a page
  • Display corporate logos
  • Bespoke navigation buttons can be created
  • Help to illustrate meaning
  • Introduce unique style

Sounds good, eh? There are downsides, however:

  • Multiplies the load-time of your pages
  • Overuse looks tacky
  • Useless for the visually-impaired
  • Reduces the portability of a page
  • Reduces the fluidity of a page

You can insert images into your page using the img element. You must always include certain attributes with it. Here is an example, with an explanation of what is going on:

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict " title="This page validates to the XHTML 1.0 Strict specification" />

Valid XHTML 1.0 Strict

If you hover over the icon above, you will see that the contents of the title attribute will be displayed as a sort of “tooltip” on most browsers. Some browsers will erroneously display the contents of the alt attribute, but that attribute (which is required) is supposed to provide an alternative to the image if the browser cannot render it, or if it isn't accessible to the user. In fact, purely decorative images should be given an empty attribute (alt="") to avoid confusion. Here is an example of what happens when the image resource cannot be found by the browser:

Valid XHTML 1.0 Strict

As you can see, the alternative text has been rendered (sometimes with a visual cue to represent a missing image), and the contents of the title attribute is still rendered when the user hovers over the text. You can turn your image into a link with relative ease. Here is the same example again, but this time you can click the image to take you to the tutorial home page:

<a href="/simon/xhtml_tutorial/"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" title="Click this image to visit the tutorial home page" /></a>

Valid XHTML 1.0 Strict

Use of images in this way is very popular. By using an image editor, it is possible to create buttons that can be used in some form of site navigation. As usual, CSS provides better mechanisms for that sort of thing.

In the final lesson we will learn about forms.

Proceed to lesson 5.