[thelist] css styling of tables

aardvark roselli at earthlink.net
Mon Mar 25 11:36:01 CST 2002


> From: "Ben Phillips" <ben at inchima.com>
[...]
> previously, i have used html attributes such as bgcolor, but am trying
> to move away from this towards supplying the table or maybe a tr or td
> with a style that can be changed via css.

a good idea... IMO...

> however, i have met with quite a bit of resistance on the
> cross-browser front. i also am not sure whether to style a row, or
> each cell, or how to style a column. i also got a bit confused with
> the border-collapse issue as well - albeit with only a quick glance
> through the w3c documentation.

take a look at the tables in the article:
http://evolt.org/entities

i use the same code on my site, which also has a style switcher...
http://roselli.org/adrian/articles/character_charts.asp

the CSS i use:
/* All data tables are affected by this, but you must class the table
tags */
table.data	{	border-top : 1px solid #000066 ;
			border-left : 1px solid #000066 ; }

table.data td	{	border-right : 1px solid #000066 ;
			border-bottom : 1px solid #000066 ; }

table.data th	{	background-color : #000066 ;
			color : #99ccff ;
			border-right : 1px solid #99ccff ;
			border-bottom : 1px solid #000066 ; }

note, this is from the 'heaven' style...

but it styles the header cells with a bg color, adds borders to the
table, and only requires adding a class to the <table>...

to make it work, here's the only code i need to use in my HTML:
<table cellspacing="0" class="data">

hth...

> basically, i'm looking for some good online tutorials that explain the
> best methods of styling html tables using css.

oh... well... umm...




More information about the thelist mailing list