8000 csswg-drafts/css2/tables.src at 72acb70bf145f3d455bcac730a1325b69265d827 · w3c/csswg-drafts · GitHub
Skip to content

tables.src

Latest commit

 

History

History
1489 lines (1214 loc) · 58.6 KB

tables.src

File metadata and controls

1489 lines (1214 loc) · 58.6 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<!-- $Id: tables.src,v 2.118 2010-04-19 16:12:36 bbos Exp $ -->
<head>
<title>Tables</title>
</head>
<body>
<h1>Tables</h1>
<h2><a name="tables-intro">Introduction to tables</a></h2>
<p>This chapter defines the processing model for tables in CSS. Part
of this processing model is the layout. For the layout, this chapter
introduces two algorithms; the first, the fixed table layout
algorithm, is well-defined, but the second, the automatic table layout
algorithm, is not fully defined by this specification.
<p>For the automatic table layout algorithm, some widely deployed
implementations have achieved relatively close interoperability.
<p><span class="index-def" title="tables">Table</span> layout can be
used to represent tabular relationships between data. Authors specify
these relationships in the <a href="conform.html#doclanguage">document
language</a> and can specify their <em>presentation</em> using
CSS&nbsp;2.1.
<p>In a visual medium, CSS tables can also be used to achieve specific
layouts. In this case, authors should not use table-related elements
in the document language, but should apply the CSS to the relevant
structural elements to achieve the desired layout.
<p>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, column
groups, and cells may have borders drawn around them (there are two
border models in CSS&nbsp;2.1). Authors may align data vertically or
horizontally within a cell and align data in all cells of a row or
column.
<div class="example"><p>
Here is a simple three-row, three-column
table described in HTML 4:
<pre class="html-example">
&lt;TABLE&gt;
&lt;CAPTION&gt;This is a simple 3x3 table&lt;/CAPTION&gt;
&lt;TR id="row1"&gt;
&lt;TH&gt;Header 1 &lt;TD&gt;Cell 1 &lt;TD&gt;Cell 2
&lt;TR id="row2"&gt;
&lt;TH&gt;Header 2 &lt;TD&gt;Cell 3 &lt;TD&gt;Cell 4
&lt;TR id="row3"&gt;
&lt;TH&gt;Header 3 &lt;TD&gt;Cell 5 &lt;TD&gt;Cell 6
&lt;/TABLE&gt;
</pre>
<p>This code creates one table (the TABLE element), three
rows (the TR elements), three header cells (the TH elements),
and six data cells (the TD elements). Note that the three columns
of this example are specified implicitly: there are as many
columns in the table as required by header and data cells.
<p>The following CSS rule centers the text horizontally in the header
cells and presents the text in the header cells with a bold font
weight:
<pre>
th { text-align: center; font-weight: bold }
</pre>
<p>The next rules align the text of the header cells on their baseline
and vertically center the text in each data cell:
<pre>
th { vertical-align: baseline }
td { vertical-align: middle }
</pre>
<p>The next rules specify that the top row will be surrounded by a 3px
solid blue border and each of the other rows will be surrounded by a
1px solid black border:
<pre>
table { border-collapse: collapse }
tr#row1 { border: 3px solid blue }
tr#row2 { border: 1px solid black }
tr#row3 { border: 1px solid black }
</pre>
<p>Note, however, that the borders around the rows overlap where the
rows meet. What color (black or blue) and thickness (1px or 3px) will
the border between row1 and row2 be? We discuss this in the section on
<a href="#border-conflict-resolution">border conflict resolution.</a>
<p>The following rule puts the table caption above the table:
<pre>
caption { caption-side: top }
</pre>
</div>
<p>The preceding example shows how CSS works with HTML 4 elements;
in HTML 4, 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, CSS&nbsp;2.1 allows
authors to <span class="index-inst" title="mapping elements to table
parts">"map"</span> document language elements to table elements via
the <span class="propinst-display">'display'</span> 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:</p>
<PRE class="example">
FOO { display : table }
BAR { display : table-caption }
</pre>
<p><a name="internal"></a> We discuss the various table elements in the
following section. In
this specification, the term <span class="index-def" title="table
element"><dfn>table element</dfn></span> refers to any element
involved in the creation of a table. An <span class="index-def"
title="internal table element|table element::internal"><dfn id="internal-table-element">internal
table element</dfn></span> is one that produces a row, row group, column,
column group, or cell.
<h2><a name="table-display">The CSS table model</a></h2>
<p>The CSS table model is based on the HTML4 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).
<p>Thus, the table model consists of tables, captions, rows, row
groups, columns, column groups, and cells.
<p>The CSS model does not require that the <a
href="conform.html#doclanguage">document language</a> 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 <span
class="propinst-display">'display'</span> property. The following
<span class="propinst-display">'display'</span> values assign table
formatting rules to an arbitrary element:
<dl>
<dt><strong><span class="index-def" title="table"><a
class="value-def" name="value-def-table">table</a></span></strong>
(In HTML: TABLE) <dd>Specifies that an element defines a <a
href="visuren.html#block-level">block-level</a> table: it is a
rectangular block that participates in a <a
href="visuren.html#block-formatting">block formatting context</a>.
<dt><strong><span class="index-def" title="inline-table"><a
class="value-def"
name="value-def-inline-table">inline-table</a></span></strong> (In
HTML: TABLE) <dd>Specifies that an element defines an <a
href="visuren.html#inline-level">inline-level</a> table: it is a
rectangular block that participates in an <a
href="visuren.html#inline-formatting">inline formatting
context</a>).
<dt><strong><span class="index-def" title="table-row"><a
class="value-def"
name="value-def-table-row">table-row</a></span></strong> (In HTML:
TR) <dd>Specifies that an element is a row of cells.
<dt><strong><span class="index-def" title="table-row-group"><a
class="value-def"
name="value-def-table-row-group">table-row-group</a></span></strong>
(In HTML: TBODY) <dd>Specifies that an element groups one or more
rows.
<dt><strong><span class="index-def" title="table-header-group"><a
class="value-def"
name="value-def-table-header-group">table-header-group</a></span></strong>
(In HTML: THEAD) <dd>Like 'table-row-group', but for visual
formatting, the row group is always displayed before all other rows
and row groups and after any top captions. Print user agents may
repeat header rows on each page spanned by a table. If a table
contains multiple elements with 'display: table-header-group', only
the first is rendered as a header; the others are treated as if they
had 'display: table-row-group'.
<dt><strong><span class="index-def" title="table-footer-group"><a
class="value-def"
name="value-def-table-footer-group">table-footer-group</a></span></strong>
(In HTML: TFOOT) <dd>Like 'table-row-group', but for visual
formatting, the row group is always displayed after all other rows
and row groups and before any bottom captions. Print user agents may
repeat footer rows on each page spanned by a table. If a table
contains multiple elements with 'display: table-footer-group', only
the first is rendered as a footer; the others are treated as if they
had 'display: table-row-group'.
<dt><strong><span class="index-def" title="table-column"><a
class="value-def"
name="value-def-table-column">table-column</a></span></strong> (In
HTML: COL) <dd>Specifies that an element describes a column of
cells.
<dt><strong><span class="index-def" title="table-column-group"><a
class="value-def"
name="value-def-table-column-group">table-column-group</a></span></strong>
(In HTML: COLGROUP) <dd>Specifies that an element groups one or more
columns.
<dt><strong><span class="index-def" title="table-cell"><a
class="value-def"
name="value-def-table-cell">table-cell</a></span></strong> (In HTML:
TD, TH) <dd>Specifies that an element represents a table cell.
<dt><strong><span class="index-def" title="table-caption"><a
class="value-def"
name="value-def-table-caption">table-caption</a></span></strong> (In
HTML: CAPTION) <dd>Specifies a caption for the table. All elements
with 'display: table-caption' must be rendered, as described in
<a href="#model">section 17.4.</a>
</dl>
<p>Replaced elements with these <span
class="propinst-display">'display'</span> values are treated as their
given display types during layout. For example, an image that is set
to 'display: table-cell' will fill the available cell space, and its
dimensions might contribute towards the table sizing algorithms, as
with an ordinary cell.
<p>Elements with <span class="propinst-display">'display'</span> 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.
<p>The <a href="sample.html">default style sheet for HTML4</a>
in the appendix illustrates the use of these values for HTML4:
<pre class="example">
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
</pre>
<p>User agents may <a href="syndata.html#ignore">ignore</a> these
<span class="propinst-display">'display'</span> property values for
HTML table elements, since HTML tables may be rendered using other
algorithms intended for backwards compatible rendering. However, this
is not meant to discourage the use of 'display: table' on other,
non-table elements in HTML.
<h3><a name="anonymous-boxes">Anonymous table objects</a></h3>
<p>Document languages other than HTML may not contain all the elements
in the CSS&nbsp;2.1 table model. In these cases, the "missing"
elements must be assumed in order for the table model to work. Any
table element will automatically generate necessary anonymous table
objects around itself, consisting of at least three nested objects
corresponding to a 'table'/'inline-table' element, a 'table-row'
element, and a 'table-cell' element. Missing elements generate <a
href="visuren.html#anonymous">anonymous</a> objects (e.g., anonymous
boxes in visual table layout) according to the following rules:
<ol>
<li>If the parent P of a 'table-cell' box T is not a
'table-row', a box corresponding to a 'table-row' will be
generated between P and T. This box will span all consecutive
'table-cell' sibling boxes of T.
<li>If the parent P of a 'table-row' box T is not a 'table',
'inline-table', 'table-header-group', 'table-footer-group' or
'table-row-group' box, a box corresponding to a 'table'
element will be generated between P and T.
If P is an 'inline' box, then the generated box must be an
'inline-table' box instead of a 'table' box.
This box will span all
consecutive sibling boxes of T that require a
'table' parent: 'table-row', 'table-row-group',
'table-header-group', 'table-footer-group', 'table-column',
'table-column-group', and 'table-caption'. T and T's siblings may
also be anonymous 'table-row' boxes generated by rule&nbsp;1.
<li>If the parent P of a 'table-column' box T is not a 'table',
'inline-table', or 'table-column-group' box, a box
corresponding to a 'table' element will be generated between P and
T.
If P is an 'inline' box, then the generated box must be an
'inline-table' box instead of a 'table' box.
This box will span all consecutive sibling boxes
of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'table-caption', including
any anonymous 'table-row' boxes generated by rule&nbsp;1.
<li>If the parent P of a 'table-row-group' (or 'table-header-group',
'table-footer-group', or 'table-column-group' or 'table-caption')
box T is not a 'table' or 'inline-table', a box
corresponding to a 'table' element will be generated between P and
T.
If P is an 'inline' box, then the generated box must be an
'inline-table' box instead of a 'table' box.
This box will span all consecutive sibling boxes
of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'table-caption', including
any anonymous 'table-row' boxes generated by rule&nbsp;1.
<li>If a child T of a 'table', 'inline-table', 'table-row-group',
'table-header-group', 'table-footer-group', or 'table-row' box is an
anonymous inline box that contains only white space, then it is
treated as if it had 'display: none'.
<li>If a child T of a 'table' box (or 'inline-table') P is not a
'table-row-group', 'table-header-group', 'table-footer-group',
'table-caption', 'table-column', 'table-column-group' or 'table-row'
box, a box corresponding to a 'table-row' element will be
generated between P and T. This box spans all consecutive
siblings of T that are not 'table-row-group', 'table-header-group',
'table-footer-group', 'table-caption', 'table-column',
'table-column-group' or 'table-row' boxes.
<li>If a child T of a 'table-row-group' box (or
'table-header-group' or 'table-footer-group') P is not a 'table-row'
box, a box corresponding to a 'table-row' element will be
generated between P and T. This box spans all consecutive
siblings of T that are not 'table-row' boxes.
<li>If a child T of a 'table-row' box P is not a 'table-cell'
box, a box corresponding to a 'table-cell' element will be
generated between P and T. This box spans all consecutive
siblings of T that are not 'table-cell' boxes.
</ol>
<div class="example">
<p>In this XML example, a 'table' element is assumed to contain the
HBOX element:
<pre class="xml-example">
&lt;HBOX&gt;
&lt;VBOX&gt;George&lt;/VBOX&gt;
&lt;VBOX&gt;4287&lt;/VBOX&gt;
&lt;VBOX&gt;1998&lt;/VBOX&gt;
&lt;/HBOX&gt;
</pre>
<p>because the associated style sheet is:
<pre class="example">
HBOX { display: table-row }
VBOX { display: table-cell }
</pre>
</div>
<div class="example">
<p>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 <a
href="visuren.html#anonymous">visual formatting model</a>:
<pre class="xml-example">
&lt;STACK&gt;
&lt;ROW&gt;This is the &lt;D&gt;top&lt;/D&gt; row.&lt;/ROW&gt;
&lt;ROW&gt;This is the &lt;D&gt;middle&lt;/D&gt; row.&lt;/ROW&gt;
&lt;ROW&gt;This is the &lt;D&gt;bottom&lt;/D&gt; row.&lt;/ROW&gt;
&lt;/STACK&gt;
</pre>
<p>The style sheet is:
<pre class="example">
STACK { display: inline-table }
ROW { display: table-row }
D { display: inline; font-weight: bolder }
</pre>
</div>
<h2><a name="columns">Columns</a></h2>
<p>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.
<p>The following properties apply to column and column-group elements:
<dl>
<dt><span class="propinst-border">'border'</span>
<dd>The various border properties apply to columns only if <span
class="propinst-border-collapse">'border-collapse'</span> is set
to 'collapse' on the table element. In that case, borders set on
columns and column groups are input to the <a
href="#border-conflict-resolution">conflict resolution
algorithm</a> that selects the border styles at every cell edge.
<dt><span class="propinst-background">'background'</span>
<dd>The background properties set the background for cells in the
column, but only if both the cell and row have transparent
backgrounds. See <a href="#table-layers">"Table layers and
transparency."</a>
<dt><span class="propinst-width">'width'</span>
<dd>The <span class="propinst-width">'width'</span> property gives
the minimum width for the column.
<dt><span class="propinst-visibility">'visibility'</span>
<dd>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 <a
href="#dynamic-effects">"Dynamic effects"</a> below. Other values
for 'visibility' have no effect.
</dl>
<div class="example">
<p>Here are some examples of style rules that set properties on
columns. The first two rules together implement the "rules" attribute
of HTML 4 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 <a href="#fixed-table-layout">fixed layout
algorithm</a>.
<pre>
col { border-style: none solid }
table { border-style: hidden }
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }
</pre>
</div>
<h2><a name="model">Tables in the visual formatting model</a></h2>
<p>In terms of the visual formatting model, a table can behave like a
<a href="visuren.html#block-level">block-level</a> (for 'display:
table') or <a href="visuren.html#inline-level">inline-level</a> (for
'display: inline-table') element.
<p>In both cases, the table box generates an anonymous box that
contains the table box itself and any caption boxes (in document
order). The caption boxes are block-level boxes that retain their own
content, padding, margin, and border areas, and are rendered as normal
blocks inside the anonymous box. Whether the caption boxes are placed
before or after the table box is decided by the 'caption-side'
property, as described below.
<p>The anonymous box is a 'block' box if the table is block-level, and
an 'inline-block' box if the table is inline-level. The anonymous box
establishes a block formatting context. The table box (not the
anonymous box) is used when doing baseline
vertical alignment for an 'inline-table'. The width of the anonymous
box is the border-edge width of the table box inside it, as described
by section 17.5.2. Percentages on 'width' and 'height' on the table are
relative to the anonymous box's containing block, not the anonymous box
itself.
<p>The computed values of properties 'position', 'float', 'margin-*',
'top', 'right', 'bottom', and 'left' on the table box are used on the
anonymous box instead of the table box. The table box uses the initial
values for those properties.
<div class="figure">
<p><img src="images/table_container.png" alt="A table with a caption above
it">
<p class="caption">Diagram of a table with a caption above it.
</div>
<h3><a name="caption-position">Caption position and alignment</a></h3>
<!-- #include src=properties/caption-side.srb -->
<p>This property specifies the position of the caption box with
respect to the table box. Values have the following meanings:
<dl>
<dt><strong>top</strong> <dd>Positions the caption box above the
table box.
<dt><strong>bottom</strong> <dd>Positions the caption box below the
table box.
</dl>
<div class=note>
<p><em><strong>Note:</strong> CSS2 described a different width and
horizontal alignment behavior. That behavior will be introduced in
CSS3 using the values 'top-outside' and 'bottom-outside' on this
property.</em>
</div>
<p>To align caption content horizontally within the caption box, use
the <span class="propinst-text-align">'text-align'</span> property.
<div class="example">
<p>In this example, the <span
class="propinst-caption-side">'caption-side'</span> property places
captions below tables. The caption will be as wide as the parent of
the table, and caption text will be left-justified.
<pre>
caption { caption-side: bottom;
width: auto;
text-align: left }
</pre>
</div>
<h2><a name="table-layout">Visual layout of table contents</a></h2>
<p>Internal table elements generate rectangular <a
href="box.html#box-dimensions">boxes</a> with content and borders.
Cells have padding as well. Internal table elements do not have
margins.
<p>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 or earlier HTML versions; HTML imposes
its own limitations on row and column spans.
<ol>
<li>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).
<li>A row group occupies the same grid cells as the rows it
contains.
<li>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 <span
class="propinst-direction">'direction'</span> property of the table.
<li>A column group box occupies the same grid cells as the columns
it contains.
<li>Cells may span several rows or columns. (Although CSS&nbsp;2.1
does not define how the number of spanned rows or columns is
determined, a user agent may have special knowledge about the source
document; a future update 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 the part of the cell in the first
column it occupies must not overlap with any other cell box (i.e., a
row-spanning cell starting in a prior row), and the cell must be to
the right of all cells in the same row that are earlier in the
source document. If this position would cause a column-spanning cell
to overlap a row-spanning cell from a prior row, CSS does not define
the results: implementations may either overlap the cells (as is
done in many HTML implementations) or may shift the later cell to
the right to avoid such overlap. (This constraint holds if the
'direction' property of the table is 'ltr'; if the 'direction' is
'rtl', interchange "left" and "right" in the previous two
sentences.)
<li>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.
</ol>
<p>The edges of the rows, columns, row groups and column groups in the
<a href="#collapsing-borders">collapsing borders model</a> coincide
with the hypothetical grid lines on which the borders of the cells are
centered. (And thus, in this model, the rows together exactly cover
the table, leaving no gaps; ditto for the columns.) In the <a
href="#separated-borders">separated borders model,</a> the edges
coincide with the <a href="box.html#border-edge">border edges</a> of
cells. (And thus, in this model, there may be gaps between the rows,
columns, row groups or column groups, corresponding to the <span
class="propinst-border-spacing">'border-spacing'</span> property.)
<div class="note">
<p><em><strong>Note.</strong> Positioning and floating of table cells
can cause them not to be table cells anymore, according to the rules
in <a href="visuren.html#dis-pos-flo">section 9.7</a>. When floating
is used, the <a>rules on anonymous table objects</a> may cause an
anonymous cell object to be created as well.</em>
</div>
<div class="html-example">
<p>Here is an example illustrating rule 5. The following illegal
(X)HTML snippet defines conflicting cells:
<pre>
&lt;table&gt;
&lt;tr&gt;&lt;td&gt;1 &lt;/td&gt;&lt;td rowspan="2"&gt;2 &lt;/td&gt;&lt;td&gt;3 &lt;/td&gt;&lt;td&gt;4 &lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan="2"&gt;5 &lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>User agents are free to visually overlap the cells, as in the
figure on the left, or to shift the cell to avoid the visual
overlap, as in the figure on the right.
<div class="figure">
<p><img src="images/table-overlap.png" alt="One table with overlapping
cells and one without"> <p class="caption">Two possible
renderings of an erroneous HTML table.
</div>
</div>
<h3><a name="table-layers">Table layers and transparency</a></h3>
<p>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.
<div class="figure">
<p><img src="images/tbl-layers.png" alt="schema of table layers">
<p class="caption">Schema of table layers.
</div>
<ol>
<li>The lowest layer is a single plane, representing the table box
itself. Like all boxes, it may be transparent.
<li>The next layer contains the column groups. Each column group
extends from the top of the cells in the top row to the bottom of
the cells on the bottom row and from the left edge of its leftmost
column to the right edge of its rightmost column. The background
covers exactly the full area of all cells that originate in the
column group, even if they span outside the column group, but this
difference in area does not affect background image positioning.
<li>On top of the column groups are the areas representing the
column boxes. Each column is as tall as the column groups and as
wide as a normal (single-column-spanning) cell in the column. The
background covers exactly the full area of all cells that originate
in the column, even if they span outside the column, but this
difference in area does not affect background image positioning.
<li>Next is the layer containing the row groups. Each row group
extends from the top left corner of its topmost cell in the first
column to the bottom right corner of its bottommost cell in the last
column.
<li>The next to last layer contains the rows. Each row is as wide as
the row groups and as tall as a normal (single-row-spanning) cell in
the row. As with columns, the background covers exactly the full
area of all cells that originate in the row, even if they span
outside the row, but this difference in area does not affect
background image positioning.
<li>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.
In the <a href="#separated-borders">separated borders model</a>
(<span class="propinst-border-collapse">'border-collapse'</span> is
'separate'), if the value of their <span
class="propinst-empty-cells">'empty-cells'</span> property is 'hide'
these "empty" cells are transparent through the cell, row, row
group, column and column group backgrounds, letting the table
background show through.
</ol>
<p>A "missing cell" is a cell in the row/column grid that is not
occupied by an element or pseudo-element. Missing cells are rendered
as if an anonymous table-cell box occupied their position in the grid.
<div class="html-example">
<p>In the following example, the first row contains four non-empty
cells, but the second row contains only one non-empty cell, 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
<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Table example&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
TABLE { background: #ff0; border: solid black;
empty-cells: hide }
TR.top { background: red }
TD { border: solid black }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;TABLE&gt;
&lt;TR CLASS="top"&gt;
&lt;TD&gt; 1
&lt;TD rowspan="2"&gt; 2
&lt;TD&gt; 3
&lt;TD&gt; 4
&lt;TR&gt;
&lt;TD&gt; 5
&lt;TD&gt;
&lt;/TABLE&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
<p>might be formatted as follows:
<div class="figure">
<p><img src="images/tbl-empty.png" alt="Table with three empty cells
in bottom row">
<p class="caption">Table with empty cells in the bottom row.
</div>
</div>
<p>Note that if the table has 'border-collapse: separate', the
background of the area given by the <span
class="propinst-border-spacing">'border-spacing'</span> property is
always the background of the table element. See <a
href="#separated-borders">the separated borders model</a>.
<h3><a name="width-layout">Table width algorithms:</a>
the <span class="propinst-table-layout">'table-layout'</span>
property</h3>
<p>CSS does not define an "optimal" layout for tables since, in many
cases, what is optimal is a matter of taste. CSS does define
constraints that user agents must respect when laying out a table.
User agents may use any algorithm they wish to do so, and are free to
prefer rendering speed over precision, except when the "fixed layout
algorithm" is selected.
<p>Note that this section overrides the rules that apply to
calculating widths as described in <a
href="visudet.html#Computing_widths_and_margins">section 10.3</a>. In
particular, if the margins of a table are set to '0' and the width to
'auto', the table will not automatically size to fill its containing
block. However, once the calculated value of 'width' for the table is
found (using the algorithms given below or, when appropriate, some
other UA dependent algorithm) then the other parts of section 10.3 do
apply. Therefore a table <em>can</em> be centered using left and right
'auto' margins, for instance.
<p>Future updates of CSS may introduce ways of making tables
automatically fit their containing blocks.
<!-- #include src=properties/table-layout.srb -->
<p>The <span class="propinst-table-layout">'table-layout'</span>
property controls the algorithm used to lay out the table cells, rows,
and columns. Values have the following meaning:
<dl>
<dt><strong>fixed</strong> <dd>Use the fixed table layout algorithm
<dt><strong>auto</strong> <dd>Use any automatic table layout
algorithm
</dl>
<p>The two algorithms are described below.
<h4><a name="fixed-table-layout">Fixed table layout</a></h4>
<p>With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the cells; it only depends on the
table's width, the width of the columns, and borders or cell spacing.
<p>The table's width may be specified explicitly with the <span
class="propinst-width">'width'</span> property. A value of 'auto' (for
both 'display: table' and 'display: inline-table') means use the <a
href="#auto-table-layout">automatic table layout</a> algorithm.
However, if the table is a block-level table ('display: table') in
normal flow, a UA may (but does not have to) use the algorithm of <a
href="visudet.html#blockwidth">10.3.3</a> to compute a width and apply
fixed table layout even if the specified width is 'auto'.
<div class="example">
<p>If a UA supports fixed table layout when 'width' is 'auto', the
following will create a table that is 4em narrower than its containing
block:
<pre>
table { table-layout: fixed;
margin-left: 2em;
margin-right: 2em }
</pre>
</div>
<p>In the fixed table layout algorithm, the width of each column is
determined as follows:
<ol>
<li>A column element with a value other than 'auto' for the <span
class="propinst-width">'width'</span> property sets the width for
that column.
<li>Otherwise, a cell in the first row with a value other than
'auto' for the <span class="propinst-width">'width'</span> property
determines the width for that column. If the cell spans more than
one column, the width is divided over the columns.
<li>Any remaining columns equally divide the remaining horizontal
table space (minus borders or cell spacing).
</ol>
<p>The width of the table is then the greater of the value of the
<span class="propinst-width">'width'</span> property for the table
element and the sum of the column widths (plus cell spacing or
borders). If the table is wider than the columns, the extra space
should be distributed over the columns.
<p>If a subsequent row has more columns than the greater of the number
determined by the table-column elements and the number determined by
the first row, then
additional columns may not be rendered. CSS&nbsp;2.1 does not define
the width of the columns and the table if they <em>are</em> rendered.
When using 'table-layout:
fixed', authors should not omit columns from the first row.
<p>In this manner, the user agent can begin to lay out the table once
the entire first row has been received. Cells in subsequent rows do
not affect column widths. Any cell that has content that overflows
uses the <span class="propinst-overflow">'overflow'</span> property to
determine whether to clip the overflow content.
<h4><a name="auto-table-layout">Automatic table layout</a></h4>
<p>In this algorithm (which generally requires no more than two
passes), the table's width is given by the width of its columns (and
intervening <a href="#borders">borders</a>). This algorithm reflects
the behavior of several popular HTML user agents at the writing of
this specification. UAs are not required to implement this algorithm
to determine the table layout in the case that <span
class="propinst-table-layout">'table-layout'</span> is 'auto'; they
can use any other algorithm even if it results in different behavior.
<p>Input to the automatic table layout must only include the width of
the containing block and the content of, and any CSS properties set
on, the table and any of its descendants.
<div class=note>
<p><em><strong>Note.</strong> This may be defined in more detail in
CSS3.</em>
</div>
<p><em>The remainder of this section is non-normative.</em>
<p>This algorithm may be inefficient since it requires the user agent
to have access to all the content in the table before determining the
final layout and may demand more than one pass.
<p>Column widths are determined as follows:
<ol>
<li><p>Calculate the minimum content width (MCW) of each cell: the
formatted content may span any number of lines but may not overflow
the cell box. If the specified <span
class="propinst-width">'width'</span> (W) of the cell is greater
than MCW, W is the minimum cell width. A value of 'auto' means that
MCW is the minimum cell width.
<p>Also, calculate the "maximum" cell width of each cell: formatting
the content without breaking lines other than where explicit line
breaks occur.
<li><p>For each column, determine a maximum and minimum column width
from the cells that span only that column. The minimum is that
required by the cell with the largest minimum cell width (or the
column <span class="propinst-width">'width'</span>, whichever is
larger). The maximum is that required by the cell with the largest
maximum cell width (or the column <span
class="propinst-width">'width'</span>, whichever is larger).
<li><p>For each cell that spans more than one column, increase the
minimum widths of the columns it spans so that together, they are at
least as wide as the cell. Do the same for the maximum widths. If
possible, widen all spanned columns by approximately the same
amount.
<li><p>For each column group element with a 'width' other than
'auto', increase the minimum widths of the columns it spans, so that
together they are at least as wide as the column group's 'width'.
</ol>
<p>This gives a maximum and minimum width for each column. Column
widths influence the final table width as follows:
<ol>
<li>If the 'table' or 'inline-table' element's <span
class="propinst-width">'width'</span> property has a computed value
(W) other than 'auto', the property's value as used for layout is
the greater of W and the minimum width required by all the columns
plus cell spacing or borders (MIN). If W is greater than MIN, the
extra width should be distributed over the columns.
<li>If the 'table' or 'inline-table' element has 'width: auto',
the table width used for layout is the greater of the table's
containing block width and MIN. However, if the maximum width
required by the columns plus cell spacing or borders (MAX) is less
than that of the containing block, use MAX.
</ol>
<p>A percentage value for a column width is relative to the table
width. If the table has 'width: auto', a percentage represents a
constraint on the column's width, which a UA should try to satisfy.
(Obviously, this is not always possible: if the column's width is
'110%', the constraint cannot be satisfied.)
<div class="note">
<p><em><strong>Note.</strong> In this algorithm, rows (and row
groups) and columns (and column groups) both constrain and are
constrained by the dimensions of the cells they contain. Setting the
width of a column may indirectly influence the height of a row, and
vice versa.</em>
</div>
<h3><a name="height-layout">Table height algorithms</a></h3>
<p>The height of a table is given by the <span
class="propinst-height">'height'</span> property for the 'table' or
'inline-table' element. A value of 'auto' means that the height is the
sum of the row heights plus any cell spacing or borders. Any other
value is treated as a minimum height. CSS 2.1 does not define how
extra space is distributed when the 'height' property causes the table
to be taller than it otherwise would be.
<strong>Note.</strong> Future
updates of CSS may specify this further.
<p>The height of a 'table-row' element's box is calculated once the
user agent has all the cells in the row available: it is the maximum
of the row's specified <span class="propinst-height">'height'</span>
and the minimum height (MIN) required by the cells. A <span
class="propinst-height">'height'</span> value of 'auto' for a
'table-row' means the row height used for layout is MIN. MIN depends
on cell box heights and cell box alignment (much like the calculation
of a <a href="visudet.html#line-height">line box</a> height).
CSS&nbsp;2.1 does not define how the height of table cells and table
rows is calculated when their height is specified using percentage
values. CSS&nbsp;2.1 does not define the meaning of <span
class="propinst-height">'height'</span> on row groups.
<p>In CSS&nbsp;2.1, the height of a cell box is the maximum of the
table cell's <span class="propinst-height">'height'</span> property
and the minimum height required by the content (MIN). A value of
'auto' for <span class="propinst-height">'height'</span> implies that
the value MIN will be used for layout.
<p>CSS&nbsp;2.1 does not specify how cells that span more than one row
affect row height calculations except that the sum of the row heights
involved must be great enough to encompass the cell spanning the rows.
<p>The <span class="propinst-vertical-align">'vertical-align'</span>
property of each table cell determines its alignment within the row.
Each cell's content has a baseline, a top, a middle, and a bottom, as
does the row itself. In the context of tables, values for <span
class="propinst-vertical-align">'vertical-align'</span> have the
following meanings:
<dl>
<dt><strong>baseline</strong>
<dd>The baseline of the cell is put at the same height as the
baseline of the first of the rows it spans (see below for the
definition of baselines of cells and rows).
<dt><strong>top</strong>
<dd>The top of the cell box is aligned with the top of the first
row it spans.
<dt><strong>bottom</strong>
<dd>The bottom of the cell box is aligned with the bottom of the
last row it spans.
<dt><strong>middle</strong>
<dd>The center of the cell is aligned with the center of the rows
it spans.
<dt><strong>sub, super, text-top, text-bottom, &lt;length&gt;,
&lt;percentage&gt;</strong>
<dd>These values do not apply to cells; the cell is aligned at the
baseline instead.
</dl>
<p>The baseline of a cell is the baseline of the first in-flow <a
href="visuren.html#line-box">line box</a> in the cell, or the first
in-flow table-row in the cell, whichever comes first. If there is no
such line box or table-row, the baseline is the bottom of content edge
of the cell box. For the purposes of finding a baseline, in-flow boxes
with a scrolling mechanisms (see the <span
class="propinst-overflow">'overflow'</span> property) must be
View remainder of file in raw view