Now that “table” has become a bad word and many people have eliminated them from their repertoire, I wanted to shine a little more light on this misunderstood, but well-intentioned, piece of markup.
Everybody is familiar with table, tr, and td tags, but when was the last time you used the thead, tfoot, th, caption, col, or colgroup elements? How about the title, summary, and header attributes?
Nowadays it’s rare that you need to use a table, but when you do, you can write cleaner semantic code and make your site more accessible by using these tags and attributes correctly.
The table Tag
Thanks to CSS, there’s no longer a need to specify cellpadding, cellspacing, or border on every single table. (Unless you’re supporting 4.0 browsers) Cellspacing=“0” can be replaced with border-collapse:collapse;. Cellpadding=“0” can be replaced with padding:0; on table cells. And of course the border can be manipulated through the table and table cells via CSS. Lastly the title and summary attributes help provide valuable semantic information for non-sighted users.
The caption Tag
Similar to the title and summary attributes, the caption tag which is placed just inside of a table not only provides semantic information, but is displayed above the table and can be styled using CSS as well. By default it will display the text centered above your table, but you can align and color it to your heart’s desire.
The <tbody>, <thead>, <th>, and <tfoot> Tags
These are really pretty self-explanatory. Instead of just using an extra row for a header, add thead around the row and use th instead of td. Do the same with tfoot except that td tags are fine inside your footer. Now you’ve got valuable header and footer information in your files with quality semantic markup, all you have to do is add tbody around your main tr tags, and you’re table is now accessibly beautiful. For the sake of brevity, I won’t get into the details or cover the scope, headers, and id attributes since they are covered well elsewhere. And even more conveniently, you can style these elements through CSS.
The colgroup and col Tags
While they don’t provide a ridiculous amount of functionality, colgroup and col can save more headache than you probably realize. Once again, their use is covered much better elsewhere, so I won’t get into that.
Now that you’re vaguely familiar with the value of using all the other table tags and attributes that exist, I strongly encourage you to do a little digging and find out a little more about how to use these tags correctly. Did I mention that you can style all of these different elements through CSS?