CSS Tables
Robert Denton – June 2002
Tables styled with CSS rules are much more efficient, if done well, than the old method of using font tags, a lot of color tags, and more…These tables are forward looking in the use of CSS but also degrade with a bit of grace for older browsers (NS4).
Instead of all the crust that came with tables before, now we can just use the tags:
table tr td... with a few class tags here or there, and our tables will look great.
Using CSS styled tables will help our site have consistent presentation of basic data. We realize there are probably needs out weighing these few examples. If you find yourself using a table style repeatedly that is not represented here let us know and we can write it into the global table CSS file, or, show you how to make a CSS file local to the sites you need the table style for.
Rather than recreate the wheel, I point you to the excellent CSS Tables documentation from the Western Civ CSS Guide.
This guide will explain a lot and provide links to relevant CSS descriptions within the guide. Read it first.
Work to be done: unify color choices throughout site, or according to sitelet, and, table style usage guidelines need to be standardized
Bowdoin tables
Post-it note
Alerts Box Template |
|
Table code:
CSS statements:
table.alerts
{text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 260px;
background-color: #fafafa;
border: 1px #d79900 solid;
border-collapse: collapse;
border-spacing: 0px;}
.alertHd
{border-bottom: 2px solid #d79900;
background-color: #fff2ba;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040;}
.alertBod p
{text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
line-height: 12px;
color: #404040;
background-color: #fafafa;
text-indent: -8px;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;}
Services matrix or simply, choices
| Services or Links box template | |
| Onesey | Twosesy |
| Scary FUD | Navigate the Hierarchy of Fear |
| About Us | World Class Talent |
| See it NOW! | Staff Attrition Statistics/Status |
Table Code:
CSS Statements:
table.servicesT
{font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 320px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px;
margin-top: 0px;}
table.servicesT td.servHd
{border-bottom: 2px solid #6699CC;
background-color: #BEC8D1;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040;}
table.servicesT td
{border-bottom: 1px dotted #6699CC;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: white;
text-align: left;
padding-left: 3px;}
.servBodL { border-left: 1px dotted #CEDCEA; }
| Our Staff | ||
| Bob Smith | Director | 725-1234 |
| Jon Doe | Assistant Director of Assisting the Assistant Planner | 725-1234 |
| Becky Jones | Administrative Assistant | 725-1234 |
Table code:
CSS Statements:
{
width: 580px;
background-color: #fafafa;
border: 1px #000000 solid;
border-collapse: collapse;
border-spacing: 0px; }
td.contactDept
{ background-color: #99CCCC;
border: 1px #000000 solid;
font-family: Verdana;
font-weight: bold;
font-size: 12px;
color: #404040; }
td.contact
{ border-bottom: 1px #6699CC dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: .7em;
color: #404040;
background-color: #fafafa;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; }
Software table with hilites
| Data table template, e.g., software list | |||
| Program | Platform | Version | Support Level |
| Adobe Acrobat | Mac & PC | 5.0 or higher | 2 |
| Adobe Illustrator | Mac & PC | 8.0 or higher | 3 |
| Adobe Imageready | Mac & PC | 2 or higher | 3 |
| Adobe Pagemaker | Mac & PC | 6.5 | 3 |
| Adobe Photoshop | Mac & PC | 5.5 or higher | 1 |
| Adobe Reader | Mac & PC | 5.0 or higher | 2 |
| Aladdin Stuffit Expander | Mac | 6.5.1 or higher | 2 |
Table Code:
CSS Statements:
table.helpT
{
text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 500px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px;
}
td.helpHed
{
border-bottom: 2px solid #6699CC;
border-left: 1px solid #6699CC;
background-color: #BEC8D1;
text-align: left;
text-indent: 5px;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040;
}
td.helpBod
{
border-bottom: 1px solid #9CF;
border-top: 0px;
border-left: 1px solid #9CF;
border-right: 0px;
text-align: left;
text-indent: 10px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: #fafafa;
}
table.sofT
{
text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 580px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px;
}
Statistics, scores, other data…
| These stats here are good | |||
| The thing | 10.0 | 9.8 | 6.7 |
| Other thing | 6.5 | 8.9 | 9.9 |
Table code:
CSS Statement:
table.stats
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #fff;
width: 280px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}
table.stats td
{background-color: #CCC;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;}
table.stats td.hed
{background-color: #666;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;}