Tables

Tables represent relationships between data. Authors specify these relationships in the document language and specify their presentation in CSS, in two ways: visually and aurally.

Authors may specify the visual formatting of a table as a rectangular grid of cells. Rows and columns of cells may be organized into row groups and column groups. Rows, columns, row groups, row columns, and cells may have borders drawn around them (there are two border models in CSS2). Authors may align data vertically or horizontally within a cell and align data in all cells of a row or column.

Authors may also specify the aural rendering of a table; how headers and data will be spoken. In the document language, authors may label cells and groups of cells so that when rendered aurally, cell headers are spoken before cell data. In effect, this "serializes" the table: users browsing the table aurally hear a sequence of headers followed by data.

The preceding example shows how CSS works with HTML 4.0 elements; in HTML 4.0, the semantics of the various table elements (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, and TD) are well-defined. In other document languages (such as XML applications), there may not be pre-defined table elements. Therefore, CSS2 allows authors to "map" document language elements to table elements via the 'display' property. For example, the following rule makes the FOO element act like an HTML TABLE element and the BAR element act like a CAPTION element:

We discuss the various table elements in the following section. In this specification, the term table element refers to any element involved in the creation of a table. An "internal" table element is one that produces a row, row group, column, column group, or cell.

17.2 The CSS table model

The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table. In this model, a table consists of an optional caption and any number of rows of cells. The table model is said to be "row primary" since authors specify rows, not columns, explicitly in the document language. Columns are derived once all the rows have been specified -- the first cell of each row belongs to the first column, the second to the second column, etc.). Rows and columns may be grouped structurally and this grouping reflected in presentation (e.g., a border may be drawn around a group of rows).

Thus, the table model consists of tables, captions, rows, row groups, columns, column groups, and cells.

The CSS model does not require that the document language include elements that correspond to each of these components. For document languages (such as XML applications) that do not have pre-defined table elements, authors must map document language elements to table elements; this is done with the 'display' property. The following 'display' values assign table semantics to an arbitrary element:

Elements with 'display' set to 'table-column' or 'table-column-group' are not rendered (exactly as if they had 'display: none'), but they are useful, because they may have attributes which induce a certain style for the columns they represent.

User agents may ignore these 'display' property values for HTML documents, since authors should not alter an element's expected behavior.

17.2.1 Anonymous table objects

Document languages other than HTML may not contain all the elements in the CSS2 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. The missing elements generate anonymous objects (e.g., anonymous boxes in visual table layout) according to the following rules:

HTML user agents are not required to create anonymous objects according to the above rules.

17.3 Column selectors

Table cells may belong to two contexts: rows and columns. However, in the source document cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns.

17.4 Tables in the visual formatting model

In both cases, the table element generates an anonymous box that contains the table box itself and the caption's box (if present). The table and caption boxes retain their own content, padding, margin, and border areas, and the dimensions of the rectangular anonymous box are the smallest required to contain both. Vertical margins collapse where the table box and caption box touch. Any repositioning of the table must move the entire anonymous box, not just the table box, so that the caption follows the table.

17.4.1 Caption position and alignment

This property specifies the position of the caption box with respect to the table box. Values have the following meanings:

Captions above or below a 'table' element are formatted very much as if they were a block element before or after the table, except that (1) they inherit inheritable properties from the table, and (2) they are not considered to be a block box for the purposes of any 'compact' or 'run-in' element that may precede the table.

A caption that is above or below a table box also behaves like a block box for width calculations; the width is computed with respect to the width of the table box's containing block.

For a caption that is on the left or right side of a table box, on the other hand, a value other than 'auto' for 'width' sets the width explicitly, but 'auto' tells the user agent to chose a "reasonable width". This may vary between "the narrowest possible box" to "a single line", so we recommend that users do not specify 'auto' for left and right caption widths.

To align caption content horizontally within the caption box, use the 'text-align' property. For vertical alignment of a left or right caption box with respect to the table box, use the 'vertical-align' property. The only meaningful values in this case are 'top', 'middle', and 'bottom'. All other values are treated the same as 'top'.

17.5 Visual layout of table contents

Like other elements of the document language, internal table elements generate rectangular boxes with content, padding, and borders. They do not have margins, however.

The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules. These rules do not apply to HTML 4.0 or earlier HTML versions; HTML imposes its own limitations on row and column spans.

Note. Table cells may be relatively and absolutely positioned, but this is not recommended: positioning and floating remove a box from the flow, affecting table alignment.

Here are two examples. The first is assumed to occur in an HTML document:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

The second table is formatted as in the figure on the right. However, the HTML table's rendering is explicitly undefined by HTML, and CSS doesn't try to define it. User agents are free to render it, e.g., as in the figure on the left.

One table with overlapping
cells and one without [D]

On the left, one possible rendering of an erroneous HTML 4.0 table; on the right, the only possible formatting of a similar, non-HTML table.

17.5.1 Table layers and transparency

For the purposes of finding the background of each table cell, the different table elements may be thought of as being on six superimposed layers. The background set on an element in one of the layers will only be visible if the layers above it have a transparent background.

In the following example, the first row contains four cells, but the second row contains no cells, and thus the table background shines through, except where a cell from the first row spans into this row. The following HTML code and style rules

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2">iblings (in the document
tree) of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'caption'.

If a child T of a 'table-row' element P is not a 'table-cell'
element, an object corresponding to a 'table-cell' element will be
generated between P and T. This object spans all consecutive siblings
of T that are not 'table-cell' elements.


Example(s):
In this XML example, a 'table' element is assumed
to contain the HBOX element:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>


because the associated style sheet is:

HBOX { display: table-row }
VBOX { display: table-cell }



Example(s):
In this example, three 'table-cell' elements are assumed
to contain the text in the ROWs. Note that the text is further
encapsulated in anonymous inline boxes, as explained in visual formatting model:

<STACK>
  <ROW>This is the <D>top</D> row.</ROW>
  <ROW>This is the <D>middle</D> row.</ROW>
  <ROW>This is the <D>bottom</D> row.</ROW>
</STACK>


The style sheet is:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }




HTML user agents are not required to create
anonymous objects according to the above rules.

17.3 Column selectors

Table cells may belong to two contexts: rows and columns. However,
in the source document cells are descendants of rows, never of
columns. Nevertheless, some aspects of cells can be influenced by
setting properties on columns.

The following properties apply to column and column-group elements:


'border'

The various border properties apply to columns only if 'border-collapse' is set to
'collapse' on the table element. In that case, borders set on columns and
column groups are input to the conflict resolution algorithm
that selects the border styles at every cell edge.

'background'

The background properties set the background for cells in the
column, but only if both the cell and row have transparent
backgrounds. See "Table layers and
transparency."

'width'

The 'width' property gives the
minimum width for the column.

'visibility'

If the 'visibility' of a column is set to 'collapse', none of the
cells in the column are rendered, and cells that span into other
columns are clipped. In addition, the width of the table is diminished
by the width the column would have taken up. See "Dynamic effects" below. Other values for
'visibility' have no effect.


Example(s):
Here are some examples of style rules that set properties on
columns. The first two rules together implement the "rules" attribute
of HTML 4.0 with a value of "cols". The third rule makes the "totals"
column blue, the final two rules shows how to make a column a fixed
size, by using the fixed layout
algorithm.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }






17.4 Tables in the visual formatting model

In terms of the visual formatting model,
a table may behave like a block-level or replaced inline-level element. Tables have
content, padding, borders, and margins.

In both cases, the table element generates an anonymous box that contains the
table box itself and the caption's box (if present). The table and
caption boxes retain their own content, padding, margin, and border
areas, and the dimensions of the rectangular anonymous box are the
smallest required to contain both. Vertical margins collapse where
the table box and caption box touch. Any repositioning of the table
must move the entire anonymous box, not just the table box, so
that the caption follows the table.


   [D] 
Diagram of a
table with a caption above it; the bottom margin of the caption is
collapsed with the top margin of the table.


17.4.1 Caption position and alignment



'caption-side'


Value:   top | bottom | left | right | inherit
Initial:   top
Applies to:   'table-caption' elements
Inherited:   yes
Percentages:   N/A
Media:   visual





This property specifies the position of the caption box with
respect to the table box. Values have the following meanings:


top
Positions the caption box above the table box.
bottom
Positions the caption box below the table box.
left
Positions the caption box to the left of the table box.
right
Positions the caption box to the right of the table box.


Captions above or below a 'table' element are formatted very much as
if they were a block element before or after the table, except that
(1) they inherit inheritable properties from the table, and (2) they are
not considered to be a block box for the purposes of any
'compact' or 'run-in' element that may precede the table.

A caption that is above or below a table box also behaves like a
block box for width calculations; the width is computed with respect
to the width of the table box's containing block.

For a caption that is on the left or right side of a table box, on
the other hand, a value other than 'auto' for 'width' sets the width explicitly, but
'auto' tells the user agent to chose a "reasonable width".  This may
vary between "the narrowest possible box" to "a single line", so we
recommend that users do not specify 'auto' for left and right caption
widths.

To align caption content horizontally within the caption box, use
the 'text-align'
property. For vertical alignment of a left or right caption box with
respect to the table box, use the 'vertical-align' property. The
only meaningful values in this case are 'top', 'middle', and
'bottom'. All other values are treated the same as 'top'.

Example(s):
In this example, the 'caption-side' property places
captions below tables.  The caption will be as wide as the parent of
the table, and caption text will be left-justified.

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }



Example(s):
The following example shows how to put a caption in the left
margin. The table itself is centered, by setting its left and right
margins to 'auto', and the whole box with table and caption is shifted
into the left margin by the same amount as the width of the caption.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}


Assuming the width of the table is less than the available width,
the formatting will be similar to this:


   [D]
 Diagram
showing a centered table with the caption extending into the left
margin, as a result of a negative 'margin-left' property.




17.5 Visual layout of table contents

Like other elements of the document language, internal table
elements generate rectangular boxes with content, padding, and
borders. They do not have margins, however.

The visual layout of these boxes is governed by a rectangular,
irregular grid of rows and columns.  Each box occupies a whole number
of grid cells, determined according to the following rules.
These rules do not apply to HTML 4.0 or earlier HTML versions; 
HTML imposes its own limitations on row and column spans.



Each row box occupies one row of grid cells. Together, the row
boxes fill the table from top to bottom in the order they occur in the
source document (i.e., the table occupies exactly as
many grid rows as there are row elements).

A row group occupies the same grid cells as the rows it contains.

A column box occupies one or more columns of grid cells.  Column
boxes are placed next to each other in the order they occur. The first
column box may be either on the left or on the right, depending on the
value of the 'direction'
property of the table.

A column group box occupies the same grid cells as the columns it
contains. 

Cells may span several rows or columns. (Although CSS2 doesn't
define how the number of spanned rows or columns is determined, a user
agent may have special knowledge about the source document; a future
version of CSS may provide a way to express this knowledge in CSS
syntax.) Each cell is thus a rectangular box, one or more grid cells
wide and high. The top row of this rectangle is in the row specified
by the cell's parent. The rectangle must be as far to the left as
possible, but it may not overlap with any other cell box, and must be
to the right of all cells in the same row that are earlier in the
source document. (This constraint holds if the 'direction' property of
the table is 'ltr'; if the 'direction' is 'rtl', interchange
"left" and "right" in the previous sentence.)

A cell box cannot extend beyond the last row box of a table or
row-group; the
user agents must shorten it until it fits. 


Note.
Table cells may be relatively and absolutely positioned, but
this is not recommended: positioning and floating remove a box
from the flow, affecting table alignment.


Here are two examples. The first is assumed to occur in an HTML
document:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>


<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>


The second table is formatted as in the figure on the
right. However, the HTML table's rendering is explicitly undefined by
HTML, and CSS doesn't try to define it. User agents are free to render
it, e.g., as in the figure on the left.


   [D] 
On the left, one possible
rendering of an erroneous HTML 4.0 table; on the right, the only
possible formatting of a similar, non-HTML table.



17.5.1 Table layers and transparency

For the purposes of finding the background of each table cell, the
different table elements may be thought of as being on six
superimposed layers. The background set on an element in one of the
layers will only be visible if the layers above it have a transparent
background.


   [D] 
Schema of table layers.




The lowest layer is a single plane, representing the table box
itself. Like all boxes, it may be transparent.


The next layer contains the column groups. The columns groups are
as tall as the table, but they need not cover the whole table
horizontally.


On top of the column groups are the areas representing the column
boxes. Like column groups, columns are as tall as the table, but need
not cover the whole table horizontally.


Next is the layer containing the row groups. Each row group is as
wide as the table. Together, the row groups completely cover the table
from top to bottom.


The next to last layer contains the rows. The rows also cover the
whole table.


The topmost layer contains the cells themselves. As the figure
shows, although all rows contain the same number of cells, not every
cell may have specified content. These "empty" cells are transparent,
letting lower layers shine through.





In the following example, the first row contains four cells, but
the second row contains no cells, and thus the table background shines
through, except where a cell from the first row spans into this
row. The following HTML code and style rules

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2">iblings (in the document
tree) of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'caption'.

If a child T of a 'table-row' element P is not a 'table-cell'
element, an object corresponding to a 'table-cell' element will be
generated between P and T. This object spans all consecutive siblings
of T that are not 'table-cell' elements.


Example(s):
In this XML example, a 'table' element is assumed
to contain the HBOX element:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>


because the associated style sheet is:

HBOX { display: table-row }
VBOX { display: table-cell }



Example(s):
In this example, three 'table-cell' elements are assumed
to contain the text in the ROWs. Note that the text is further
encapsulated in anonymous inline boxes, as explained in visual formatting model:

<STACK>
  <ROW>This is the <D>top</D> row.</ROW>
  <ROW>This is the <D>middle</D> row.</ROW>
  <ROW>This is the <D>bottom</D> row.</ROW>
</STACK>


The style sheet is:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }




HTML user agents are not required to create
anonymous objects according to the above rules.

17.3 Column selectors

Table cells may belong to two contexts: rows and columns. However,
in the source document cells are descendants of rows, never of
columns. Nevertheless, some aspects of cells can be influenced by
setting properties on columns.

The following properties apply to column and column-group elements:


'border'

The various border properties apply to columns only if 'border-collapse' is set to
'collapse' on the table element. In that case, borders set on columns and
column groups are input to the conflict resolution algorithm
that selects the border styles at every cell edge.

'background'

The background properties set the background for cells in the
column, but only if both the cell and row have transparent
backgrounds. See "Table layers and
transparency."

'width'

The 'width' property gives the
minimum width for the column.

'visibility'

If the 'visibility' of a column is set to 'collapse', none of the
cells in the column are rendered, and cells that span into other
columns are clipped. In addition, the width of the table is diminished
by the width the column would have taken up. See "Dynamic effects" below. Other values for
'visibility' have no effect.


Example(s):
Here are some examples of style rules that set properties on
columns. The first two rules together implement the "rules" attribute
of HTML 4.0 with a value of "cols". The third rule makes the "totals"
column blue, the final two rules shows how to make a column a fixed
size, by using the fixed layout
algorithm.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }






17.4 Tables in the visual formatting model

In terms of the visual formatting model,
a table may behave like a block-level or replaced inline-level element. Tables have
content, padding, borders, and margins.

In both cases, the table element generates an anonymous box that contains the
table box itself and the caption's box (if present). The table and
caption boxes retain their own content, padding, margin, and border
areas, and the dimensions of the rectangular anonymous box are the
smallest required to contain both. Vertical margins collapse where
the table box and caption box touch. Any repositioning of the table
must move the entire anonymous box, not just the table box, so
that the caption follows the table.


   [D] 
Diagram of a
table with a caption above it; the bottom margin of the caption is
collapsed with the top margin of the table.


17.4.1 Caption position and alignment



'caption-side'


Value:   top | bottom | left | right | inherit
Initial:   top
Applies to:   'table-caption' elements
Inherited:   yes
Percentages:   N/A
Media:   visual





This property specifies the position of the caption box with
respect to the table box. Values have the following meanings:


top
Positions the caption box above the table box.
bottom
Positions the caption box below the table box.
left
Positions the caption box to the left of the table box.
right
Positions the caption box to the right of the table box.


Captions above or below a 'table' element are formatted very much as
if they were a block element before or after the table, except that
(1) they inherit inheritable properties from the table, and (2) they are
not considered to be a block box for the purposes of any
'compact' or 'run-in' element that may precede the table.

A caption that is above or below a table box also behaves like a
block box for width calculations; the width is computed with respect
to the width of the table box's containing block.

For a caption that is on the left or right side of a table box, on
the other hand, a value other than 'auto' for 'width' sets the width explicitly, but
'auto' tells the user agent to chose a "reasonable width".  This may
vary between "the narrowest possible box" to "a single line", so we
recommend that users do not specify 'auto' for left and right caption
widths.

To align caption content horizontally within the caption box, use
the 'text-align'
property. For vertical alignment of a left or right caption box with
respect to the table box, use the 'vertical-align' property. The
only meaningful values in this case are 'top', 'middle', and
'bottom'. All other values are treated the same as 'top'.

Example(s):
In this example, the 'caption-side' property places
captions below tables.  The caption will be as wide as the parent of
the table, and caption text will be left-justified.

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }



Example(s):
The following example shows how to put a caption in the left
margin. The table itself is centered, by setting its left and right
margins to 'auto', and the whole box with table and caption is shifted
into the left margin by the same amount as the width of the caption.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}


Assuming the width of the table is less than the available width,
the formatting will be similar to this:


   [D]
 Diagram
showing a centered table with the caption extending into the left
margin, as a result of a negative 'margin-left' property.




17.5 Visual layout of table contents

Like other elements of the document language, internal table
elements generate rectangular boxes with content, padding, and
borders. They do not have margins, however.

The visual layout of these boxes is governed by a rectangular,
irregular grid of rows and columns.  Each box occupies a whole number
of grid cells, determined according to the following rules.
These rules do not apply to HTML 4.0 or earlier HTML versions; 
HTML imposes its own limitations on row and column spans.



Each row box occupies one row of grid cells. Together, the row
boxes fill the table from top to bottom in the order they occur in the
source document (i.e., the table occupies exactly as
many grid rows as there are row elements).

A row group occupies the same grid cells as the rows it contains.

A column box occupies one or more columns of grid cells.  Column
boxes are placed next to each other in the order they occur. The first
column box may be either on the left or on the right, depending on the
value of the 'direction'
property of the table.

A column group box occupies the same grid cells as the columns it
contains. 

Cells may span several rows or columns. (Although CSS2 doesn't
define how the number of spanned rows or columns is determined, a user
agent may have special knowledge about the source document; a future
version of CSS may provide a way to express this knowledge in CSS
syntax.) Each cell is thus a rectangular box, one or more grid cells
wide and high. The top row of this rectangle is in the row specified
by the cell's parent. The rectangle must be as far to the left as
possible, but it may not overlap with any other cell box, and must be
to the right of all cells in the same row that are earlier in the
source document. (This constraint holds if the 'direction' property of
the table is 'ltr'; if the 'direction' is 'rtl', interchange
"left" and "right" in the previous sentence.)

A cell box cannot extend beyond the last row box of a table or
row-group; the
user agents must shorten it until it fits. 


Note.
Table cells may be relatively and absolutely positioned, but
this is not recommended: positioning and floating remove a box
from the flow, affecting table alignment.


Here are two examples. The first is assumed to occur in an HTML
document:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>


<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>


The second table is formatted as in the figure on the
right. However, the HTML table's rendering is explicitly undefined by
HTML, and CSS doesn't try to define it. User agents are free to render
it, e.g., as in the figure on the left.


   [D] 
On the left, one possible
rendering of an erroneous HTML 4.0 table; on the right, the only
possible formatting of a similar, non-HTML table.



17.5.1 Table layers and transparency

For the purposes of finding the background of each table cell, the
different table elements may be thought of as being on six
superimposed layers. The background set on an element in one of the
layers will only be visible if the layers above it have a transparent
background.


   [D] 
Schema of table layers.




The lowest layer is a single plane, representing the table box
itself. Like all boxes, it may be transparent.


The next layer contains the column groups. The columns groups are
as tall as the table, but they need not cover the whole table
horizontally.


On top of the column groups are the areas representing the column
boxes. Like column groups, columns are as tall as the table, but need
not cover the whole table horizontally.


Next is the layer containing the row groups. Each row group is as
wide as the table. Together, the row groups completely cover the table
from top to bottom.


The next to last layer contains the rows. The rows also cover the
whole table.


The topmost layer contains the cells themselves. As the figure
shows, although all rows contain the same number of cells, not every
cell may have specified content. These "empty" cells are transparent,
letting lower layers shine through.





In the following example, the first row contains four cells, but
the second row contains no cells, and thus the table background shines
through, except where a cell from the first row spans into this
row. The following HTML code and style rules

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2">iblings (in the document
tree) of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'caption'.

If a child T of a 'table-row' element P is not a 'table-cell'
element, an object corresponding to a 'table-cell' element will be
generated between P and T. This object spans all consecutive siblings
of T that are not 'table-cell' elements.


Example(s):
In this XML example, a 'table' element is assumed
to contain the HBOX element:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>


because the associated style sheet is:

HBOX { display: table-row }
VBOX { display: table-cell }



Example(s):
In this example, three 'table-cell' elements are assumed
to contain the text in the ROWs. Note that the text is further
encapsulated in anonymous inline boxes, as explained in visual formatting model:

<STACK>
  <ROW>This is the <D>top</D> row.</ROW>
  <ROW>This is the <D>middle</D> row.</ROW>
  <ROW>This is the <D>bottom</D> row.</ROW>
</STACK>


The style sheet is:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }




HTML user agents are not required to create
anonymous objects according to the above rules.

17.3 Column selectors

Table cells may belong to two contexts: rows and columns. However,
in the source document cells are descendants of rows, never of
columns. Nevertheless, some aspects of cells can be influenced by
setting properties on columns.

The following properties apply to column and column-group elements:


'border'

The various border properties apply to columns only if 'border-collapse' is set to
'collapse' on the table element. In that case, borders set on columns and
column groups are input to the conflict resolution algorithm
that selects the border styles at every cell edge.

'background'

The background properties set the background for cells in the
column, but only if both the cell and row have transparent
backgrounds. See "Table layers and
transparency."

'width'

The 'width' property gives the
minimum width for the column.

'visibility'

If the 'visibility' of a column is set to 'collapse', none of the
cells in the column are rendered, and cells that span into other
columns are clipped. In addition, the width of the table is diminished
by the width the column would have taken up. See "Dynamic effects" below. Other values for
'visibility' have no effect.


Example(s):
Here are some examples of style rules that set properties on
columns. The first two rules together implement the "rules" attribute
of HTML 4.0 with a value of "cols". The third rule makes the "totals"
column blue, the final two rules shows how to make a column a fixed
size, by using the fixed layout
algorithm.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }






17.4 Tables in the visual formatting model

In terms of the visual formatting model,
a table may behave like a block-level or replaced inline-level element. Tables have
content, padding, borders, and margins.

In both cases, the table element generates an anonymous box that contains the
table box itself and the caption's box (if present). The table and
caption boxes retain their own content, padding, margin, and border
areas, and the dimensions of the rectangular anonymous box are the
smallest required to contain both. Vertical margins collapse where
the table box and caption box touch. Any repositioning of the table
must move the entire anonymous box, not just the table box, so
that the caption follows the table.


   [D] 
Diagram of a
table with a caption above it; the bottom margin of the caption is
collapsed with the top margin of the table.


17.4.1 Caption position and alignment



'caption-side'


Value:   top | bottom | left | right | inherit
Initial:   top
Applies to:   'table-caption' elements
Inherited:   yes
Percentages:   N/A
Media:   visual





This property specifies the position of the caption box with
respect to the table box. Values have the following meanings:


top
Positions the caption box above the table box.
bottom
Positions the caption box below the table box.
left
Positions the caption box to the left of the table box.
right
Positions the caption box to the right of the table box.


Captions above or below a 'table' element are formatted very much as
if they were a block element before or after the table, except that
(1) they inherit inheritable properties from the table, and (2) they are
not considered to be a block box for the purposes of any
'compact' or 'run-in' element that may precede the table.

A caption that is above or below a table box also behaves like a
block box for width calculations; the width is computed with respect
to the width of the table box's containing block.

For a caption that is on the left or right side of a table box, on
the ot

17 Tables

17.1 Introduction to tables

17.2 The CSS table model

17.2.1 Anonymous table objects

17.3 Column selectors

17.4 Tables in the visual formatting model

17.4.1 Caption position and alignment

17.5 Visual layout of table contents

17.5.1 Table layers and transparency

17.3 Column selectors

17.4 Tables in the visual formatting model

17.4.1 Caption position and alignment

17.5 Visual layout of table contents

17.5.1 Table layers and transparency

17.3 Column selectors

17.4 Tables in the visual formatting model

17.4.1 Caption position and alignment

17.5 Visual layout of table contents

17.5.1 Table layers and transparency

17.3 Column selectors

17.4 Tables in the visual formatting model

17.4.1 Caption position and alignment

Value:	top \| bottom \| left \| right \| inherit
Initial:	top
Applies to:	'table-caption' elements
Inherited:	yes
Percentages:	N/A
Media:	visual