Table Formatting Demo

This is the default table:

I'll add classes to define the data types, as specified in the article: dt-datetime dst-date for the first column, dt-number dst-currency dst-USD for the second.

Now I'll allow not-universally-supported (though been-around-forever) CSS2 to apply. Same data, same classes on the cells, different display:

That example works unless you are on a Really Lame Browser such as Internet Explorer 6. The following example only works (and even then there are no guarantees) if you're on a very forward-looking browser, such as Safari, Konqueror, or Firefox (in reverse alphabetical order). To enable this, I've added the TD's value to the abbr attribute, but otherwise the table is the same as the preceding one, and only the CSS is different:

Even though Opera is a Good Browser in my book, it doesn't support the CSS3 selectors yet as of version 8.51. If you're on Opera or a non-Good Browser, here's a screenshot of what you are missing:

As a side note, a gotcha with this technique is that the formatting is based on the value in the abbr attribute, not what the browser displays. This is so easy to forget! I changed one of the values and forgot to change its abbr to match, and it took me forever to catch my mistake.