How not to lay out your table

5 December 2008

HTML has a little-used element, <col>, that can be used to describe attributes for a table column. The HTML 4.01 spec gives an example (which I have reformatted because I can’t stand the ALL CAPS ELEMENT NAMES) of using this element to declare that text in a certain column should be aligned on the decimal point:

<table border="1">
  <colgroup>
    <col><col align="char" char=".">
  <thead>
    <tr><th>Vegetable <th>Cost per kilo
  <tbody>
    <tr><td>Lettuce        <td>$1
    <tr><td>Silver carrots <td>$10.50
    <tr><td>Golden turnips <td>$100.30
</table>

Allegedly, such a table will be laid out like this:

------------------------------
|   Vegetable  |Cost per kilo|
|--------------|-------------|
|Lettuce       |        $1   |
|--------------|-------------|
|Silver carrots|       $10.50|
|--------------|-------------|
|Golden turnips|      $100.30|
------------------------------

Except it isn’t.

Apparently, in this respect, HTML 4.01 has been superceded by CSS 2.1, which states that the only properties you can apply to a column are those dealing with the border, the background, the cell width, and the visibility of “collapse”. (“But wait!” I hear you cry. “There’s no CSS in that table…”)

So if you want to declare the alignment of a column and you don’t want to put an explicit class or style marker on every cell of that column, you have to either use Javascript or fool around with the more esoteric corners of CSS, like so:

<style type="text/css">
td:last-child { text-align: right }
.hide { visibility: hidden }
</style>

…yielding this page, which doesn’t work for Internet Explorer, because not even IE8 supports the :last-child selector. Oh, and I don’t see how to align on a decimal point using CSS—a CSS3 draft proposed “text-align: '.'” but nobody bothered implementing it—so I used that hide class to cheat; you can “view source” on that page to see how.¹

I don’t know who is responsible for this suppression of useful features from the Web. I suspect some conspiracy involving the Trilateral Commission and the Bilderberg Group.

PS: I take it that boxes with rounded corners are No Longer Even A Little Bit Cool. Maybe in three years they’ll become charmingly retro.

¹ Hat tip to ergophobe.

technology

Later: The dignity of labor
Earlier: Your fair and balanced religious news from the Middle East