Thursday, March 19, 2009

CSS Tables (3)


While trying to avoid using tables for layout, I do admit to cheating the odd time to get the job done, (I used to do it a lot more). So after using tables for so long, when I actually need a table for data purposes, I had forgotten about captions, grouping rows and columns, and defining header classes, rows etc. Here is a neat example using all of these attributes. Needless to say I didn't spend too much time on making it really fancy, but the different colors illustrate the features

1) Caption - obvious
2) Defining the col groups
I originally defined 2 colgroups, 1 for teams and 1 for content. In any colgroup, you can single out individual 'col's, that overrides the settings for the overall group. This part is bolded in the html sample below.
3) I included the thead reference to give the header colums the same color as the teams colgroup. If that was not included, the red and green colors would extend to the top.
4) For the border, I used the rules attribute. I set it to just show the border between the colgroups, you can see how changing this attribute, using all its values can effect the look and feel in the post CSS Tables (2)

Here is the html (I removed the data for space):
<table class="league" cellspacing="0" rules="groups">
<caption align="top">Premier League Table</caption>
<colgroup class="teams"/>
<colgroup span="5" class="content">
<col span="4"/>
<col class="totals"/>
</colgroup>

<thead class="header">
<tr>
<td> </td>
<td>P</td>
<td>W</td>
<td>D</td>
<td>L</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
---content---
</tr>
</tbody>
</table>

Here is the css:
.league caption {font-weight:bold;padding-bottom:5px;}
.league td {padding:4px 10px;}
.teams {background-color:#b3bed0;}
.content {background-color:#84d5ac;}
.totals {background-color:#ba0401;}
.header {text-align:center;background-color:#b3bed0;}
tbody {text-align:center;}

No comments:

Post a Comment