CSS Table Formatting - The Way Forward

Abstract

Recently on evolt.org there have been several articles relating to and encouraging the use of CSS over HTML standard formatting. It seems that confidence in CSS has increased recently and it is now preferred over standard HTML formatting solutions. What can I say... finally!

To continue this series, I'm going to look at how useful CSS can be for table formatting and relate in particular to tables containing dynamic data.

Introduction

Formatting a table to look elegant and behave within a design layout is never easy and usually requires extortionate amounts of verbose HTML. Defining all of the attributes necessary to make a table behave is frustrating when hand coding and also bulks code when making dynamic tables where chunks are re-iterated many times.

Using CSS, we can modularise many common formatting properties into a style and re-use them where appropriate. Take the following example...

<table summary="" width="250" cellpadding="0" cellspacing="0" border="1">
<tr><td><font face="sans-serif" size="-1" color="#000066">cell data</font></td></tr>
</table>

Ugly I think you will agree. It could look like this

<table class='mytable' width="250">
<tr><td>cell data</td></tr>
</table>

With the approprate stylesheet attached, every time we want a table with these properties we can simply call upon it using the class='xx' attribute. And notice, that key important features such as width remain editable at source level so that in effect we are controlling only useful properties. Let's face it, how many times does any designer use a table with one of those ghastly 3d default borders?

The Next step

Okay, so thus far we haven't re-invented any wheels; but there are some snazzier features that we can look at in CSS tables.

The TABLE has the annoying feature of non-inheritance in CSS hierarchies. That means, that if you set the TABLE font to sans-serif, other important tags within will not inherit that property. TBODY is an example of such a tag that does not inherit -- which is annoying, since we are of course all good little coders and use TBODY (??)

Well in reality, that is a gift as it means that we can set core formatting parameters for a table in one style and then sub-parameters in another style to be applied locally to a TBODY item.

<table class='tableformatting' width="250">
<tr><td>Heading</td></tr>
<tbody class='dataformatting'>
<tr><td>cell data</td></tr>
</tbody>
</table>

In the above, the style class applied to TBODY (and everything wrapped within) overrides that of the table, giving total local control over the data items within it, independently of the styles controlling the TABLE. This also works with other grouping tags within tables such as THEAD and TFOOT but one must be cautious with these tags since their support is inconsistent through browsers.

In the real world

This CSS control of tables may seem slightly anal and intense with regard to real world applications, but consider CSS the next time you are making a script which spits out data dynamically. Rather than chopping up and hacking together lumps of HTML with print() commands all over the place, why not use a style to control matters.

The advantages are immense.

1. class='xx' is much more elegant than chunks of HTML in your code
2. You can update the whole look of your TABLE formatting without editing your (illegible) code
3. Stylesheets can be standardised across a workgroup
4. Usability and accessibility (read on...)

Usability and Accessibility

A final coup in favour of CSS for table formatting has to be its use in the realms of equality in the use of the web. A visually impaired user can be offered a different stylesheet for table formatting allowing larger fonts and more vivid colours -- nothing new there BUT using our TBODY model, the formatting of the table need not change, just that of the data within. Both parties are happy; your design remains and the user can access your site.

Similarly, text to speech software can have trouble with tables as it tends to ignore the fact that most designers use them for layout and not only data tables. The word 'table' starts to really annoy you when using one of these systems. With CSS one could notify the text-reader to ignore all but the data within TBODY and so on...

Conclusions

It is time to start using CSS to format tables. Although it may not be as hands-on as hacking out a TABLE in HTML, the end results are more elegant, more manageable and more accessible; and after a few tables done this way, you will never go back.