Table Talk - Trials and Tabulations - HTML with Style

Trials and Tabulations

Table Talk

Table Captions and Summary Information

In our previous example, the paragraph before the table gave a short description of what the information on the contents of the table meant. This description is not semantically linked to the table, and this is bad, since as I have said from the beginning, HTML is all about document semantics.

The best place to put this information is in a caption to the table, which is generally useful anyway. HTML implements table captions via the appropriately named CAPTION element, which is placed inside a TABLE element. Here is our example, slightly refined:

<TABLE>
<CAPTION>No. of bugs per 1000 lines of code against sales</CAPTION>
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR>
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR>
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR>
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR>
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR>
</TABLE>

If you are reading this page with Navigator, you will notice a serious bug: The border of the above example will extend to the bottom of the page. I have chosen not to fix this problem (in case you're wondering: the example is a DIV. Navigator ignores the end-tag so considers the DIV to extend to the end of the page. Solution: add a second, superfluous DIV end-tag, possibly breaking proper implementations...) This is an example of how Navigator can make a mess of perfectly legal HTML and CSS if you start playing around with tables.

Back to captions, though: As you can see from the above example, a table caption is rendered at the top of a table. This can be controlled with the CSS caption-side property, presented below:

If caption-side is top, the default, the caption is placed above the table. If it is bottom, it is placed below the table. If it is left or right, it is placed on the left or right of the table.

Well, theoretically. In practice both Explorer and Navigator ignore this property. However, HTML 4.0 defines the deprecated (i.e. don't use it unless you have to, it's bad, it's the work of the devil or Netscape or both, it's not going to be there in future versions of HTML if we can help it) attribute ALIGN. This attribute accepts the same values as the caption-side property, and theoretically (that is, according to the HTML 4.0 Specification), the values should have the same effects as in the property. In practice, Navigator ignores the left and right values completely, while Explorer treats them as if they were equivalent to the CSS declarations text-align: left; and text-align: right; respectively, which means that aligns the text inside the caption to the left or right of the caption, instead of placing the caption on the left or right side of the table as it should.

Since this is the first deprecated rendering attribute we have introduced, I'd like to say a few extra words on the topic. Theoretically, the functionality of this attribute is the same as that of the caption-side property in CSS. In practice, however, it imposes restrictions that you may not have been used to as an author of CSS style sheets. Remember that you have to set this attribute, explicitly, on every CAPTION element in your document. You can't just say the following and be done with it:

CAPTION { caption-side: bottom; }

Nor can you single out a special class of table as having a different caption side and then say something like this:

CAPTION { caption-side: bottom; }
TABLE.special CAPTION { caption-side: top; }

No, you have to go to each element and add the attribute. And if you change your mind later and want to change the side of the caption on these tables, you'd have to go in and make the change for each element, possibly missing a few since you're only human. If the CSS property was supported, you'd just change the declaration or selector and you'd be done. This is one of the main reasons why CSS is so much more powerful than HTML style control mechanisms such as the ALIGN attribute. Not to mention that most HTML documents that use HTML style attributes extensively tend to be difficult to read (the source, that is) and edit, while "strict" HTML is usually much more elegant and easy to maintain.

Necessity forces us to use these attributes because there's no other way to get the desired effects, but it's important to know that better alternatives exist. This is mostly because informed and demanding Web authors (that's you, if you read these tutorials, at least I like to think so) are possibly the most powerful way of changing the status quo by demanding that browser authors implement these features.

Anyway, enough of my politics for this tutorial. Let's get back to tables.

Another way of providing information about a table is through the use of the SUMMARY attribute to TABLE. The value of the SUMMARY attribute is a description of the table and acts purely as meta-information. It is useful to include a SUMMARY attribute when the information in a table isn't clearly described by its other contents, for use by search engines, non-visual browsers and other types of user agents. As with all meta-information, ignoring this attribute is bad because it reduces the information value of your document, but over-doing it is also bad because you end up doing more work specifying meta-info than you do producing the actual information, which won't help anyone much. Here's our table with a SUMMARY attribute, and an ALIGN attribute on CAPTION:

<TABLE SUMMARY="A table showing the average number of bugs found in
every 1000 lines of code in M.O.R.O.N.S. versus the product sales, for
every year since 1995. The data indicates that the numbers are roughly
proportional, suggesting that there may be a link between the two.">
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR>
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR>
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR>
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR>
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR>
<CAPTION ALIGN="bottom">No. of bugs per 1000 lines of code against sales</CAPTION>
</TABLE>

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial11/2.html
Created: Feb 10, 1998
Revised: Feb 16, 1999