Some folks would argue that you should never use tables. And, for the most part, I agree.

I believe that HTML markup should be meaningful, and therefore, you shouldn't use tags for something they weren't intended for (such as laying out a web page.) However, tables were put into the HTML standard for a reason, displaying tabular data.

For instance, if we have a database of employees and we want to print a report that contains our top performers, their salary, and contact information a table would be the perfect candidate.

Here's a fictitious example of what a web page might return from a database of employees.

<table id="employees">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Salary</th>
    <th>Extension</th>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Einstien</td>
    <td>$500,000</td>
    <td>3141</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Turing</td>
    <td>$300,000</td>
    <td>1243</td>
  </tr>
  <tr>
    <td>Nikola</td>
    <td>Tesla</td>
    <td>$300,500</td>
    <td>0987</td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100,000,000</td>
    <td>2222</td>
  </tr>
</table>

This, in my humble opionion is perfectly acceptable. We have tabular data that belongs in an HTML table. But, what do we do from here? The table returned is drab and needs some styling to look as sharp as the rest of the site. Let's add some style.

#employees {
  width:100%;
  border-collapse:collapse;
}

#employees td, #runners th {
  border:1px solid #28647f;
  padding:3px 7px 2px 7px;
}

#employees th {
  font-size:1.2em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#26394c;
  color:#FFFFFF;
}

#employees tr.alt td {
  color:#000;
  background-color:#d3e5f2;
}

Better! This turned our drab table from the 90's into something that looks clean and professional.

Remember, you should only use tables for displaying tabular data. If you want a good way to lay out the graphics on your web page, then check out this tutorial to help get you started.

You can view the entire web page here.