antanova

Polishing the table

What with the oh-so-slow move away from using html tables to format layout, the table tags have been abandoned by the side of the road like so much rubbish. But wait! That's not right. You heard, that's definitely a Bad Thing (tm). Why? Well, they're useful for..... guess what. Laying out tables.

I have had to present some tabular data over the past couple of days. One set was a very simple table comparing 2 pricing levels of four products. The other was a long list of sporting entries. Both sets of data needed to be presented correctly and semantically with the table layout tags.

For those of you who've forgotten, here are the main tags.

<table> - the main man. This has lots of attributes. I used “summary” to write a very short... you guessed it, summary of what the table was presenting to the user. You and indeed I may need to add a “class” attribute, but we al know that one already, right?

<colgroup> - Use this to contain groups of columns to group a set of columns together in your table. This tag should be used just after the <table> tag.

<col> - Allows you to specify settings on a particular column. Use it with <colgroup> to create groups of columns in your table.

<caption> - A tag that unsurprisingly adds a caption to your table. I rarely use this tag, but then I haven't had to caption a table often.

<thead> - the table header. I used this to distinguish a group of <th> tags at the top of the table. This helps when printing out tables. After using the <thead> you must also use <tbody>.

<th> - the heading cell. I used this for only column headings for the sporting table, but for both column and row headings for the price-comparison. The important thing here is that you specify what the heading belongs to using the “scope” attribute. So, for example where I used the <th> tag as a heading for a column I used the tag <th scope=”col”> and where I used it as a heading for a row I used <th scope=”row”>

<tfoot> - is something I didn't use, but if your table has a footer, the <tfoot> tag should be used between the <thead> and <tbody> tags, rather than at the bottom of your table mark-up. This may seem a little counter-intuitive, but the point is that putting it there essentially at the top of your mark-up enables the browser to render it correctly for each printed page (<thead> and <tfoot> will be rendered on each printed page, with body cells between). In future, the <thead> and <tfoot> sections will be present on the screen, and the <tbody> section between them will be scrollable. Nice and user-friendly, that idea. I like it. The contents of <tfoot> will render at the bottom of your tables on screen.

<tbody> - Presents the main body of the table. If you need to group parts of the table body separately, but still within the same table you can use more than one <tbody> tag.

<tr> - row tag. If you don't know what this does, turn your computer off and do something else.

<td> - this is where it all happens. Table data.

There you go. Just a little refresher. After not using tables for so long, then having to present some tabular data, I had to scratch my head for a couple of minutes before it all came back, so I hope you've found this little session useful. If not, why have you read this far? Haven't you got something better to do? Get polishing.

Jason posted this on Friday, August 25, 2006 at 10:33 am. Leave comment.