MXL Magazine Online
HOMELATEST ISSUEARTICLESBINARY BINGEJAVA JNUKYGUI LABLINKSSHOPABOUT CONTACT  
Home > Issue 007 > GUI Lab > Creating a glowing table

Creating a glowing table

Glowing images are pretty easy to do in most imaging application which have specialist tools to do this, most notably Fireworks. But how do you do it with tables? Well you can do it although it looks pretty square. Its not something to replace graphics but I think it looks good and Microsoft UK agree.

Pretty cool hu? OK maybe not. Depends what you think.

So how is it done? Well here is a few rules in bullet points:

  • Cell padding is 5
  • Cell spacing is 10
  • td bgcolor is #FFFFFF
  • table bgcolor #FFCC00
  • border color is #FF9900

Lets look at this. The entire table has a light orange background color. So everything will be organge. However we have set the cell to have a white background so that the only area that ends up light orange is the area outside the cell (as we added cell spacing to space it away from the outer border of the table).

Seems simple hu? The only other part to it is the border. We want this to go round the cell itself so we add the code into the <td> tag so that it surrounds the cell. To do this we use CSS: style="border: #FF9900". To save confusion the source code is below:

<table width="100%" border="0" cellpadding="5" cellspacing="10" bgcolor="#FFCC00">
<tr>
<td height="28" bgcolor="#FFFFFF" style="border: #FF9900 1px solid">Pretty cool hu? OK maybe not. Depends what
you think.</td>
</tr>
</table>