[thelist] tricky use of tables(or CSS)
jay.blanchard at thermon.com
jay.blanchard at thermon.com
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
More information about the thelist
mailing list