Practical Web Design - Introduction to Tables, Part 2

TABLE DATA

Whaddya mean? The table data, or <TD> tag, has been around since the beginning of tables! True, true, but HTML 4 adds some new and exciting attributes ... well, okay, not so new, and “interesting” might be a more appropriate term than is “exciting.” However, you've got some new tools in your toolbox for the old warhorse TD tag. Let's look at a few:

• ABBR: provides a rollover "tool tip" when you rest your mouse pointer over the particular cell
• AXIS: gives non-visual browsers a label to describe the data within the cell
• CHAR/CHAROFF: working with the ALIGN attribute, this one lets you set a specific text character as an alignment point, usually a decimal; from there, you can offset the text character in percentages of the cell width (this one will take some experimentation to become useful for you)
• HEADERS: most useful with non-visual browsers, this attribute works with the table header <TH> command to give a header to each cell, like so: <TABLE>   <TR>   <TH ID="1">SIZES   <TH ID="2">WIDTHS   </TR>   <TD HEADERS="1">99   <TD HEADERS="2">100
• When the mouse passes over, the non-visual browser will give the header information. See below for more <TH> info.
• SCOPE: sets aside sections of the table to act as the TD that possesses the attributes. SCOPE has four values of its own that affect its function:
  • COL sets the rest of the column
  • COLGROUP sets the rest of the column group
  • ROW sets the rest of the row
  • ROWGROUP sets the rest of the rowgroup

Warning: Non-visual browsers such as Lynx have spotty table support at best. Don't be surprised if your Lynx users miss out on some of your table content.

TABLE ROW

Like the <TD> tag above, the <TR> tag has some new attributes. Most of them are identical to the ones associated with <TD>. They are: ALIGN, CHAR, CHAROFF, BGCOLOR, and VALIGN. The first three are explained above. BGCOLOR is a familiar attribute that simply sets the background color for the row. VALIGN sets the vertical alignment of the contents of the row: top, center, or bottom. Of course, there are other attributes, but I'll let you find those out on your own.

TABLE HEADER

A table header, activated by the <TH> command, it accepts the same six attributes as explained under the <TD> section above:

• ABBR,
• AXIS,
• CHAR,
• CHAROFF,
• HEADERS, and
• SCOPE,

as well as some others we won't get into now.

BORDERCOLOR

Already discussed in part 1 of this article, BORDERCOLOR is an attribute given to us by the fine folks at Microsoft that was originally usable only in Internet Explorer. It now works in IE 3 and above, and Navigator 4 and above. It's quite simple:

<TABLE BORDER="1" BORDERCOLOR="#ff0000">

This gives us a nice red border. Unfortunately, border colors aren't always reliable in the way they display in different browsers. This example, cribbed from WDVL, shows an example of code that gives a brown border in Internet Explorer and a light green border in Netscape:

<TABLE BORDER="20" WIDTH="200" BGCOLOR="#ccff66" BORDERCOLOR="#33cc66" BORDERCOLORLIGHT="#996666" BORDERCOLORDARK="#663300">

Two commands in this example, BORDERCOLORLIGHT and BORDERCOLORDARK, work with the BGCOLOR tag: BORDERCOLORLIGHT is the color of the row border highlight, and BORDERCOLORDARK is the color of the row border shadow. If this doesn't make sense, try it and see which part of the border is which.

Want borders that appear the same in all browsers? A good approach is to use nested tables (tables inside tables), with the exterior table slightly larger than the interior table, and with its own background color.

FRAME

This isn't the much-maligned FRAME command that divides page displays into separate sections. Rather, it works to display only the portion of the border that you want seen. It works in the <TABLE> command, and has the following values:

• ABOVE: displays the top edge only
• BELOW: displays the bottom edge only
• BORDER: the default, this displays all four edges (and as such, need not be used)
• BOX: a variant of the BORDER attribute, this too displays all four edges
• HSIDES: displays only the top and bottom edges
• LHS: displays only the left side edge
• RHS: displays only the right side edge
• VOID: displays no edges at all
• VSIDES: displays the left and right edges

Try it. Here's an example of the code:

<TABLE BORDER="1" FRAME="below">

It's not widely used because not all browsers support it.

RULES

Again, not a widely supported table attribute. This one works like the FRAME attribute cited above, but works on the inside borders (try it -- you'll see what I mean). It has the following values:

• ALL: displays all borders
• COLS: displays borders between cells
• GROUPS: displays borders between all cell groups
• NONE: displays no borders
• ROWS: displays borders between rows

The code might look something like this:

<TABLE BORDER="1" RULES="all">