8: Tables
There's an awful lot more to tables than just the rows and columns described in the beginner's section. For readers of your table, you can (should) put a caption on your table to tell them at a glance what the table is all about. This takes the form of a CAPTION tag that is placed just inside the TABLE tag, but before any of your table's rows. The text of the caption is placed between the start and end CAPTION tags.
Now, sometimes the caption just isn't enough, and you should always remember that not everyone has a visual browser. The 'summary' element of the TABLE tag lets you put a longer description of what's in the table, without it actually displaying on browsers that don't need it (like visual browsers). A text-to-speech browser will find the summary incredibly useful, because then the user can find out what the table is about overall before listening to the browser list each cell.
Now, if you want the first row of a table to contain header information, or information about what is contained in the rows below, you can use the TH tag (table header). Even if a browser doesn't support stylesheets, it might display TH cells differently than TD cells - bold, for example. A text-to-speech browser might speak the TH cells with a different inflection, to indicate that it is a header and not data.
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| row1 data | row1 more data | row1 even more |
| row2 data | some more | more for row2 |
If you have a complex or large table, and you want it to remain clear which header refers to which data cell, you can use the scope element in a TH or TD cell. For example, if you wanted the header information to apply to the whole column (very common) you would use <TH scope="col"> to indicate that. If you had a row that was for subtotals, you could define the first cell in that row as follows: <TD scope="row">subtotals:</TD> and then the browser would know that the contents of that cell are a header for everything else in the row.
Now this probably doesn't seem terribly useful on a visual browser, since you can see quite plainly that it's a header. But in a text-to-speech browser, it's a little harder to understand things that are visually obvious. Then this really comes in handy - because the browser will indicate that each cell is a subtotal - possibly by saying 'subtotal' before the value. Now if you used a header for that column, with a scope of the whole column, it might say something like 'March subtotal' and then the value. Now it's immediately obvious what the value is for to more than one type of browser.
If you don't want a header to apply to a whole row or column, you can name the header with the 'id' element in the TH or TD tag for the header, and then refer to it with the 'header' element in the TD tag for the data. This can be useful if you have a heading that applies to several rows but is only written once.
You can play with the borders of your table even more than just the border=x element I mentioned in the beginner's section. You can, in fact, specify not only the width of the border but whether it goes on the top, bottom, left, right, or any combination. You can also specify whether or not there are dividing lines within the table, and whether to put them vertically, horizontally, or both.
This is done by placing information in your TABLE tag as follows: <TABLE frame="value" rules="value" border=value>
All three are optional. If border is used alone, a value of 0 implies no frames and no rules, and a value other than 0 implies frame="border" and rules="all". You've already seen what this looks like if you've used the border element at all before.
The value of border is a number, indicating the width of the outer border in pixels. The value of frame is one of the following:
- void: no sides (default)
- above: border on the top side only
- below: border on the bottom side only
- lhs: border on the left-hand side only
- rhs: border on the right-hand side only
- hsides: border on top and bottom only
- vsides: border on left and right only
- box: border on all four sides
- border: same as box
The value of rules is one of the following:
- none: no rules between cells
- rows: rules between rows only
- cols: rules between columns only
- all: rules between all rows and columns
- groups: rules between row and column groups only (row and column groups are covered in the advanced section)
