Table columns

In addition to rows, you can also divide a table into columns. This page takes a look at the possibilities and the inevitable browser incompatibilities.

What columns are

Any table is divided into rows (<tr>). In addition, you may specify table columns by means of the <col> tag.

HTML

<table>
<col />
<col span="2" />
<tr>
	<td>First TD of first TR</td>
	<td>Second TD of first TR</td>
	<td>Third TD of first TR</td>
	<td>Fourth TD of first TR</td>
</tr>
<tr>
	<td>First TD of second TR</td>
	<td>Second TD of second TR</td>
	<td>Third TD of second TR</td>
	<td>Fourth TD of second TR</td>
</tr>
</table>

The first <col /> tag now creates a column that spans the first cells of all rows. The second <col span="2" /> tag creates a column that spans the second and third cells of all rows. The fourth cell in every row is not a part of any column.

Restrictions

Unfortunately table columns are quite hard to use, because if you use them you essentially have a table that's subdivided in two ways: by rows and by columns. The general rule is that any style defined on a row overrules any style defined on a column.

Secondly, W3C specifies that only a few declarations may be used on columns: border, background, width and visibility. Exception: Explorer Windows allows all declarations.

Thirdly, there's some confusion whether the column styles are applied to the column as a whole, or to the individual <td>s contained by it. The border declaration seems to be applied to the column as a whole, but width is applied to the individual cells.

background-color and color

Let's start with some basics. I want every first cell to have a blue background colour, and every second and third cell to have a green one.

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>

In order to keep the cells readable I also want a white text colour. This, unfortunately, does not work. Most browsers don't obey the color: #ffffff because W3C doesn't allow a color declaration on columns.

Explorer Windows is the exception: it does allow the colour. I tend to side with Microsoft on this one; I don't understand why you can't use all normal styles on columns.

Rows and cells overrule columns

Remember the general rule: any style on a row or cell overrules a column style. Therefore the background-colors of the <td> and <tr> are applied and the ones on the columns are ignored.

<td style="background-color: #000000">First TD of first TR</td>
[... etc ...]
<tr style="background-color: #6374AB;"> // second TR

border

Let's apply a border to the second column. This is an allowed declaration, but it doesn't work immediately:

<col span="2" style="background-color: #07B133;
	color: #ffffff; border: 10px solid #000000;" />

No border (except in Explorer Mac). That's correct behaviour: a border declaration on a column is only valid if the entire table has border-collapse: collapse.

<table style="border-collapse: collapse">
<col span="2" style="background-color: #07B133;
	color: #ffffff; border: 10px solid #000000;" />

Once the border-collapse has been added, the border works. Unfortunately the browsers disagree on the exact scope of the border. Firefox, supported by Safari (and buggily by iCab), applies the border as follows:

On the other hand, Opera, supported by Explorer Mac (minus the border-collapse), applies it as follows:

I tend to side with Opera; if I apply a border to a column, I expect the border to go around the entire column only, and not inside the column, too.

width

On columns width means min-width, which is in keeping with width definitions on table elements in general. More oddly, a width declaration counts for every <td /> column that's spanned by the <col /> tag. Therefore the area of the second <col /> tag has a total width of 20em + cellspacing.

<col style="background-color: #6374AB; color: #ffffff;
	width: 10em" />
<col span="2" style="background-color: #07B133; color: #ffffff;
	width: 10em" />

(I removed the normal texts to ensure every cell gets the defined 10em width instead of being stretched up.)

visibility

Normally, visibility takes three values:

1. visible: element visible. This is the default.
2. hidden: element hidden, but the space it takes remains empty.
3. collapse: element hidden, and the space it takes is removed, too.

However, the specification clearly states that in the case of columns, only collapse is a valid value. collapse is supported only by Firefox. Since Explorer Windows supports all style declarations on columns anyway, it also supports visibility: hidden.

The really odd thing is that Explorer Mac refuses to apply the other column styles when it encounters a visibility declaration, and Firefox when it encounters a visibility: hidden.

<col span="2" style="background-color: #07B133; color: #ffffff;
	visibility: hidden;" />

<col span="2" style="background-color: #07B133; color: #ffffff;
	visibility: collapse;" />