NOTE: Please see this page first if you came here from elsewhere.
HEXADECIMALLY COLORED TABLE
No Border, No Cellspacing
| table 1, row 1, cell 1 |
table 1, row 1, cell 2 |
table 1, row 1, cell 3 |
| table 1, row 2, cell 1 |
table 1, row 3, cell 1 - totally contains table 2
| table 2, row 1, cell 1 |
table 2, row 1, cell 2 |
table 2, row 1, cell 3 |
| table 2, row 2, cell 1 | |
table 1, row 3, cell 2 |
Table 1 bgcolor="#666666"
Table 2 no bgcolor specified
TD (cell) bgcolors are written as "#??????"
CELLS COLORED WITH RGBA
| table 3, row 1, cell 1 |
table 3, row 1, cell 2 |
table 3, row 1, cell 3 |
| table 3, row 2, cell 1 |
table 3, row 3, cell 1 - totally contains table 4
| table 4, row 1, cell 1 |
table 4, row 1, cell 2 |
table 4, row 1, cell 3 |
| table 4, row 2, cell 1 | |
table 3, row 3, cell 2 |
Table 3 bgcolor="white"
Table 4 bgcolor="white"
Table 3, row 3, cell 1 bgcolor="#666666"
TD bgcolors are specified in the head tag as RGBA
Why the difference? Because if the whole Table 3 had the dark gray bgcolor, as does Table 1, then all the cell colors in Table 3 would have been dulled/grayed, too, since their codes include various transparencies, allowing the gray to show through. The reason the bgcolor dark gray does NOT show through the cell colors of Table 1, is that those colors are NOT transparent.
UPDATE: In 2017, I'm visiting this page after several years. Unfortunately, now the transparency settings for the RGBA no longer work. So right now, there's no difference between the tables. I'll have to do some investigating to find out how to make these colors transparent again.
These examples show two different ways of obtaining very similar results. Which one you want to use is a matter of personal choice.
Here's an absolutely fantastic color chart. Arranged alphabetically by color names, it shows the hex, rgb according to each channel, and saturation and lightness of each. In this way, if you are using the HSL or any other color management system, you can easily find what you need to put into each CSS style color line in the head. http://www.colorhexa.com/color-names.
CODES
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.
|
