Fear of Tables in HTML

No Comments

For this blog I decided to try out Habari because that's what h0bbel is using and I wanted to use something that uses PHP5. After a week or so of fighting to get it to actually install and an hour fixing every E_STRICT complaint that PHP made, I was pretty happy. It looks all right and works. Then I noticed that there was an unapproved comment, and even after approving it, there still seemed to be one unapproved comment. I figured out that it was merely a bug brought upon by misusing an unordered list to display tabular data.

Observe:

  • 1Total Approved Comments
  • 0Total Unapproved Comments
  • 0Total Spam Comments
Unstyled, that looks like the following, which is icky. Imagine what will happen when read out loud by a screen reader.
  • 1Total Approved Comments
  • 0Total Unapproved Comments
  • 0Total Spam Comments

If ever there were tabular data, it was this: three items with one label and one piece of data each.

Total Approved Comments1
Total Unapproved Comments0
Total Spam Comments0
Total Approved Comments1
Total Unapproved Comments0
Total Spam Comments0

That looks like one would expect.

I suppose that since it is a two column table, we could also use our old friend, the definition list.

Total Approved Comments
1
Total Unapproved Comments
0
Total Spam Comments
0
I leave it up to you (and your friend, css) to determine how to style the following display.
Total Approved Comments
1
Total Unapproved Comments
0
Total Spam Comments
0

In conclusion, that's why you shouldn't fear tables for tabular data. Just because you shouldn't use them for positional layout any more doesn't mean that you shouldn't use them at all.

Be the first to write a comment!