[thelist] tricky use of tables(or CSS)

Tue Nov 6 10:41:06 CST 2001

You could do this, but it is not efficient at all. The following is a 
small, small table with 2px x 2px cells. We all know how slow tables load 
and this table which is incomplete would take forever on a standard 
connection. In order to get a "smooth" curve you would have to set up your 
own anti-aliasing library of colors, otherwise the resolution bites. 
Depending on color depth you could end up setting 3 to 5 shades for each 
color, arrange them properly in a table, etc. This would be the same for 
CSS, specifying small DIV's with multiple shades of colors for smoothness, 
etc. You would have to call many, many DIV's to accomplish this. Again, not 
really efficient.

EXAMPLE --

STYLE SHEET --
td.color {
         background-color: #FF0000;
         color: #FF0000;
}

WEB PAGE --
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
         <title>Table Curve</title>
         <LINK REL="StyleSheet" HREF="table.css" type="text/css">
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0" width="24">
<tr>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
</tr>
<tr>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
</tr>
<tr>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
</tr>
<tr>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
</tr>
<tr>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
</tr>
<tr>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td class="color" width="2"><img src="trans.gif" width="2" height="2" 
alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
<td width="2"><img src="trans.gif" width="2" height="2" alt="" border="0"></td>
</tr>
</table>

</body>
</html>

May I suggest a background image X 2 (or more) ? One with the original 
color of curve, the others with curves of different colors which could then 
be selected as you require? This DID make for an interesting exercise!

TTFN,

Jay Blanchard
Web Dev Mgr
TMC
1.512.396.5801 x327