Html styling 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
HTML
| First TD of first TR | Second TD of first TR | Third TD of first TR | Fourth TD of first TR |
| First TD of second TR | Second TD of second TR | Third TD of second TR | Fourth TD of second TR |
The first tag now creates a column that spans the first cells of all rows. The second 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: IE7 and lower allow all declarations.
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.
| First TD of first TR | Second TD of first TR | Third TD of first TR | Fourth TD of first TR |
| First TD of second TR | Second TD of second TR | Third TD of second TR | Fourth TD of second 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
First TD of first TR [. etc . ] // second TR
| First TD of first TR | Second TD of first TR | Third TD of first TR | Fourth TD of first TR |
| First TD of second TR | Second TD of second TR | Third TD of second TR | Fourth TD of second TR |
border
Let’s apply a border to the second column. This is an allowed declaration, but it doesn’t work immediately:
| First TD of first TR | Second TD of first TR | Third TD of first TR | Fourth TD of first TR |
| First TD of second TR | Second TD of second TR | Third TD of second TR | Fourth TD of second TR |
No border. That’s correct behaviour: a border declaration on a column is only valid if the entire table has border-collapse: collapse .
| First TD of first TR | Second TD of first TR | Third TD of first TR | Fourth TD of first TR |
| First TD of second TR | Second TD of second TR | Third TD of second TR | Fourth TD of second TR |
Once the border-collapse has been added, the border works. Unfortunately the browsers disagree on the exact scope of the border. The WebKit browsers do this:
The other browsers add a middle border:
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 column that’s spanned by the tag. Therefore the area of the second tag has a total width of 10em + cellspacing.
(I removed the normal texts to ensure every cell gets the defined width instead of being stretched up.)
I use this trick in all my compatibility tables, where I define TD widths via columns. The exact width depends on the col span. I do this so that six IE columns have the same total with as two Firefox ones or three Chrome/Yandex ones.
visibility: collapse
Normally, visibility takes three values:
- visible : element visible. This is the default.
- hidden : element hidden, but the space it takes remains empty.
- 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.
| First TD of first TR | Second TD of first TR | Third TD of first TR | Fourth TD of first TR |
| First TD of second TR | Second TD of second TR | Third TD of second TR | Fourth TD of second TR |