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><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>
...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;
}
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:
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>
<tr>
<tr>
</table>
<tr>
<td> </td>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr><th scope="col">2006</th>
<th scope="col">2007</th>
<tr>
<th scope="row">Revenue</th>
<td>250</td>
<td>280</td>
</tr><td>250</td>
<td>280</td>
<tr>
<th scope="row">Total Cost</th>
<td>150</td>
<td>200</td>
</tr><td>150</td>
<td>200</td>
</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">
...
...
<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;}
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>
</tr>
<tr>
</tr>
</table>
<caption> Table 1: Revenue and Costs</caption>
<tr><td>... </td>
<tr>
<td>...</td>
</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.
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
In our rush to villainize (rightly) table-based layouts, we often forget that when we have tabular data, it's not only OK but in fact semantically _better_ to place that data in a table.
Properly-formed tables are a whole other ballgame, however.
To build a accessible website; tabular data must be placed in a table. But tables are still not fit for layouts.
It's silly to want to mark up tabular data in anything other than a table. The only time where I might not use a table is if I need to work around current formatting limitations with tables.
eg. Tables are designed for row-based data. Yes there is some support for columns (col tag), but most browsers don't support it well enough to be used effectively (or consistently). You're also limited with how much you can style a column.
Agreed.Tables where tables are due ;)
However, I'm still looking for a way to color table rows alternatively using CSS. Do you have any suggestions? Thanks.
For the chap who wanted to color table rows - check out this tutorial with jQuery:
http://15daysofjquery.com/examples/zebra/
Amen!
Tables shouldn't be used for layout. But some designers essentially replace table tags with divs without thinking about semantics, and in my opinion that's just replacing one unnecessary tag with another one.
It's all about doing what make SENSE and coding responsibly.
I wrote a post on this subject as well.
The web standards/tables debate
Yes Div's for layout of course
and tables for tabulat data.
It's so stupid when people try to use div's for lists of cell data.
Trendsters are caught on a wave that went too far.
Yes, every designers need to know that CSS to design the page layout and TABLE to organize tabular data.
Thank you very much.