COLORS ON WEB PAGES
Part 5 - RGBA in
TABLE CELLS


by Florence W Deems

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.

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.

Monday 26th of May 2014 10:04:01 AM

See Flo's Other Tutes


by
~ Arbor Hosting ~