Moving to a new standard: HTML gets a makeover
What's new in HTML 4.0?
April 1998
![[Next story]](/sunworldonline/icons/tb-next.gif){kind=icon}
![[Table of Contents]](/sunworldonline/icons/tb-toc.gif){kind=icon}
![[Search]](/sunworldonline/icons/tb-search.gif){kind=icon}
|
|
Moving to a new standard: HTML gets a makeoverWhat's new in HTML 4.0? |
April 1998
|
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 |
here 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:
<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
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:
<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 <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:
<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
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.
|
|
Resources
sed script http://members.aol.com/htmlguru/agent_log.html
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.
|
|
|
|
![[(c) Copyright Web Publishing Inc., and IDG Communication company]](/sunworldonline/icons/b-copyright98.gif){kind=icon}
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: