Trials and Tabulations

Splitting Up Tables

Get Ready for Microsoft's 'Oslo' Modeling Tool

Table Columns

Tables are specified in rows, as we saw earlier. HTML 4.0 introduced a method of grouping the table in terms of columns as well. This is done through the use of the COL and COLGROUP elements. The use of these elements is slightly tricky. Although these elements identify columns, that obviously contain cells, they are not the parents of table cell elements. Let me explain that again: a COL element, that identifies a column in a table, will not have the cells in that column as its children. The cells will be children of the TR element that identifies the row they belong to. The COL and COLGROUP elements are used to specify information about the columns, and the user agent will take care of determining which cells belong to which columns. This is all best illustrated by an example:

<H4>Soft Drinks Consumed by Acme Programmers</H4>

<TABLE>
<COLGROUP>
 <COL SPAN=3 ID="date">
</COLGROUP>
<COLGROUP SPAN=5>
</COLGROUP>
<COLGROUP>
 <COL ID="total">
 <COL ID="change">
</COLGROUP>
<TR>
 <TD>Day</TD><TD>Month</TD><TD>Year</TD>
 <TD>Arnold</TD><TD>Bob</TD><TD>Carla</TD>
 <TD>Daphne</TD><TD>Eric</TD>
 <TD>Total</TD><TD>Change</TD>
</TR>
<TR>
 <TD>16</TD><TD>January</TD><TD>1999</TD>
 <TD>34</TD><TD>56</TD><TD>12</TD><TD>144</TD>
 <TD>5</TD>
 <TD>251</TD><TD>+27</TD>
</TR>
<TR>
 <TD>17</TD><TD>January</TD><TD>1999</TD>
 <TD>26</TD><TD>48</TD><TD>8</TD><TD>98</TD><TD>2</TD>
 <TD>182</TD><TD>-69</TD>
</TR>
</TABLE>

This time I didn't even try showing you this example in this page, because it will, even though it is perfectly legal HTML, crash various minor versions of Navigator 4.0 without any warning or recovery. Do I have to point out that Navigator doesn't support columns?

Again, such bugs are almost always caused by the combination of complicated tables and CSS. In a couple of years, you will probably be able to use them and tell people who use 4.0 browsers to get an earlier version if they complain, but right now they're a no-no for publicly available HTML documents unless you want a deluge of e-mail from readers saying that your document crashes their browser with no warning.

Explorer does columns pretty well. The primary point of having column elements is so that you can apply CSS declarations to all the cells in a column, which would not be possible with normal CSS selectors unless, say, you give all the cells in each column the same CLASS attribute.

Each table implicitly has one column group that covers all of its columns, even if you don't explicitly specify a COLGROUP element. Alternatively, you can specify several column groups, each spanning a number of columns, with a syntax like the following:

<COLGROUP SPAN=3 ID="cols1-3">
</COLGROUP>
<COLGROUP SPAN=2>
</COLGROUP>
<COLGROUP SPAN=5>
</COLGROUP>

The above specifies three column groups, the first one spanning 3 columns, the second one spanning 2 columns, and the third one spanning 5 columns. If you want to single out the two columns in the second group, you can omit the SPAN attribute and instead insert COL elements inside the COLGROUP. Note that COL elements are empty elements, and hence do not require an end-tag.

<COLGROUP SPAN=3 ID="cols1-3">
</COLGROUP>
<COLGROUP>
 <COL ID="col4">
 <COL ID="col5">
</COLGROUP>
<COLGROUP SPAN=5>
</COLGROUP>

The SPAN attribute also applies to COL elements, meaning that you can specify several columns in one element, like this:

<COLGROUP SPAN=3 ID="cols1-3">
</COLGROUP>
<COLGROUP>
 <COL ID="col4">
 <COL ID="col5">
</COLGROUP>
<COLGROUP>
 <COL SPAN=4 ID="cols6-9">
 <COL ID="col10">
</COLGROUP>

This is rather complicated syntax and can be potentially confusing, so let me explain this in detail: The first COLGROUP element covers the first three columns. The second COLGROUP element contains two COL elements, and covers the fourth and fifth columns. The elements themselves each specify one column. The third COLGROUP element contains one COL element with a SPAN of 5 and another with no SPAN attribute (which is the same as SPAN=1). The first COL element specifies four column, but the element represents each of these columns not all of them together. This is best illustrated by example. Consider the following style sheet applying to the above example:

COLGROUP#cols1-3 { width: 30%; }
COL#cols6-9 { width: 5%; }

The first declaration means that the column group containing columns 1, 2 and 3 will have a width equal to 30% of their parent, so if you add the widths of columns 1, 2 and 3 the result should be 30% of their parents width. The columns themselves could have any width as long as that is true. The second declaration means that each of the columns 6, 7, 8 and 9 will have a width equal to 5% of their parent. If you add their widths together, you should get 20% of their parent's width.