While the history of HTML tables over time isn’t catchy enough to make a movie out of, (the box office would be one of the most desolated places around), it’s fair to admit that it has a few interesting and funny twists. To make a quick recap, in the 90’s the web was a pushing - yet primitive - creature plagued with ugly <font> tags and inline JavaScript handlers; tables were a sort of wildcard that fitted in every possible scenario, ranging from displaying some scarce and dull paragraphs, to the construction of complex web page layouts. They were a designer's best friend.
Then, many people started to realize that using tables for creating layouts was wrong, and as a result, they were replaced (at a pretty slow pace) by the venerable and often abused divs. In increments, a new state of “consciousness” took over, and as a consequence, tables were delegated to a dark corner, only visited by the brave souls who dared to confront the enemy face to face. End of the story? Well, not really.
In fact, from the very beginning tables were created for displaying tabular data, regardless of the use or misuse that they’ve suffered over the years. And to be honest, they’re unbeatable when employed for the purpose for which they were conceived in the first place. Naturally, it’s probable that at this moment you’re thinking to yourself that you’re effectively using your tables the right way. So, what’s the big deal with them? In reality, dropping a table on a web page is a dead simple process; however, doing this semantically and make the table look pleasing to the eyes is quite different.
Does this mean that it’s impossible to code semantic tables that look good as well? Of course not. What’s more, with a little bit of willpower and the use of a few straightforward CSS styles, it’s feasible to achieve this balance without suffering premature hair loss. And best of all, the experience can be really instructive, and also fun.
With that said, in the lines to come I’ll be showing you in a step-by-step fashion how to give your HTML tables the appearance that they truly deserve, while keeping their semantic meaning pristine and clean.
Getting started: creating a sample HTML table
As the powers-that-be claim, HTML tables should be used for showing tabular data. While sticking to this principle is fairly simple, the subtle details that surround the implementation process can sometimes be a bit tricky, as it’s mandatory to represent (in a semantic way) the presence of these elements within the markup.
Naturally, the best way to face this challenge is by example. Given that, in this particular case I’m going to recreate a hypothetical scenario, where it’s necessary to create an online buying guide containing hardware components of a few different models of desktop computers offered by a fictional company.
To build this typical guide, the best ally is - yes, a plain table! Thus, take a peek at the one coded below, which is quite easy to grasp:
While the skeleton of this table is self-explanatory, it contains a few additional elements that deserve a brief explanation. First off, a decent table should be broken down in well-differentiated sections, right? Well, that’s why the above one uses the “<thead>”, “<tfoot>” and “<tbody”> elements, which make it clearer to see the relevance of each item within this sample buying guide.
Next, it’s worth noting the use of the <caption> and <summary> tags, which allow you to represent the table’s primary heading element, especially when using screen readers. And last, but not least, you should pay attention to the usage of the “scope” attribute with the corresponding rows, something that comes in handy for semantically reflecting a specific item spans either a row or a column in the table.
So far, so good. Now that I managed to build a simple - yet semantic - table that permits users to pick out a computer model from the few available, it’s time to move on and start spicing up the table’s visual presentation with CSS. As you may have noticed, the table contains a couple of CSS classes already, like “first-col” and “odd”, which will be used for providing it, among other things, with the classic “zebra” look.
Style Sheets 
