Looking for the lessons? Get started!
Short description of page contents.
The entire Web Design Principles section can be accessed through the menu below.
[T]ables have a specific purpose in HTML, and one that's still valid. — Craig Grannell
Back in the wild and woolly days of HTML-only designing (i.e. no CSS!), tables were primarily used for their proper purpose — displaying tabular data. Your checkbook, for example, might do well in an HTML table display, as would your teacher's gradebook or your medical chart.
Here's a quick and easy example, something an elementary teacher might make up:
|Student Name||Gender||Student's Pet|
And here's the source code:
<table border="1"> <tbody> <tr> <th>Student Name</th> <th>Gender</th> <th>Student's Pet</th> </tr> <tr> <td>Tameka</td> <td>girl</td> <td>cat</td> </tr> <tr> <td>Jose</td> <td>boy</td> <td>ferret</td> </tr> <tr> <td>Ben</td> <td>boy</td> <td>dog</td> </tr> </tbody> </table>
I don't know about you, but to me that's a hefty piece of code for something that small. Yet that's the way it's done, or better to say, that's the way it used to be done. And still is on many sites.
But somewhere along the line, enterprising designers learned how to force tables to contain layout elements. How was that? Well, you can place any element you want inside a table cell, from a paragraph to an image to large subsets of elements. The genie was out of the bottle, and designers began using tables to create very complex, sophisticated, and sometimes quite beautiful Web sites, all table-based.
Unfortunately for these designs (and designers), the whole idea of table-based layouts is just wrong. It's not considered best practices, for a number of reasons.
... more to come ...
You can learn more about CSS tables from a screencast by Chris Coyier.