Best Practices Web Design

Looking for the lessons? Get started!

Short description of page contents.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

[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
Tameka	girl	cat
Jose	boy	ferret
Ben	boy	dog

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.