Webmaster by Chuck Musciano

Moving to a new standard: HTML gets a makeover

What's new in HTML 4.0?

April  1998
[Next story]
[Table of Contents]
Sun's Site

HTML 4.0 has defined a new, stable HTML standard with many new features. In this first installment of a three part series, HTML guru Chuck Musciano takes a close look at the new table tags in HTML 4.0. (2,000 words)

Mail this
article to
a friend
There is a long tradition in the world of HTML that determines how features are added to the language. First, browser makers come up with extensions to HTML. Then, Web authors begin making use of those extensions. With time, use of the extensions builds momentum and, in order to remain compliant, other browsers are extended to support the extensions. Finally, the World Wide Web Consortium (W3C) formalizes the extensions into an HTML standard. In general, the HTML standard emerges years after the extensions are first introduced. And by that time, of course, newer extensions are already being developed.

The recent release of the HTML 4.0 standard changes all of this. For the first time, the W3C has delivered a standard that not only captures all of the good elements of HTML currently in general use, but goes on to define several new features that have long been in-demand by HTML authors. Unlike previous standards, which were little more than stop-gap efforts that could never hope to keep up with the rapid pace of Web development, HTML 4.0 defines a version of HTML that should serve the authoring community for the next several years.

Although there are lots of minor changes to almost every tag in the language, the changes between HTML 3.2 and HTML 4.0 can be collected into three groups: table extensions, form enhancements, and everything else. Accordingly, we'll spend the next three months covering those three areas, beginning with this month's look at the HTML 4.0 table features.

Caption placement
Most HTML authors don't realize that you can add captions to your tables using the <caption> tag. The tag must appear within a <table> tag, and its contents are rendered either above or below your table, with various text alignment features available.

Unfortunately, Netscape and Internet Explorer disagree as to how that caption should be aligned. Netscape honors the align attribute in the <caption> tag, accepting values of top and bottom to place the caption either above or below the table. In both cases, the caption contents are centered with respect to the table.

Internet Explorer goes further than Netscape. It honors values of top and bottom, with similar results, but goes on to accept values of left and right. Unfortunately, using left and right places the caption at the top of the table, with the contents either left- or right-aligned with respect to the table. Because using left and right values makes it impossible to also specify a different position for the caption, Internet Explorer accepts another attribute, valign. This attribute controls the vertical position of the caption when align is being used to control the alignment of the caption contents. The valign attribute accepts values of top and bottom, with the expected results. One can only speculate as to how late it was when the Internet Explorer development team came up with this solution!

HTML 4.0 brings some sense to this madness. It defines the align attribute for the <caption> attribute, and defines values of top, bottom, left, and right. In all four cases, the caption is placed on the appropriate side of the table. If you want to change the alignment of the contents of the caption, you can use various text-alignment tags or style properties to get the desired effect.


Table directionality
By default, the cells in a table row are assembled from left to right as they are processed by the browser. In HTML 4.0, it is possible to reverse this behavior by using the dir attribute with the <table> tag.

If the value of the dir attribute is rtl, the table will be built by assembling the cells from right to left. This provides support for languages that read right to left instead of left to right, and could also make it easier to create some tables automatically.

Row grouping
Often, rows within a table fall into one or more natural groups. The most obvious groupings are the rows that comprise the table header, the table footer, and the actual body of the table. In traditional print media, it is customary to repeat the header and footer rows whenever you break the table across multiple pages. On the Web, where pages are of infinite length, such issues are not a concern.

HTML 4.0 recognizes that row grouping is important and provides a way to delineate your table's header, footer, and one or more body sections. These sections are delimited by the <thead>, <tfoot>, and <tbody> tags.

These tags are placed inside a <table> tag and contain <tr> tags that define the rows in that particular table section. By default, if none of these tags are used, the table has an empty header and footer, and all the table rows comprise a single body section.

The skeleton of a table that uses these tags might look something like this:

        ...header rows go here
        ...rows in the first body section go here
        ...rows in the second body section go here
        ...footer rows go here

Each table can have only one header and footer section, but any number of <tbody> tags are allowed. They each define a separate section within the body of the table. Once the browser knows that these sections exist, it can make better decisions about rendering the table, whether on-screen, to hard copy, or to a non-visual medium.

All of the row-grouping tags accept the align and valign attributes, which allow you to control the horizontal and vertical alignment of the cell contents within each section of the table. This is nice when one set of table rows has one alignment; you can set the alignment for all of the rows by grouping them and setting the alignment on the group.

Finally, if you define table groups, you can use the rules=groups attribute with the <table> tag to draw special rules around your row groups. The exact nature of the rules are browser-dependent. If your table rows naturally fall into several groups, this is a nice way to collect those groups and delimit them for the benefit of your readers.

Column grouping
It only makes sense that if you can group rows, you should be able to group columns within your table. This sounds a lot easier to do than it really is, due to the way tables are constructed.

HTML tables are specified in a row-wise manner: Each table is described as a series of rows, each of which, in turn, contains a series of cells. To collect a series of rows together, you just place them within the appropriate tag, as we just described.

Column grouping is much harder. Each cell within the column is defined in a separate row, and there is no way to collect the cells in a column and wrap a container tag around them. For this reason, column grouping is accomplished in HTML 4.0 with a set of tags that build the table's column groups before any rows and cells are defined.

Within the <table> tag, before you specify any row or row group tags, you can place one or more <colgroup> tags. Each tag, as you might expect, defines a group of columns in your table. Later, the browser will collect the cells of each row into the appropriate column group as it builds the table.

The <colgroup> tag, by default, represents one column in your table. You can use the align and valign tags to specify how the cells in that column should be aligned. If you have multiple columns in your table, you could provide a <colgroup> tag for each one. However, if adjacent columns need the same alignment, you can add the span attribute to the <colgroup> tag. This causes it to be applied to multiple adjacent columns, saving you a lot of typing.

An example should clarify things a bit. Suppose you have an eight column table. The first column contains row headers and should be left-aligned, while the next five columns should be centered. The final two columns should be right-aligned. The table would look something like this:

        <colgroup align=left>
        <colgroup align=center span=5>
        <colgroup align=right span=2>
        ...table rows and row groups go here

Like row groups, columns groups are set off in a particular way when rules=groups is used in the <table> tag. In our sample table, a special rule would be drawn between the first and second columns, and between the sixth and seventh columns.

What if you want to group several columns into a group to take advantage of those nifty rules, but the columns in the group have different alignment needs? No problem. Use the <col> tag. This tag lets you control the format of individual columns within the column group. It can only appear within a <colgroup> tag; you can't just plop it down in the middle of a <table> tag.

Like the <colgroup> tag, the <col> tag accepts the align and valign attributes to control cell alignment, and uses the span attribute to affect more than one column at a time. To see how this works, consider our previous example. Suppose we want to change the alignment of the fifth column in the second group, but we want to keep the table divided into three separate column groups. We can get that effect like this:

        <colgroup align=left>
        <colgroup align=center>
           <col span=4>
           <col align=left>
        <colgroup align=right span=2>
        ...table rows and row groups go here

In this example, all of the columns in the second group are initially given a center alignment. The first <col> tag spans the first four columns of the group, leaving them unchanged. The second <col> tag makes the desired alignment change to the last column in the group.

This example brings two important points to light. First, the number of columns in a group is controlled either by the value of the span attribute in the <colgroup> tag, or by the number and spans of the <col> tags in the group, but not both. That's why I removed the span attribute from the <colgroup> tag in the second example.

Secondly, the <colgroup> tag is a conventional tag with a closing element. Normally, you don't need to specify the </colgroup> element, but it makes sense to use it when the tag is used as a container for <col> tags.

Further in 4.0
Unlike a number of new features in HTML 4.0, the table-grouping extensions are available in some browsers right now. In particular, Internet Explorer 4 supports the row and column grouping features, and I encourage you to experiment with these nifty new tags. That should keep you busy until next month, when we look at the new features in HTML 4.0 forms.


About the author
Chuck Musciano has been running various Web sites, including the HTML Guru Home Page, since early 1994, serving up HTML tips and tricks to hundreds of thousands of visitors each month. He's been a beta tester and contributor to the NCSA httpd project and speaks regularly on the Internet, World Wide Web, and related topics. Chuck is currently CIO at the American Kennel Club. Reach Chuck at chuck.musciano@sunworld.com.

What did you think of this article?
-Very worth reading
-Worth reading
-Not worth reading
-Too long
-Just right
-Too short
-Too technical
-Just right
-Not technical enough

[Table of Contents]
Sun's Site
[Next story]
Sun's Site

[(c) Copyright  Web Publishing Inc., and IDG Communication company]

If you have technical problems with this magazine, contact webmaster@sunworld.com

URL: http://www.sunworld.com/swol-04-1998/swol-04-webmaster.html
Last modified: