Alt-Web Design & Publishing
CSS Styled Table with 3 Color Columns

CSS2 Code

table {
width: 90%;
border: 2px groove silver;
font: 12px Geneva, Arial, Helvetica, sans-serif;
margin: 0 auto; /**centers table on screen**/
}

caption {
font-size: 2em;
text-align:left;
color: #336699;
font-style:italic;
line-height: 1.8;
font-weight: bold;
}

.left_col {background: #EAEAEA; width: 33%;}

.mid_col {background: #CEFFCE; width:33%;}

.right_col {background: #EAD5FF; width: 33%;}

th {
background: #ECE7CA;
font:16px bold Arial, Helvetica, sans-serif;
color: maroon;
text-align:center;
}

th,td,tr {border: 1px solid silver; vertical-align:middle; height: 45px;}

.subtitle {font: 14px bold; font-style:italic; color:#000;}

XHTML Code

<table cellspacing="0" cellpadding="5">

<caption> Table with CSS Styled Columns</caption>
<col class="left_col" />
<col class="mid_col" />
<col class="right_col" />

<tr>
<th>Table Header 1<br />
<span class="subtitle">Subtitle</span></th>
<th>Table Header 2 <br />
<span class="subtitle"> Subtitle</span></th>
<th>Table Header 3<br />
<span class="subtitle">Subtitle</span></th>

</tr>

<tr>
<td>left_col - width 33% - BG lt gray </td>
<td>mid_col - width 33% BG lt green </td>
<td>right_col - width 33% BG lilac </td>

</tr>

<tr>
<td>Some text here </td>
<td>Some text here </td>
<td>Some text here </td>

</tr>

<tr>
<td>Some text here </td>
<td>Some text here </td>
<td>Some text here </td>

</tr>

</table>