Splitting Up Tables - Trials and Tabulations - HTML with Style

Trials and Tabulations

Splitting Up Tables

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:

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:

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.

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.