The code for the following table is taken directly from the html 4.01 specification,
section 11.3.2.
This notes that the align attribute may be specified with a value of
char (in addition to the normal left, right,
center and justify). Accordingly, it should be possible
to have the values in the second column aligned around the period (decimal point).
Sadly, this is one feature of the html specification that is not implemented in either Mozilla-based browsers (e.g. FireFox) or Safari, and probably never will be! ( This is a well-known bug that is over 10 years old...) You can check for yourself by viewing this page in various different browsers.
<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>
| Vegetable | Cost per kilo |
|---|---|
| Lettuce | $1 |
| Silver carrots | $10.50 |
| Golden turnips | $100.30 |
So what can you do about this? One easy fix in this particular case is to explicitly include the cents in every price, and then right-align the text in the column:
<TABLE border="1">
<COLGROUP>
<COL><COL align="right">
...
| Vegetable | Cost per kilo |
|---|---|
| Lettuce | $1.00 |
| Silver carrots | $10.50 |
| Golden turnips | $100.30 |
As you can see, that worked really well!
(If you can’t tell, I’m being sarcastic)
Setting align on a col doesn’t
actually work in either FireFox 3.6.6 or Safari 5.0. So what’s the
problem? At least part of the issue (especially with respect to FireFox) has
to do with how css works. And since css is supposed to be how we handle
visual styling, we should look at that.
Here’s the same table again, with the align
attribute removed from the html and replaced by the relevant css
(and all validated using the W3C validators) Just to make it a little
more interesting, I’ve also made the text in the second column
blue on a light grey background by adding the relevant style
information to the second col in the table:
<TABLE border="1">
<COLGROUP>
<COL><COL style="text-align:right; color:#0000FF; background:#CCCCCC">
...
| Vegetable | Cost per kilo |
|---|---|
| Lettuce | $1.00 |
| Silver carrots | $10.50 |
| Golden turnips | $100.30 |
Well, the background worked, anyway...
Here’s how you can actually make this work using css.
How is this done? By styling the individual cell td elements
in the second column, and using a css selector that allows us to specify
this without having to add a style class to each individual
td. Note that the selector is written in such a way that
the formatting will only apply to the second column of tables
of class secondcolalignright, as shown in the css on the
right (this also means that we don’t strictly need the
col and colgroup elements in this example):
table.secondcolalignright td:first-child+td {
text-align: right;
color: 009900;
border-color: #000000;
/* else in FF 3.6.6 the cell border is also green! */
background: #EEEEEE;
padding: 0 0.3em;
}
| Vegetable | Cost per kilo |
|---|---|
| Lettuce | $1.00 |
| Silver carrots | $10.50 |
| Golden turnips | $100.30 |
One potential disadvantage is that the css text-align
property does not have the equivalent of the html align attribute
value, char, so we still have to pad all the numbers to the same
decimal place in order to achieve alignment. (Exact alignment would also
require a monospace font, as otherwise different number combinations woud have
different widths; with common fonts and sizes, however, the difference is minimal.)
So why exactly does the implementation of css have anything to do with whether
or not individual browsers are programmed to implement specifc features of html
relating to col elements? One problem is a
conflict noted
between the html 4.01
and css 2.1 specifications on the
attributes that can be applied to col and colgroup elements.
Programmatically, it also means that browser authors have to decide when to inherit
properties vertically (colgroup → col →
td) and when horizontally (tr → td).
To further complicate matters, what should be done if the formatting for a particular
cell involves conflicting values of, for example, alignment or colour from each
“direction”? In short, having an element inherit properties from
two different parents creates some complexity and potential contradictions.
Will the issue be fixed? Not, apparently, in Mozilla, largely on the basis of the
way col and colgroup elements have been defined in the draft
html 5
specification (conflict solved!) For now, if you’re using html 4
and want to style text within a particular column, use css selectors to style the
table cells in the columns you want...