Robert Denton - Media and Design Consulting

Robert Denton - Media and Design Consultant, Web Designer

Agonizingly slow redesign in process…

This tutorial was written in 2002... it needs to be updated for XHTML standards and I don't have the time but will get to it some day this year... (2006)

CSS Tables

Robert Denton - June 2002

If you really want to become a CSS expert then buy one of these books and create pages and pages of designs. I did this for years at a job and am a CSS/XHTML expert, out of work now.

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:

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

Staff Contact

Our Staff
Bob SmithDirector725-1234
Jon DoeAssistant Director of Assisting the Assistant Planner725-1234
Becky JonesAdministrative Assistant725-1234

Table code:

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
ProgramPlatformVersionSupport 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 thing10.09.86.7
Other thing6.58.99.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;}