Table's anatomy: why tables are not so bad

Do you hate HTML tables? This article illustrates why tables are not so bad...

Yesterday, my friend Jason wrote me about this problem:
"I want to use CSS instead of a table to display a matrix with some values. How can I do?"
Using CSS, a simple way is to create a structure like this:


... and add a <div> element with a fixed size with inside <span> elements to design table cells. The result is:


Looks good. A nice CSS table 3 row x 3 columns. The HTML code is:

<div class="tc1">

<!-- Table header -->
<span class="header">2006</span>
<span class="header">2007</span>
<span class="header">2008</span>
<!-- First row -->
<span>123</span>
<span>353</span>
<span>342</span>
<!-- Second row -->
<span>332</span>
<span>123</span>
<span>453</span>
<div style="clear:both;"></div>

</div>

...and CSS code is for example something like this:

.tc1 {
font-size:11px;
text-align:center;
width:153px;
clear:both;
height:1%;
border-right:solid 1px #DEDEDE;
border-top:solid 1px #DEDEDE; }
div.tc1 .header{background:#FFFFCC; font-weight:bold;}
div.tc1 span{
height:30px;
line-height:30px;
padding:3px;
width:44px;
display:block;
float:left;
border-bottom:solid 1px #DEDEDE;
border-left:solid 1px #DEDEDE;
}

In his email, shortly Jason also said:

"I don't want to use tables because, CSS are good. Tables are bad."

Yes. It's true but this don't means tables don't be used. More exactly, it's a good rule don't use tables to design the page layout, but you can use them (such as in this case) to organize tabular data in a simpler way than using complex CSS structure.


Table Headings
You can use <th> tag to define table headers and define the header scope (row or column).
...HTML code is:

<table>
<tr>

<td> </td>
<th scope="col">2006</th>
<th scope="col">2007</th>

</tr>
<tr>

<th scope="row">Revenue</th>
<td>250</td>
<td>280</td>

</tr>
<tr>

<th scope="row">Total Cost</th>
<td>150</td>
<td>200</td>

</tr>
</table>

Styling Tables using CSS
If you have more then one table, you can define different styles using CSS and an ID attribute for each table you have (for example t1, t2, t3...):

<table id="t1">
...
<table id="t2">
...
<table id="t3">
...

CSS code can be something like this:

#t1 {
font-size:11px;
text-align:left;
border:solid 1px #DEDEDE; }
#t1 td, #t1 th{padding:4px;}
#t1 th{background:#FFFFCC;}

Table Captions
Using tables, you can also add a short description using <caption> tag. <caption> tag must be placed immediatly after <table> tag and you can specify only one caption par table. The result is something like the following image:

Code to add a caption is very simple:

<table>

<caption> Table 1: Revenue and Costs</caption>

<tr>

<td>... </td>

</tr>
<tr>

<td>...</td>

</tr>
</table>

So, in general, tables are not the devil and if used in the correct way (not to design page layout!), can be more functional and simpler to design than CSS pseudo-alternatives.