Table settings with CSS
	Updated: 18 Feb 2003

Do you want more control over style settings for tables, table rows, and table cells with less typing? I did... Now I know how, and I'll show you some ideas I've used here and elsewhere.

Extra space around table, all text at top of cell

table.X1 { margin: 1em auto 0em 2em }
table.X1 td { vertical-align: top }
 
<table class="X1" cellspacing="0" cellpadding="5" border="1">

This puts 1em of space above the above, the default amount to the right,
zero beneath, and 2em to the left.

Customized spacing inside table cell

table.x2 TD { vertical-align: top; padding: 8 19 4 10 }
 
<table class="X2" cellspacing="0" border="1">

This puts 8 pixels of padding at the top of each table cell, 19 to the right,
4 at the bottom, and 10 to the left.

Alternating row colors, bold text inside all cells

table.X3 td { padding: 8px; font-weight: bold }
table.X3 tr.odd { background-color: #d8ffff }
table.X3 tr.evn { background-color: #ffdfff }
 
<table class="X3" border="4" cellspacing="2">

Custom borders, alternating row text color

table.X4 { border-left: 12px groove #bebea9; border-top: 12px groove #bebea9; 
    border-right: 12px groove #909070; border-bottom: 12px groove #909070 }
 
table.X4 td { padding: 6px; font-weight: bold; width: 5em }
 
table.X4 tr.odd td { background-color: #a80000; color: #efef00; text-align: left;
    border: 4px solid pink }
 
table.X4 tr.evn td { background-color: green; color: #00efef; text-align: right;
    border: 4px solid lime }
 
<table class="X4" cellspacing="2">
 

Notice that I didn't use the absolute brightest colors (cyan, yellow, red) - I toned them down slightly to save both your eyes - and both of mine.

Instead of CYAN (#00FFFF) I used #00EFEF. Instead of YELLOW (#FF0000) I used #EFEF00. And I really took down the red. Instead of RED (#FF0000) I used #A80000. However, I did use pure lime and pink.

For your amusement, here's the code for the first side comment

div.dq { float: right; margin: 3em 40px auto auto; background-color: white; 
   border: 2px solid gray; text-align: center; padding: 1em }

h3.cq { font-size: 19px; color: #101010 }

... and for the comment in the big black box

div.sb { background-color: black; color: white; padding: 1em; font-size: 90% }

Closing

With CSS you have more control over table (and box) appearance than you might think.

Was this article worthwhile? See the menu at upper right for more code used on this site - including how to do the menu. If you use these ideas on your site, I'd love to know.

Your feedback is most welcome. Would you like to send me email?

Original page posted: February 17, 2003 • Last tweaked: April 19, 2009
 
The address for this page is [ www.therotunda.net/code/table-settings-css.html ]
 
Nothing on my Web site is the official publication of anyone else. Unauthorized use for profit is not permitted.