CSS Tables

???http://robertdenton.org/reference/css-tables-tutorial.html

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

Friday, 05.31.2002 · A nice indented headline · The little dot instead of a bullet goes like this: · Saturday, 06.01.2002 · Long Pond has fish!

Table code:

Alerts Box Template

Friday, 05.31.2002 · A nice indented headline · The little dot instead of a bullet goes like this: · Saturday, 06.01.2002 · Long Pond has fish!

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:

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

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; }


Staff Contact

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:

Our Staff
Bob Smith	Director	725-1234
Jon Doe	Assistant Director of Assisting the Assistant Planner	725-1234
Becky Jones	Administrative Assistant	725-1234

CSS Statements:

table.contacts
{ 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:

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

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:

These stats here are good
The thing	10.0	9.8	6.7
Other thing	6.5	8.9	9.9

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;}