CSS Table Layout Properties

Creating tables used to be a long task due the lack of browser compatibility, things are much easier now when you use CSS Style Sheets to format the Table Layout. This way you can create great looking tables with very little effort.

The big advantage of using CSS is that there is less markup within your layout making it much easier for Search Engine to read your page.

Tables can be used in a number of ways such as displaying text and images, and there is no better way to create columns and rows of data such as price lists, spreadsheets and itineries, etc. Here are a few examples complete with the style sheet code to get you started. The options are left to your own imagination.
Once you change to CSS properties for your tables, you will find that CSS allows you to control the style, colour and thickness of the border of a table cell.

Some of these examples may require that that you use the <!DOCTYPE html PUBLIC -//W3C//DTD XHTML strict markup.

This table has a Silver gradient background image for each row with no border lines showing.

Breakfast Lunch Tea Supper
Eggs Roast lamb Cup of Tea Cup of Tea
Bacon Carrots Stawberries Biscuits
Black Pudding Yorkshire Pudding Cream Another Tea
Toast Mashed Potato Biscuits More Biscuits

Here is the Code for the CSS Silver Table

<table id="silver" summary="Gradient Table">
<thead>
<tr>
<th>Breakfast</th>
<th>Lunch</th>
<th>Tea</th>
<th>Supper</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eggs</td>
<td>Roast lamb</td>
<td>Cup of Tea</td>
<td>Cup of Tea</td>
</tr>
<tr>
<td>Bacon</td>
<td>Carrots</td>
<td>Stawberries</td>
<td>Biscuits</td>
</tr>
<tr>
<td>Black Pudding</td>
<td>Yorkshire Pudding</td>
<td>Cream</td>
<td>Another Tea</td>
</tr>
<tr>
<td>Toast</td>
<td>Mashed Potato</td>
<td>Biscuits</td>
<td>More Biscuits</td>
</tr>
</tbody>
</table>

<style type="text/css">
#silver {
font-family: Sans-Serif;
font-size: 12px;
margin: 1px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#silver th {
font-size: 14px;
font-weight: normal;
text-align: left;
padding: 8px;
background-color: #676767;
border-top: 2px solid #d3ddff;
border-bottom: 1px solid #fff;
color: #FFFFFF;
}
#silver td {
padding: 8px;
border-bottom: 1px solid #fff;
color: #000000;
border-top: 1px solid #fff;
background: #e8edff url('table/silver.png') repeat-x;
}
</style>


This is a simple layout, with a horizontal rule line in each row and no verticle lines showing.

Track Round Name Speed
Silverstone 8 Tom 70 MPH
Le Mans 10 Peter 69 MPH
Donnington 14 Marlene 84 MPH
Monaco 15 Trevor 50 MPH

Here is the Table and CSS Code

<table id="ruled" summary="Track Speeds">
<thead>
<tr>
<th>Track</th>
<th>Round</th>
<th>Name</th>
<th>Speed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Silverstone</td>
<td>8</td>
<td>Tom</td>
<td>70 MPH</td>
</tr>
<tr>
<td>Le Mans</td>
<td>10</td>
<td>Peter</td>
<td>69 MPH</td>
</tr>
<tr>
<td>Donnington</td>
<td>14</td>
<td>Marlene</td>
<td>84 MPH</td>
</tr>
<tr>
<td>Monaco</td>
<td>15</td>
<td>Trevor</td>
<td>50 MPH</td>
</tr>
</tbody>
</table>

<style type="text/css">
#ruled
{
font-family: Sans-Serif;
font-size: 12px;
background: #FBFAC4;
margin: 5px;
width: 484px;
border-collapse: collapse;
text-align: left;
}
#ruled th
{
font-size: 14px;
font-weight: normal;
color: #800080;
text-align: left;
padding: 4px 4px;
background: #6A96CC;
border-bottom: 2px solid #6678b1;
}
#ruled td
{
border-bottom: 1px solid #ccc;
color: #0000A0;
padding: 6px 8px;
}
</style>


Table with Highlited Column

This is a more complicated table using CSS, place the mouse over each data row to show the highliting.

Track Round Name Speed
Silverstone 8 Tom 70 mph
Lemans 10 Peter 69 mph
Donnington 14 Marlene 84 mph
Monaco 15 Trevor 50 mph

<div align="center"><table id="Track" summary="Average Track Speeds">
<colgroup>
<col class="first-column" />
</colgroup>
<thead>
<tr>
<th scope="col">Track</th>
<th scope="col">Round</th>
<th scope="col">Name</th>
<th scope="col">Speed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Silverstone</td>
<td>8</td>
<td>Tom</td>
<td>70 mph</td>
</tr>
<tr>
<td>Lemans</td>
<td>10</td>
<td>Peter</td>
<td>69 mph</td>
</tr>
<tr>
<td>Donnington</td>
<td>14</td>
<td>Marlene</td>
<td>84 mph</td>
</tr>
<tr>
<td>Monaco</td>
<td>15</td>
<td>Trevor</td>
<td>50 mph</td>
</tr>
</tbody>
</table>

<style type="text/css">
#Track
{
font-family: Sans-Serif;
font-size: 12px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#Track th
{
font-size: 14px;
font-weight: normal;
text-align: left;
padding: 10px 10px;
color: #004000;
}
#Track td
{
font-size: 12px;
padding: 8px 12px;
color: #669;
border-top: 1px solid #e8edff;
}
.first-column
{
background: #FFFF80;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
#Track tr:hover td
{
color: #800040;
background: #eff2ff;
}
</style>