weballey logo
 
left Tables - colors backnext right
homesearchsite mape-mail
basics
expanding
sizing
< colors >
borders
alignment
nesting
navbar
quick recap
tags
epilogue
      Table backgrounds can have colors. Much like the BGCOLOR attribute does for the entire webpage. The same attribute can be used to color entire tables, rows, or single cells. At this point browsers will behave differently. In some the borders will be colored, in others they will be blank.

<TABLE BORDER="1" BGCOLOR="aqua">
<TR><TD>cell</TD><TD>cell</TD></TR>
</TABLE>

cellcell

<TABLE BORDER="1">
<TR><TD BGCOLOR="aqua">cell</TD><TD>cell</TD></TR>
</TABLE>

cellcell

    You can of course combine these two possible positions of the BGCOLOR tag. Coloring the entire table with one color, and a specific row or cell with another. Cell settings will override row settings, row settings will override table settings.

<TABLE BORDER="1" BGCOLOR="aqua">
<TR BGCOLOR="orange">
<TD BGCOLOR="lime">cell</TD>...

cellcellcell
cellcellcell

    Take a look at the entire page. You will now have an idea how all those colored bars are constructed. This coloring of tables is gratefully used by many a web designer. Not only does it look great, it does not need images either. Saving you valuable download time, while at the same time keeping your layout visually appealing to your visitor.
    If you don't use text or anything at all in a cell, the background color may disappear in some browsers. To make sure you get the color you want, always put something inside a cell. If you don't want to see anything inside it, use a "non breakable space". Just put this code inside a cell: &nbsp;

<TD>&nbsp;</TD>

cell       

goto top  
leftCopyright © Gerben Hoekstra - All rights reserved backnext right