HTML 4.0: Tables

This tutorial was originally written when HTML 4.0 was in its infancy.  HTML 4.01 is today’s standard specification for HTML and this tutorial has been updated to reflect the features of HTML 4.01.  Editorial comments are shown contained in square braces — [ ]

Use these to jump around or read it all…

HTML 4.0 is becoming the standard. As of the writing of this tutorial, Microsoft Explorer version 5.0 is out with full HTML 4.0 support. Netscape Navigator 5.0 is not far behind, and soon the commands below will start to become mainstream.

{HTML 4.01 is now the standard for HTML.  All commonly used modern browsers fully support the HTML 4.01 specification.}

Here’s a quick look at how HTML 4.01 affects tables. You are already familiar with some of the tags and attributes. For example, BORDERCOLOR has been in use for a while as a proprietary Internet Explorer tag. It has just now been written into the HTML 4.01 code.

I have offered as many examples as possible. Many will simply not work because you don’t yet have the browser version that supports it. Don’t worry, neither did I when I wrote this tutorial. Hopefully you’ll be able to visit this tutorial in the future to test what your new browser will and will not do.

I am only going to hit the tags and attributes new through HTML 4.01 in this tutorial. If you’d like to get into the basics of table creation, start with my table tutorials.

Not to sound like a broken record, but remember that just because you have a browser that supports these commands, doesn’t mean your viewers do, too. Write simply and use what you need, not what’s available.

The Tags

Here are the tags and attributes we’ll hit in this tutorial:

In order to demonstrate each of these commands, we’ll work with this very simple table format:

The <TABLE> Tag

The TABLE tag begins the process of building a table. It already carries a long list of attributes, including BORDER CELLPADDING, CELLSPACING, WIDTH, and ALIGN. Here we’ll look at some of the new HTML 4.01 attributes.

BORDERCOLOR

This command was first supported by Netscape Navigator (NN) version 4 and Microsoft’s Internet Explorer (IE) version 3, but has just now been made standard by the World Wide Web Consortium (W3C) in HTML 4.01.

Here’s what it looks like. I added the BORDER=”3″ to have something to color:

…and here’s the effect:

DATAPAGESIZE/DATASRC

These two commands are not standard HTML 4.01 according to the W3C. They are proprietary attributes from the utility research kitchens at Microsoft. Although they really don’t belong in this tutorial, I thought I’d quickly tell you what they do.

Both of these commands deal with data binding in IE. Let’s say you are displaying data on your page from another database. Sometimes you’ll require three columns and another time you’ll require four columns.

• DATAPAGESIZE: This allows you to denote how many columns are required for the table.     <TABLE DATAPAGESIZE=”4″>
• DATASRC: Denotes a specific column of data from another database that should be displayed in the table on the Web page.     <TABLE DATAPAGESIZE=”3″ DATASRC=”#DB4SRC3>

FRAME

This is used along with the BORDER attribute. The FRAME command allows you to state which portions of the border will render (display). Here are the values available:

• above: displays top edge only
• below: displays bottom edge only
• border: displays all four sides (default)
• box: displays all four sides (like border)
• hsides: displays top and bottom edges
• lhs: displays left edge only
• rhs: displays right edge only
• void: displays no border
• vsides: displays left and right edges

     Here’s what it looks like:

     …and here’s the effect:

RULES

     This, like FRAME, also works with the BORDER attribute, except RULES deals with the inside border edges.

• all: displays all borders
• cols: displays borders between cells
• groups: displays borders between all cell groups
• none: hides all interior borders
• rows: displays borders between rows only

     Here’s what it looks like:

     …and here’s the effect:

SUMMARY

     This allows you to denote a summary of what type of data the table contains. It will act much like an image’s alt command for non-visual and text-based browsers.

     Here’s what it looks like:

     …and here’s the effect:

Event Handlers

     New in HTML 4.01 is the ability for a TABLE itself to be active in terms of the mouse and keyboard. The TABLE tag can now accept and render the Event Handlers onBlur, onClick, onDblClick, onDragStart, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, and onScroll.

     Here’s what it looks like:

     …and here’s the effect (click on it):

The <COLGROUP> Tag

     The COLGROUP command allows you to set parameters to entire columns of data in a table. It is best for setting up widths, colors, and Style Sheet effects.

ALIGN

     This is a well-known attribute that is now part of the COLGROUP tag. Plus it’s a good demonstration of what the command can do:

     Here’s what it looks like:

     …and here’s the effect:

CHAR/CHAROFF

     This works with the ALIGN attribute. The CHAR attribute allows you to set a specific text character as an alignment point. The CHAROFF attribute allows you to then offset the text character in percentages of the cell width.
     This will allow you to align a series of numbers at the decimal point.

<COLGROUP ALIGN=”char” CHAR=”.” CHAROFF=”50%”>

SPAN

     This attribute allows the COLGROUP attributes to span across adjacent columns. Since I have only two, I’ll have the SPAN go across one more column. That is a total of 2.

     Here’s what it looks like:

     …and here’s the effect:

WIDTH and VALIGN

     You are probably well aware of these two attributes. Width can be set in either pixels or percentages.
     VALIGN sets the cell text’s alignment in a vertical sense. You can set it to top, bottom, or middle.

     Here’s what it looks like:

     …and here’s the effect:

The <TBODY> Tag

     The TBODY tag acts similarly to the COLGROUP tag, but the TBODY is more useful in that it will allow you to surround some or all the cells you want. You do not need to deal with a full column. Think of this as a BODY command used inside of a table.

     The command will handle the ALIGN, CHAR, CHAROFF, and VALIGN attributes we’ve already covered. In addition, the TBODY tag will allow the BGCOLOR attribute. I’ll use that to show it off.

     Here’s what it looks like:

     …and here’s the effect:

The <TD> Tag

     The TD tag is the workhorse of the table. It denotes Table Data. Here, we’ll look at the HTML 4.01 attributes new to the tag.

ABBR

     This is a great new command. It acts as a rollover that pops up a tool tip box when the mouse rests upon the cell. It’s a great way to add data. In the example, rest your pointer on the top left table cell.

     Here’s what it looks like:

     …and here’s the effect:

AXIS

     This provides non-visual browsers a brief label to describe the cell’s data. It follows the same format as above:

<TD AXIS=”description of cell”>Cell Data</TD>

CHAR/CHAROFF

     This works that same way as described above. It looks like this:

<TD ALIGN=”char” CHAR=”.” CHAROFF=”45%”>

HEADERS

     This is another command that works mainly with non-visual browsers. You will set up a series of <TH> (Table Head) commands, then attach the header to each table data cell. For example:

<TABLE>
     <TR>
          <TH ID=”1″>Sizes
          <TH ID=”2″>Widths
</TR>
<TD HEADERS=”1″>55
<TD HEADERS=”2″>100

     When the mouse passes over, the non-visual browser will be able to offer the header information.

SCOPE

     The SCOPE attribute sets aside sections of a table to act as the TD that possessed the attributes. Let’s say you have a top left cell that has a pink background. You could then set the SCOPE to one of four values:

• col: sets the rest of the column
• colgroup: sets the rest of the COLGROUP
• row: sets the rest of the row
• rowgroup: sets the rest of the ROWGROUP

For example:

<TABLE>
     <TR>
          <TD BGCOLOR=”blue” SCOPE=”col”>55
          <TD>100

The <TH> and <TR> Tags

     I am grouping these two tags together because everything that is new to them has been covered above.

TH

     It stands for Table Header. It will accept the same six new commands as the <TD>command above. They are:

• ABBR
• AXIS
• CHAR
• CHAROFF
• HEADERS
• SCOPE

TR

     It stands for Table Row. The new attributes will be very helpful in creating future tables. And the good part is, you’re familiar with all of them. They’re just new to the TR tag in HTML 4.01 They are:

• ALIGN
• CHAR
• CHAROFF
• BGCOLOR
• VALIGN

The <THEAD> Command

     The THEAD tag is new to HTML 4.01. It has a couple of special implementation concerns. You can only have one thead in a table, and the main <THEAD> command must follow the main Table command. Get it? It’s a lot like a HEAD tag in an HTML document. Past that, you can group together as many cells as you’d like. It’s a great way to set an entire table’s attributes in one shot.

     Here’s what it looks like:

     …and here’s the effect:

     The THEAD tag will handle these attributes:

• ALIGN
• BGCOLOR
• CHAR
• CHAROFF
• VALIGN

The <TFOOT> Tag

     This command is also new to HTML 4.01. The TFOOT tag works like the THEAD command to set aside related cells, and, like the THEAD tag, is only allowed once in a table. TFOOT must follow the THEAD commands, and must precede the TBODY commands (if any are used). It basically acts as a footer for the Head portion of the Table.
     The Tag supports the following attributes:

• ALIGN
• BGCOLOR
• CHAR
• CHAROFF
• VALIGN

Event Handlers

     One of the overriding new attributes to all of these elements is the ability to evoke JavaScript Event Handlers. Each of the tags can have one of many different events embedded.
     The process is described in terms of the <TABLE> tag section. You can jump right to itto re-read. Each element in this tutorial can be altered in just the same way.

That’s That

     HTML 4.01 is now the standard across the Web. You’ve just read through the new commands for your tables. Use them to improve your tables today!

     Try these other HTML 4.01 pieces:

• HTML 4.01: Frames
• HTML 4.01: The SPAN Tag

Enjoy!