Advanced HTML Tables and CSS Comparisons

Submitted by Munawar on Tue, 01/15/2008 - 01:09.

Designs

In the last few years HTML tables have taken a beating with all manner of HTML "expert" decrying them as bad/evil/the cause of world hunger etc. However, like most things in this world tables in and of themselves are not evil but are a useful and important part of HTML and it's just that people have used them to lay out entire websites which led to difficult to maintain code.

To be fair, it was the only option at the time as CSS was only a far distant promise of what the web could be. However, over the last couple of years CSS has matured and is now the best tool for the job of laying out websites. Which free's up tables to be used for what they were designed - displaying tabular data.

Anatomy of a table

What do you mean anatomy of a table? I know what tables are - I've been using them for years to layout my websites.

Let's start with a very basic table. HTML tables (<table>) are made up of rows (<tr>) which are filled with cells (<td>), as opposed to columns filled with cells. So a very simple table is created using the code below and should look like this.

HTML

CSS

Result

Screenshot


<table id="table1">
 <tr>

  <td>Cell a1</td>

  <td>Cell b1</td>
 </tr>

 <tr>
  <td>Cell a2</td>

  <td>Cell b2</td>
 </tr>

</table>

#table1 {
 border: 1px solid black;}
#table1 td{
 border: 1px solid black;}

Cell a1	Cell b1
Cell a2	Cell b2

Keep it coming

The next group of tags related to tables are the <thead>, <tbody>, and <tfoot> tags. These tags allow us to group the rows of a table and give those rows meaning.

<thead>: Specifies that the rows are part of the table header and it can contain multiple rows.. This allows us to use the tag as a contextual selector to format the cells inside it and in Gecko based browsers it also has the nice feature of reprinting the table header and footer on every page if a table spans multiple pages.
<tbody>: The body of the table is where all the content/data is stored. It is interesting to note that while there can only be one <thead> or <tfoot> in a table there may be multiple tbodies. Later I will show how multiple <tbody> tags can be used to format a table nicely.
<tfoot>: Similar to the <thead> there can only be one table footer but it can contain multiple rows. The <tfoot> rows must be appear before the <tbody> and it will still display at the foot of the table. The reason for this is to allow the user agent to render the table before it has received all the rows.

HTML

CSS

Result

Screenshot


<table id="table4">

 <caption>Table 4</caption>

 <thead>
  <tr>..... </tr>

 </thead>

 <tfoot>
  <tr>..... </tr>

 </tfoot>
 <tbody>

  <tr>..... </tr>

 </tbody>
</table>

#table4 {
 border: 1px solid black;
 caption-side:bottom;}
#table4 thead{
 background-color:#36c;}
#table4 tbody td{
 border: 1px solid black;}
#table4 tbody th{
 background-color: gray;}
#table4 tfoot{
 background-color:#c63;}