Code || Theory

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:

<ul>
<li><span class="right">1</span>Total Approved Comments</li>
<li class="even"><span class="right">0</span>Total Unapproved Comments</li>
<li><span class="right">0</span>Total Spam Comments</li>
</ul>

Unstyled, that looks like the following, which is icky. Imagine what will happen when read out loud by a screen reader.

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

<table>
<tr><th>Total Approved Comments</th><td>1</td></tr>
<tr><th>Total Unapproved Comments</th><td>0</td></tr>
<tr><th>Total Spam Comments</th><td>0</td></tr>
</table>

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.

<dl>
<dt>Total Approved Comments</dt><dd>1</dd>
<dt>Total Unapproved Comments</dt><dd>0</dd>
<dt>Total Spam Comments</dt><dd>0</dd>
</dl>

I leave it up to you (and your friend, css) to determine how to style the following display.

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.