HTML: Tables
The simplest table consists of 3 tags; TABLE (the container as a whole), TR (rows to contain data), and TD (where the data is actually held in the table, also called a cell).
|
<table> <tr> <td> ... Contents of this cell ... </td> </tr> </table> |
This example produces a table similar to the one containing the example, a single cell table. An optional piece of a basic table is the CAPTION tag which is placed right after the <table> tag. The caption is the title of the displayed table.
| <caption>Name or Label for this table</caption> |
The Basics of a TABLE
For a good run through the basics of a TABLE let us refer you to a site that already does this pretty well. 'Table Tutor' at <http://www.pagetutor.com/> presents a good overview of the basics of table usage. We encourage you to look through this tutorial to learn the basics of the TABLE.
These are some additional things you should note regarding the basic use of tables:
| <table align="right"> |
Not all browsers properly handle this attribute and the adjoining content that was 'supposed to wrap around' the table will flow over or under this table.
Wherever possible you should specify the width of your table and the width of each cell. This helps to render (display) your contents quicker, making your page load faster.
Do Not rely on specifying the height of a table cell. This is not part of the HTML specifications are are only supported by some versions of Netscape Navigator and Internet Explorer. A good source of what code is supported by certain browsers is IndexDOT <http://www.blooberry.com/indexdot/>.
Consider specifying the border, cellspacing, and cellpadding in every table. If you do not specify all three some browsers will assume a value, other than zero, for the one that was missed (some will even change the ones you defined if any one is not defined).
A Refined TABLE
One of the things a TABLE does not do well is communicate its contents clearly to the visually impaired. To help your table communicate the information you intended it is necessary to do some extra work. With the specifications for HTML 4.0 came some extra tags and attributes to help define and describe the contents of a table.
|
<table summary="Brief summary of the contents of this table.">
<thead><tr>
<tfoot><tr>
<tbody><tr> </table> |
Definitions
SUMMARY
The SUMMARY of the table identifies the contents of the table up front. This message is likely to be more descriptive than the CAPTION of the table. The summary provides an overview of the information presented in the table.
A sighted visitor can easily glance over the table before reading the contents, thereby getting a general sense of the contents before reading the actual information. This summary gives your visually impaired visitors the same opportunity to absorb the information the first time through by setting a frame of mind.
THEAD
Table Header (THEAD) is a section of identifying headers or labels to be used later in the table. In large tables the THEAD is often repeated to carry this important frame of reference into multiple sections of the table. Modern browsers will automatically reprint this table header information at the top of the page when the table flows onto multiple printed pages.
TFOOT
TFOOT, table footer, is the footnotes associated with the table or this body section of the table. I know, you are asking: Why is the footer before the content? It's simple if you think about it. Placing the footer reference before its use allows for the information to be already known before reference is made. This can actually help in the understanding of your content.
For those visitors using screen readers, this footer gets read to them before any references for the footnotes are made. For those of us who can easily look at the bottom of the table when a reference is made, the HTML 4+ compliant browsers render the footer at the bottom. This helps both audiences get the material in a fashion that they are accustomed.
TBODY
Finally the table body (TBODY) contains the main message that is to be presented to the visitor.
An Accessible TABLE
In HTML 4.01 additional accessibility information was added for defining a table. The following two tables are copied from Oregon State University's 2000-2001 General Catalog page on Housing and Residence Hall Programs, with the numbers removed for the example. Be sure to view the tables with Netscape and Explorer to see the differences in how the browsers render the information. Netscape 6 and Explorer 5 both render the information in the same order but the presentation is a bit different. Older browsers will also render the footer before the body as they do not support the HTML 4.01 tags.
| ||||||||||||||||||||||||
|
<table border="0" cellspacing="0" cellpadding="4" summary="Annual housing cost for living in the Residence Halls and Cooperative Houses at Oregon State University.">
<thead><tr>
<tfoot><tr>
<tbody><tr>
<tbody><tr> </table> |
As you can see from the example code, the information you need to supply can get a bit complex. There are some new items in these tables you should notice, and these are listed below.
Advanced Definitions
SCOPE
The attribute SCOPE is used to identify the 'scope' of the relationship of the content. scope="col" defines the entire column is to be used throughout the table, scope="row" defines the entire row is associated, scope="colgroup" defines just the column of that body group is to be associated with this label.
STYLE
STYLE is a Style Sheet code for modifying presentation. Style Sheet support is growing and the things that can be done with them is giving designers greater freedom in presentation. Proper Style Sheet use also allows for the separation of content and presentation, keeping the message clear. If you are coding your pages to pass the HTML 4.0 or HTML 4.01 standards you should be using a Style Sheet for background colors and images, not bgcolor or background. However, this topic is much broader than can be covered in this section.
ABBR and ACRONYM
| <acronym title="West International House">West Int'l Hall</acronym> |
The ABBR abbreviation, found in the table cell tag, is to be used later when the table is read to the visitor by a screen reader, abbr="West Hall".
Ordinarily the example where ACRONYM is used would constitute the use of the ABBR tag found in HTML, as this is more an expansion of an abbreviation rather than that of an acronym. However, because of industry practices and changes in the coding standards, the ABBR tag is being depricated (phased from use) in favor of the single ACRONYM tag. The ABBR attribute, when it is used to abbreviate a table cell description, is not being depricated and should still be used for making tables more accessible.
NAME and ID
| <label for="a1"><input id="a1" name="a1" value="West Hall"><a name="west3">West Hall</a></label> |
The previous example uses numbers for the NAME and ID, but never alone and never as the first character. HTML specifications require that a 'named' value be given to any NAME and ID attribute. If you begin that 'named' value with a numeral, anything from zero (0) to nine (9), then the code will not work with many browsers.
Additional elements are applicable to tables for accessibility, however you should read the official HTML 4.0 specifications on accessibility and the use of tables for the full details.
Now for a taste of things to come!
You can change the way your table itself is drawn on the screen. In the HTML 4.0 specifications there are additional attributes of the table that you can control. FRAME is the lines drawn around your table, the values you can use are; above, below, border, box, hsides, lhs, rhs, void, and vsides. RULES are the lines that are drawn between the cells, the values you can use are; all, cols, groups, none, and rows.
|
frame="below"
rules="rows"
|
frame="void"
rules="cols"
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
frame="hsides"
rules="none"
|
frame="box"
rules="groups"
|
What did you say? The table seems to look funny with your browser? The tables don't look any different than a normal table? Then your browser does not yet support this HTML 4.0 specification.
Take a look at an image of these tables and see what they should look like. To find out more on what you can do with tables have a look at the Table specifications page at IndexDOT.
