CSS Styling for a Table Layout

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 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 Spiders 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 styling 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.

Silver Table

This table has a 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 Table Code and the CSS Code.

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

Plain and Simple

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 Code and the 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>

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

Here is the Table Code and the CSS Code.

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