Practical Web Design - Introduction to Tables, Part 2

Some sobering facts:

two-thirds of the world’s installed PCs are three years old or older
Windows 98 is the operating system most used in the world’s PCs

This means that a huge number of people view our Web pages with “out of date” browsers such as Internet Explorer 4.x or 5.x, or earlier versions of Netscape Navigator. And you know as well as I that most users don’t bother to update their systems or their browsers, either at work or home. They stick with what came out of the box. It would be optimal if everyone were using up-to-date browsers that were fully CSS- and CSS2-compliant, but they’re not. In fact, most of the surfing world doesn’t use up-to-date browsers; hence most users can’t view your beautifully-constructed, tableless, CSS-based pages correctly.

So, unless you’re coding Web pages for an audience that’s composed completely of cutting-edge users (i.e. the typical SitePoint or Slashdot user), you’re going to have to deal with tables. It’s just a fact of life. And if you’re a burgeoning Web designer, you need to learn about tables, even if they’re rapidly becoming obsolete. Think of it as learning how to drive a manual transmission vehicle … sure, you’ll probably spend most of your time driving cars with automatic transmissions, but it’s worth knowing how to drive a stick. You’ll understand the operation of the automobile better. And there will be times where driving a stick isn’t just an option, it’s a necessity.

In the first part of this primer, HTML Tables: A Primer, Part I, we discussed the basics of table construction, along with a few more (relatively) advanced options. This part will provide an overview of the options provided for tables in HTML 4, along with a few other items. As with the first column, this article won’t cover anything new or different for veteran Web designers. This is strictly for the less expert among us.

The best way to learn to use these tags is to play with them. Cut and paste the code examples below and put them into your HTML editor. Build an example table and insert these commands one at a time to see what happens. Use them in groups to see how well they interact with each others. Have fun with them!

HTML 4 and 4.01

First released as a W3C recommendation in December 1997, HTML 4.0 gave us a tremendous number of “new” options for table construction. “New” is a relative term: many of these options were introduced by either Netscape or Microsoft and originally worked only in those browsers (some options are still browser-specific). In December 1999, HTML 4.01 became the W3C standard, and still is today as we slowly evolve towards XML/XHTML. Following are some options for tables that became standard in HTML 4. Again, note that not all browsers support strict HTML 4, and therefore not all of these commands will work in all browsers.

If you intend to use a lot of 4.01 tags, you’ll need to work within the confines of “strict” HTML. That means using the following DOCTYPE:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN 

"https://www.w3.org/TR/html4/strict.dtd">

If you decide to do this, be prepared for a lot of incompatibilities with older, deprecated HTML commands. Strict means just that — strict. The older tags will not work in strict HTML format. It’s a tradeoff: do you want to lose the use of the older, deprecated tags (and risk losing those members of your audience who use older browsers that won’t display strict HTML properly) and gain the use of the new 4.01 tags (not to mention full usage of CSS)? It’s something to consider, and something to spend some time working with. IE 5x and IE 6 are supposedly able to handle the constraints of strict HTML, as are Netscape Navigator 6, Opera 7.02, and Mozilla 1.2. Don’t bet on earlier browsers being able to handle strict HTML, and don’t bet that even these browsers will fully handle strict HTML 4.01.

Also, be aware that there have been a lot of issues with some versions of Mozilla handling strict HTML properly, along with Mozilla-based browsers such as Netscape 6, Netscape 7, Camino, Galeon, the recently-released Phoenix/Firebird, and Beonex. Some browsers such as Mozilla, Mac’s Safari, Opera 7, and IE 6 have two main layout modes, “Quirks” and “Standards.” Mozilla and Safari also have the “Almost Standards” mode, which affects table layout. All these are factors to be investigated and worked with before you make any long-term decisions on what DOCTYPE you’ll use.

General rule of thumb: the “transitional” DOCTYPE may work better in an overall sense for coding today, but the HTML world is rapidly moving towards strict standards and away from supporting “transitional” HTML documents. It’s a good idea to get used to working in a strict compliance atmosphere. For a general review of the different kinds of DOCTYPES, see my earlier article, Fundamentals of Web Design.

Go to this page to test your browser’s capabilities.

“It’s a feedback loop, to a certain extent. If we want people to code HTML 4 â€“ compliant pages, the full HTML 4 spec has to be supported, and openly so.” — Joe Clark

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">

SUMMARY

Some people still use text browsers such as Lynx, and a few folks are still using browsers that are too old to support tables at all. These guys won’t be able to see your table, though they might be able to see the content. You can use the SUMMARY tag to give a text description of your table. Think of it as the table’s equivalent to the ALT tag for graphics:

<TABLE BORDER="1" SUMMARY="This table is full of    

information about the different games we can play with    

HTML tables.">

CAPTION

This tag works nicely with the SUMMARY tag to give readers an idea of what’s in a table; the caption can be thought of as the table’s title. Only one caption per table, please. Try it like this:

<TABLE BORDER="1" SUMMARY="This table is full of    

information about the different games we can play with    

HTML tables.">   

<CAPTION="Games Tables Play">

Event Handlers

These are fun. If you don’t know the term, “event handlers” literally handle an event. An event is an action that you, or more accurately, your code makes happen. A handler decides what keyboard or mouse command will activate the action.

In this case, you can to your table add a pop-up window that’s activated by any of the following commands: onBlur, onClick, onDblClick, onDragStart, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, or onScroll.

Rather than telling you what each one does, I suggest you try each of these commands for yourself and see which one suits you best; or you can dive into the W3C definitions for each command.

Here’s the sample code (cut and paste this into your HTML editor, display it in your browser, and click on the table to see what happens):

<TABLE BORDER="1" onClick="alert('This is what happens    

when you try this command out!')">

Try modifying the code to suit you, but don’t forget to keep all the quotes (single and double) and parentheses in their places.

COLGROUP

This tag lets you set parameters for entire columns of data in a table. It works best when you’re setting width, height, and style sheet effects. Like so many of these tags, it has its own set of attributes. Before this tag, you had to set attributes for each <TD> all the way down a column. Again, not all older browsers support this tag. It has 24 (!) attributes, many referring to associated JavaScripts, but for now we’ll restrict ourselves to the five below:

ALIGN: content is aligned left, right, center
CHAR/CHAROFF: as above; 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 in percentages of the cell width (this one will take some experimentation to become useful for you)
SPAN: allows the COLGROUP tag to “span” more than one column
WIDTH: sets the width of the column, either in pixels or percentages
VALIGN: sets the cell’s contents vertically, either top, center, or bottom

Here’s one example:

In a 5-column table, to give each column a width of 35 pixels, write:

<COLGROUP SPAN="5" WIDTH="35">   

</COLGROUP>

A COLGROUP command without a SPAN attribute uses the default SPAN of 1. Another nice function of the COLGROUP command is that it tells the browser how many columns are in your table. If you’ve given your table an overall width, the browser can display the table incrementally. Thus, each column will display as soon as it loads, rather than delaying display until the entire table has downloaded.

COL

This aligns the content in one or more table columns. Like so many others, this originated as a Microsoft extension, and was later added to HTML 4. Unlike the COLGROUP command, it does not group columns together structurally, but it can group together attributes for multiple columns. These attributes can work with, or independently of, COLGROUP commands. It has 22 separate attributes, but the ones that are most often used are ALIGN, CHAR, CHAROFF, SPAN, VALIGN, and WIDTH.

THEAD, TBODY, TFOOT (ROW GROUPS)

These attributes, originally Microsoft-only extensions that have been incorporated into HTML 4, don’t get used a lot for the same reasons we can’t depend on style sheets â€“ imperfect browser support. It’s too bad, because they’re quite useful. Using these commands, you can define a “head,” a “body,” and a “footer” for your tables. If you’re caught up in linear thinking, you might want to organize these commands in order of their assumed appearance: head, body, and footer. Don’t. The <THEAD> is followed by the <TFOOT>/#ec# command, which is then followed by the <TBODY> command.

THEAD is an interesting command. Think of it in the same way you think of your <HEAD> section in your HTML pages — as a way to set behaviors throughout your table. You can only use one THEAD command in a table. It accepts the following attributes: ALIGN, BGCOLOR, CHAR, CHAROFF, VALIGN. Here’s a simple example, using the THEAD command to set the color in a table:

<TABLE BORDER="1">   

<THEAD>   

<THEAD BGCOLOR="#ff0000">   

<TR>   

<TD>Bleah!</TD>   

<TD>Bleah!</TD>   

</TR>   

<TR>   

<TD>Bleah!</TD>   

<TD>Bleah!</TD>   

</TR>   

</THEAD>   

<TABLE>

Now we have a table that’s very, very red. But wasn’t it easy to set the color? Sure beats doing it row by row, or cell by cell.

The TFOOT command, like its sibling THEAD, can only be used once per table. It basically acts as a “footer” for the head portion of the table. Like THEAD, it supports the following attributes: ALIGN, BGCOLOR, CHAR, CHAROFF, VALIGN.

TBODY acts almost as a BODY command inside a table. You can use the same attributes as the others: ALIGN, BGCOLOR, CHAR, CHAROFF, VALIGN.

Non-HTML 4 Tags

There are still quite a few non-standard table tags out there that are worth a mention. Use these with caution, as they’re not supported by all browsers.

DATAPAGESIZE/DATASRC

These are Internet Explorer-only commands that work to display information from a database. The DATAPAGESIZE attribute lets you denote how many columns you need for the table, while the DATASRC attribute denotes a specific column of data from another database that should be displayed in the table. It works in the <TABLE> command. These attributes might look something like this:

<TABLE DATAPAGESIZE="5" DATASRC="DB7SR2">

depending on the source of your data.

Other non-HTML 4 tags are floating around out there, but they’re even less used than the above commands, so we’ll just let them lie for now.

Miscellaneous Tips

Empty Cells

There will be times when you want to leave a cell deliberately empty. If you need to do so, and this fouls up your table structure, use either a nonbreaking space ( ) or a transparent .GIF to give the cell some “invisible” content. Using the transparent .GIF gives you more control over the size of the display. Netscape 4 is the biggest offender for this particular problem, as it refuses to display an empty column.

Removing Unwanted Line Breaks

Some browsers show unwanted line breaks inside a cell. You look at your HTML, but there isn’t a <BR> tag anywhere to be found. How come there’s a line break? Well, some browsers will read a carriage return in your code as a line break, most often between the end of the content and the </TD> tag. Instead of this:

<TD>    

Bleah!    

</TD>

try writing:

<TD>Bleah!</TD>

ALIGN Issues

The ALIGN attribute, discussed in the previous column, has been deprecated by HTML 4, and some of its behaviors don’t always work right. Since browsers often display tables that use the ALIGN attribute as “floating” tables, they may choose to display your content as flowing around your table. Use the <BR="clear"> command after the end of your table to force your content to behave itself.

When you’re using the ALIGN attribute to position your content, remember that some older browsers don’t support the “center” command. In this case, use the <DIV ALIGN="center"> command to center your content.

Why should you not use background images in tables? Some versions of both IE and Netscape have problems displaying background images inside table cells, so some designers avoid background images in their tables. If it works for you, however, by all means do so.

The ALIGN=”right” attribute for a table can allow you to place “hanging” tables on the right side of the page. This isn’t done that frequently, because it’s a bit more difficult than the usual left-side table, but it can be visually appealing. Here’s a simple example, contained within a larger page. Cut and paste this into an HTML page to see how it works:

<P>More content, drivel, and useless page filler to give us something to work with.  Let's just keep going for a bit longer.  There, that should do it.</P>

<H4>Looky, there's a table on the right side coming up!</H4>

<TABLE BORDER="1" WIDTH="150" ALIGN="right" BGCOLOR="#ff0000" CELLPADDING="5">    

<TR>    

<TD>    

<H4>And here's the table content!</H4>    

Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!    

</TD>    

</TR>    

</TABLE>

<P>The regular content continues along the left side of the page, nicely formatted to include the table on the right side.  Looks nice, doesn't it?  A fellow could get sick of that ubiquitous red color he keeps using for an example.  Maybe he should consider using a different color sometime?</P>

Some browsers choke on the ALIGN=”right” code, so don’t be surprised if everyone doesn’t see the same results.

XHTML Users

Note: I have not attempted to address the concerns of XHTML users in this article, basically because anyone conversant with XHTML probably doesn’t need this article to write his or her code. I’ll just note that many of the examples given in this column are not XHTML-compliant, and let it go at that.

Final Thoughts

Tables are not particularly difficult to work with, but they are tricky. The “learning curve” for tables is steeper than the more basic HTML codes, which is basically just adding tags to text. Learning to handle tables is the first step towards being a truly proficient Web designer, as you’re now learning to actually design Web pages instead of just gussying up text blocks.

My advice is to move slowly through the coding jungle of table design. Get familiar with basic table design using the <TABLE>, <TR>, and <TD> tags first. Learn what you can and can’t do with different usages and configurations of these three tags. Then start adding new tags to your knowledge base, one at a time.

Get comfortable with one command, or set of commands, before moving on to another set of commands. Play with the different attributes. Experiment. Make mistakes, and learn from them. And have fun. That’s really what it’s all about, isn’t it?