In Table 1 below, the bluish cell has no content, so it shows the row color. The other cells have their own bgcolor specified. Notice that the spaces around the cells are white. This is the cellspacing. It never shows color unless the table itself has a bgcolor.
Table 1
Note: Internet Explorer 8 supports the empty-cells property if a !DOCTYPE is specified.
The row bgcolor attribute works only for visible cells. Same is true for the individual cells - if one is invisible (empty-cells:hide;), then its bgcolor won't show.
But if the command is "empty-cells:show;" then the bgcolor will show!
However, no color will show in the cellspacing, no matter what. UNLESS you use bgcolor for the table itself!
In Table 2 below, the empty cells are hidden. No row bgcolor shows in those hidden cell spaces.
Table 2
|
Yellow row,
cell 2 |
Yellow row,
cell 3 |
Yellow row,
cell 4 |
Peach row,
cell 1 |
|
Peach row,
cell 3 |
Peach row,
cell 4 |
Blue row,
cell 1 |
Blue row,
cell 2 |
|
Blue row,
cell 4 |
Lilac row,
cell 1 |
Lilac row,
cell 2 |
Lilac row,
cell 3 |
| |
In Table 3 below, the empty cells are not hidden. So the row color shows in them.
Table 3
|
Yellow row,
cell 2 |
Yellow row,
cell 3 |
Yellow row,
cell 4 |
Peach row,
cell 1 |
|
Peach row,
cell 3 |
Peach row,
cell 4 |
Blue row,
cell 1 |
Blue row,
cell 2 |
|
Blue row,
cell 4 |
Lilac row,
cell 1 |
Lilac row,
cell 2 |
Lilac row,
cell 3 |
| |
You can make all sorts of colors and placements of cells to make a fancy "quilt." You may need to use text to size the cells. But if you don't want some or all of the text to show, make the text the same color as the bgcolor.
In the body where you want the table, just build the table as you would normally. But put this line before the table tag: <div class="table2">. If you want a different table, be sure to close this </div> tag first.
Please read these tutorials in the order given below
Introduction to Colors on Web Pages
Part 1 - HSL Colors ~ Part 2 - HSLA Colors
Part 3 - RGB Colors with Alpha Channel
Part 4 - Hexidecimal Colors
Part 5 - RGBA for Table Cells
Part 6 - Border-Collapse: Separate
Parts 1-4 are about coloring the backgrounds of individual paragraphs. If you don't like the spaces that show between the different colored paragraphs, then try putting each paragraph within a table cell and coloring each cell with a different RGBA color. Simply substitute #td for the #p numbers. See Part 5 above.
|
