Table Backgrounds
‘background-color’ (and related properties) on table elements are applied as if the table is made up of multiple layers. From back to front, the ‘layers’ are derived from: <CSS:table>; <CSS:table-column> with a ‘number-columns-spanned’ value greater than 1; <CSS:table-column> with a ‘number-columns-spanned’ value greater than 1; <CSS:table-column>; <CSS:table-header>, <CSS:table-body>, and <CSS:table-footer> (which do not overlap); <CSS:table-row>; and <CSS:table-cell>. A layer is visible only when all of the layers above it have a transparent background.
‘background-color’ is specified on most of the elements in the following table. Each element type has a different value. The property is omitted on some elements to allow the color from underlying layers to be seen. The <CSS:table-body> background is transparent to allow the background colors from <CSS:table> and <CSS:table-column> to be seen.

The background layers in this example are simulated using PDF layers. If you are viewing this in a PDF viewer that supports layers, you can enable and disable individual layers to see the effect of each one.

header R1C1 header R1C2 header R1C3 header R1C4
header R2C1 header R2C2 header R2C3 header R2C4
body R1C1 body R1C2 body R1C3 body R1C4
body R2C1 body R2C2 body R2C3 body R2C4
body R3C1 body R3C2-R4C3 body R3C4
body R4C1 body R4C4
body R5C1 body R5C2 body R5C4
body R6C1 body R6C4
footer R1C1 footer R1C2 footer R1C3 footer R1C4
footer R2C1 footer R2C2 footer R2C3 footer R2C4
CSS Style Applied to
<table> #FFFF99
<col> #FFC2A3
<thead> #FFADC9
CSS Style Applied to
<tfoot> #D6C2FF
<tr> #CCDDFF
<td> #D4FFFF