Table settings with CSS
	Updated: Feb 18, 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">
 

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.

Since March 2003, this page has seen by about 200 or more visitors each month.

My nifty email form stopped working ... but you can still send me email if you would like to.

Original page posted: February 17, 2003. Last tweaked: February 28, 2008.

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.