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

Description:

CSS styled tables are more efficient than HTML styled tables. By keeping style separate from content, HTML code bloat is significantly reduced making your pages leaner and faster loading.

Example:

Table with CSS Styled Columns
Table Header 1
Subtitle		 Table Header 2
Subtitle		 Table Header 3
Subtitle
left_col - width 33% - BG lt gray mid_col - width 33% BG lt green right_col - width 33% BG lilac
Some text here Some text here Some text here
Some text here Some text here Some text here

Method:

How I survived a computer disaster

 

Spam Filter - Free Trial

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;}


Lunarpages.com Web Hosting

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>

 

    bookmarks