Decorated tables in pure HTML

written Sept 2000 being revised June 2006
Google site search

ContentsIntroductionBasicIntermediateAdvancedFuturePolicyInfrastructure

1   Decorated Tables in pure HTML        

How to get decorative looking tables in HTML. IE seems to be better equipped than Netscape 4.7 to produce the goods. Here is a portion of the Table of W3C Positioning Property Extensions to CSS1.

<div align=center>
<p><strong>Positioning Properties</strong></p>
<table border=1 bordercolor=red cellspacing=0>
<tr>
<th>Property</th>
<th>Values</th>
<th>Applies to</th>
<th>Inh.<br></th></tr>
<tr>
<td>position</td>
<td>absolute | relative | static </td>
<td>all elements</td>
<td>no<br></td></tr>
<tr>
<td>left</td>
<td><length> | <percentage> | auto</td>
<td>absolutely and relatively positioned elements</td>
<td>no<br></td></tr>
</table>
</div>

Positioning Properties

Property Values Applies to Inh.
position absolute | relative | static all elements no
left <length> | <percentage> | auto absolutely and relatively positioned elements no

Using different text colours and backgrounds in each cell is not so much a problem. Also you can slice up an image and distribute it among table data items easily by setting cellpadding and cellspacing to 0. But getting a colour border throughout the table is more difficult. The table above shows is an initial attempt which works for IE.

Netscape renders boring grey intercell borders even for Netscape 6. To get coloured cell borders we need to specify a coloured background. But coloured backgrounds are handled differently by different browsers. This is for two reasons, firstly because Netscape applied background to the cells only, not the spaces between the cells, so 'background' really means 'cell backgrounds'.

Secondly Netscape 4.7 doesnt use the same rules of colour inheritance as prescribed by style sheets. The table inherits its intercell background colour only from enclosing tables or the body. To get Netscape 4.7 to join the party we must enclose the table in another table.

<div align=center style='background-color: red'>
<p><strong>Positioning Properties</strong></p>
<table bgcolor=red cellpadding=0 cellspacing=0 ><tr><td>
<table border=1 cellspacing=1 cellpadding=4 bordercolor=red bgcolor=white>
<tr>
<th>Property</th>
<th>Values</th>
<th>Applies to</th>
<th>Inh.<br></th></tr>
<tr>
<td>position</td>
<td>absolute | relative | static </td>
<td>all elements</td>
<td>no<br></td></tr>
<tr>
<td>left</td>
<td><length> | <percentage> | auto</td>
<td>absolutely and relatively positioned elements</td>
<td>no<br></td></tr>
</table></td></tr></table>
</div>

Positioning Properties

Property Values Applies to Inh.
position absolute | relative | static all elements no
left <length> | <percentage> | auto absolutely and relatively positioned elements no

This gets us close. The cellspacing is required to let the coloured background show through, except that IE fills this with the background color of white. This may be an acceptable compromise, but if not the background colour can be specified for each cell and the border can be collapsed to 0.

<div align=center>
<p><strong>Positioning Properties</strong></p>
<table bgcolor=red cellpadding=0 cellspacing=0 ><tr><td>
<table border=0 cellspacing=1 cellpadding=4 bordercolor=red bgcolor=white>
<tr>
<th bgcolor=white>Property</th>
<th bgcolor=white>Values</th>
<th bgcolor=white>Applies to</th>
<th  bgcolor=white>Inh.<br></th></tr>
<tr>
<td bgcolor=white>position</td>
<td bgcolor=white>absolute | relative | static </td>
<td bgcolor=white>all elements</td>
<td bgcolor=white>no<br></td></tr>
<tr>
<td bgcolor=white>left</td>
<td bgcolor=white><length> | <percentage> | auto</td>
<td bgcolor=white>absolutely and relatively positioned elements</td>
<td bgcolor=white>no<br></td></tr>
</table></td></tr></table>
</div>

Positioning Properties

Property Values Applies to Inh.
position absolute | relative | static all elements no
left <length> | <percentage> | auto absolutely and relatively positioned elements no

1.1   Exercise - coloured table borders        

Write a Tcl procedure HTML::table which generates HTML for coloured borders and uniform backgrounds for all cells.

2   A general exercise in table bordercolor and bgcolor        

The following is simply a test table with many different options tried out as a kind of pallette.

cell within row(yellow/blue 8) within table (red/green 4) cell (cyan/maroon 4), row(yellow/blue 8), table (red/green 4)
cell within row(yellow/blue 8) within table (red/green 4) cell (cyan/maroon 4), row(yellow/blue 8), table (red/green 4)
cell within row(yellow/blue 8) within table (red/"") cell (cyan/maroon 4), row(yellow/blue 8), table (red/"")
cell within row(yellow/blue 8) within table (red/"") cell (cyan/maroon 4), row(yellow/blue 8), table (red/"")
cell within row(yellow/blue 8) cell (cyan/maroon 4), row(yellow/blue 8)
cell within row(yellow/blue 8) cell (cyan/maroon 4), row(yellow/blue 8)

©2000 - 2006 WEBSCOOL This page last updated 06 Jun 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.