CSS Tables
This has been adapted from Bowdoin's CSS Tables
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 cruft 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 that far out weigh 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 use this table style in.
Post-it note
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
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;}
make your own .servbodR and L, sheesh!
Our Staff Contacts
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 |
| Program |
Platform |
Version |
Support Level |
| Adobee Aquabat |
Mack & PC |
5.0 or higher |
2 |
| Adobee Draw-n-paste |
Mack & PC |
8.0 or higher |
3 |
| Adobee Subliminal-Imageready |
Mack & PC |
2 or higher |
3 |
| Adobee Pageflaker |
Mack & PC |
6.5 |
3 |
| Adobee Photopop |
Mack & PC |
5.5 or higher |
1 |
| Adobee Listener |
Mack & PC |
5.0 or higher |
2 |
| Jacken T'Box Stuffit Expander |
Mack |
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;}
The Missing Table
Let's start with a simple table.
A table btw (by-the-way) which Bowdoin never had showing on his page. It was enclosed in a hidden field, which I am fortunate to have found ;-)We will use a class selector for this table. (remember, we still use tables for layout, so a generic table selector in CSS would mess with a lot on these pages) .
| To Do |
· this is one thing
· and another... |
| poof |
Table code:
Bowdain talks here about borders.
CSS Statements:
table.node
{ font-family: Verdana;
font-weight: normal;
font-size: 10px;
color: #404;
border-left: 1px #a7a7a7 solid;
border-top: 1px #a7a7a7 solid;
border-right: 2px #9a9a9a solid;
border-bottom: 2px #9a9a9a solid;
background-color: #d4d4d4;
width: 128px;
height: 225px;
border-collapse: collapse;
border-spacing: 0px; }
table.node td
{ font-family: Verdana;
font-weight: normal;
text-align:left;
font-size: 10px;
color: #404040;
padding: 5px;
background-color: transparent;
vertical-align: top; }
table.node td.hed
{ font-family: Verdana;
font-weight: bold;
text-align:center;
font-size: 10px;
color: #404040;
border-bottom: thin #9a9a9a dotted;
background-color: #e7e57b;
padding: 0px;
height: 15px; }
He says,
"Note that in the starting table tag I still included a cellspacing attribute. This must be present if you want your table borders to draw correctly on all browsers. Not all browsers obey the two (yes 2!) CSS statements which should control this behavior. Normally we write a CSS selector with the statements: border-collapse: collapse; border-spacing: 0px; Well, border-collapse is only recognized by Windows IE 5.5 & 6, while border-spacing is recognized by Mozilla (or Netscape6 if you must) across all platforms. The Mac version of IE for some reason unknown(!) does not understand either... thus the addition of the old html table tag attribute "cellspacing='0'". Leave it to Microsoft to implement their browser differently in two places! Well, it is a short fix and not too annoying. ...and our table borders should be fine. Class tag for the table defines: width outside border. Class tag for [Since we still use tables for layout there are some things to watch out for...]"
Thats a lot of foo! I guess he had to run off for a latte before he could finish this. Good thing for him I have a steady stream of latte conveniently packaged right near my desk!
Well that's it ppl. I hope you enjoyed our little presentation of work. Although Bowdoin has misplaced his page (permanently?), we here at *Robin-Ann.com* will have to do! Have a great CSS day :)
The original Bowdoin Page was written somewhere in 2001, I think. I went to look for it one day, much later after I had first studied it, and was sad to find it had been lost during a server refiguration. Luckily, google still had a cached version and I took it upon myself to reformat the page and list in on my server for all to learn and see!
Written/Rewritten by Robin-Ann 2004. All Rights Reserved. Visit me anytime me :o) www.robin-ann.com