Moving to a new standard: HTML gets a makeover
What's new in HTML 4.0?
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)
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.
Most HTML authors don't realize that you can add captions to your tables using the
<caption> tag. The tag must appear
<table> tag, and its contents are rendered
either above or below your table, with various text alignment features
Unfortunately, Netscape and Internet Explorer disagree as to how that
caption should be aligned. Netscape honors the
attribute in the
<caption> tag, accepting values of
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
bottom, with similar results, but
goes on to accept values of
the caption at the top of the table, with the contents either
left- or right-aligned with respect to the table. Because using
right values makes it impossible to also
specify a different position for the caption, Internet Explorer accepts
valign. This attribute controls the
vertical position of the caption when
align is being used
to control the alignment of the caption contents. The
attribute accepts values of
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
attribute, and defines values of
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
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
If the value of the
dir attribute is
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.
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
These tags are placed inside a
<table> tag and
<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:
<table> <thead> ...header rows go here <tbody> ...rows in the first body section go here <tbody> ...rows in the second body section go here <tfoot> ...footer rows go here </table>
Each table can have only one header and footer section, but any number
<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
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
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.
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.
<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.
<colgroup> tag, by default, represents one
column in your table. You can use the
valign tags to specify how the cells in that column should
be aligned. If you have multiple columns in your table, you could
<colgroup> tag for each one. However, if
adjacent columns need the same alignment, you can add the
span attribute to the
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:
<table> <colgroup align=left> <colgroup align=center span=5> <colgroup align=right span=2> ...table rows and row groups go here </table>
Like row groups, columns groups are set off in a particular way when
rules=groups is used in the
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
<colgroup> tag; you can't just plop it down in the
middle of a
<colgroup> tag, the
<col> tag accepts the
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:
<table> <colgroup align=left> <colgroup align=center> <col span=4> <col align=left> </colgroup> <colgroup align=right span=2> ...table rows and row groups go here </table>
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
<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
or by the number and spans of the
<col> tags in the
group, but not both. That's why I removed the
attribute from the
<colgroup> tag in the second
<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
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 email@example.com.
If you have technical problems with this magazine, contact firstname.lastname@example.org