Long description of example of cell background calculation

This diagram shows the six superimposed "layers" of the CSS table model. This diagram illustrates the algorithm for calculating a cell's final background.

The six layers are depicted as prioritized rectangles floating one above the other in a three-dimensional space (i.e., layers are drawn as rhombuses to give the impression of space). The rectangles represent, from top to bottom: cells, rows, row groups, columns, column groups, and the table itself.

The diagram shows how, looking down on the six rectangles, one may compute the background color of each cell. On the top layer, each cell that specifies a background is shown as a gray box with a black border. A cell without a background color in the top layer is depicted as a "window" onto the lower layers, which give its final background color. The same visual metaphor is used at each layer, so a row without a background acts as a window onto the row group layer, etc.

Return to image.