E785 csswg-drafts/css3-tables/Overview.src.html at 132f9c0d5b7aaf7732897dfd82610d388a368624 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
2719 lines (2227 loc) · 94.2 KB

Overview.src.html

File metadata and controls

2719 lines (2227 loc) · 94.2 KB
</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 id=internal>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">“internal”
table element</span> is one that produces a row, row group, column,
column group, or cell.
<h2>The CSS table model</h2>
<p>The CSS table model is based on the HTML&nbsp;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,&#8221 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 <span>document
language</span> 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
formatting rules to an arbitrary element:
<dl>
<dt><dfn>table</dfn> (In HTML: TABLE) <dd>Specifies that an element
defines a <em>block-level</em> table: it is a rectangular block that
participates in a <em>block formatting context</em>.
<dt><dfn>inline-table</dfn> (In HTML: TABLE) <dd>Specifies that an
element defines an <em>inline-level</em> table: it is a rectangular
block that participates in an <em>inline formatting context</em>.
<dt><dfn>table-row</dfn> (In HTML:
TR) <dd>Specifies that an element is a row of cells.
<dt><dfn>table-row-group</dfn>
(In HTML: TBODY) <dd>Specifies that an element groups one or more
rows.
<dt><dfn>table-header-group</dfn>
(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><dfn>table-footer-group</dfn>
(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><dfn>table-column</dfn> (In
HTML: COL) <dd>Specifies that an element describes a column of
cells.
<dt><dfn>table-column-group</dfn>
(In HTML: COLGROUP) <dd>Specifies that an element groups one or more
columns.
<dt><dfn>table-cell</dfn> (In HTML:
TD, TH) <dd>Specifies that an element represents a table cell.
<dt><dfn>table-caption</dfn> (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 [??].</a>
</dl>
<p>Replaced elements with these
'display' 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 '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.
<div class=issue>
<p>The above, rewritten for 'display-model' and 'display-role':
<p>The values of <span class=property>'display-model'</span> that
apply to tables have the following meaning. (For the purposes of the
definitions in this section, any child elements with a <span
class=property>'display-role'</span> of <span class=css>'none'</span>
are considered to have been removed from the document tree.)
<dl>
<dt>table
<dd>
<p>The child elements are laid out as a stack of row-groups. In
detail:
<p>Any uninterrupted sequence of child elements, including
anonymous ones, with a role other than <span
class=css>'table-{row,header,footer}-group'</span> or <span
class=css>'table-caption'</span> is wrapped in an anonymous
element with role and model both set to <span
class=css>'table-row-group'</span>.
<p>The resulting set of children is laid out as a stack of rows
from top to bottom, with at the top any <span
class=css>'table-header-group'</span> child, then the <span
class=css>'table-row-group'</span> children, in the order of the
document, and finally any <span
class=css>'table-footer-group'</span> child. (Note also the
difference between these three types for paged media, described <a
href="#table-header-group">below.</a>)
<dt>table-row-group
<dd>
<p>The children are laid out as a stack of rows. In detail:
<p>Any uninterrupted sequence of child elements with a role other
than <span class=css>'table-row'</span> is wrapped in an anonymous
element with role set to <span class=css>'table-row'</span> and
model set to <span class=css>'block-inside'</span>.
<p>The resulting children are laid out as a stack of rows from top
to bottom in the order of the document.
<dt>table-row
<dd>
<p>The children are laid out as a row of table cells. In detail:
<p>Any uninterrupted sequence of children with a role other than
<span class=css>'table-cell'</span> is wrapped in an anonymous
element with role set to <span class=css>'table-cell'</span> and
model set to <span class=css>'block'</span>.
<p>The resulting children are laid out from left to right in the
order of the document.
<dt>table-column-group
<dd>
<p>Any children with a role other than <span
class=css>'table-column'</span> are ignored. The other children
aren't rendered either, but some of their properties influence the
style of the table. See the section <a
href="#columns">Columns</a> below.
<dt>table-column
<dd>
<p>All children are ignored (as if their <span
class=property>'display-role'</span> was <span class=css>'none'</span>)
See the section <a href="#columns">Columns</a> below for the
function of properties on this element.
</dl>
<p>See <a href="#width-layout">Table width algorithms</a> and <a
href="#height-layout">Table height algorithms</a> for the size of the
various elements.
<p>Where it says “top to bottom” or “left to
right” in the definitions above, this should be replaced by the
appropriate direction based on the value of <span
class=property>'writing-mode'</span> of the enclosing <span
class=css>'table'</span> element, as follows. (Note that the writing
mode of other elements in the table may influence the direction of the
context of the table cells, but only the writing mode of the table
element itself determines the direction of the rows and columns.)
<dl>
<dt>lr-tb <dd>Rows are stacked top to bottom and columns are laid
out from left to right (i.e., as in the definitions above).
<dt>rl-tb <dd>Rows are stacked top to bottom and columns are laid
out right to left.
<dt>tb-rl <dd>Rows are laid out from right to left and columns from
top to bottom.
<dt>tb-lr <dd>Rows are laid out from left to right and columns from
top to bottom.
</dl>
<p class=note>Note that there are theoretically 8 ways that rows and
columns can be ordered, but only the above 4 are supported.
<p>The values of <span class=property>'table-role'</span> have the
following meaning
<dl>
<dt>table-cell
<dd>
<p>The element is a cell in a table row. If the parent, anonymous
or not, doesn't have the model <span class=css>'table-row'</span>,
an anonymous element is wrapped around this element and all its
sister elements with the same role that form an uninterupted
sequence. The anonymous element has a role and a model of <span
class=css>'table-row'</span>.
<dt>table-caption
<dd>
<p>The element is the caption of a table. If the parent, anonymous
or not, has a model other than <span class=css>'table'</span>, an
anonymous element is wrapped around this element and any sisters
with a role of 'table-{row,header,footer}-group', 'table-row',
'table-column-group' or 'table-column' that form an uninterrupted
sequence. The anonymous element has a role of <span
class=css>'block'</span> and a model of <span
class=css>'table'</span>.
<p>If the <span class=css>'table'</span> element that is this
element's parent has another child with role <span
class=css>'table-caption'</span> earlier in the document, this
element is treated as if it had a role of <span
class=css>'block'</span> instead. <span class=issue>[In
CSS&nbsp;2.1 we said this situation was undefined and authors
should not use it...]</span>
<dt>table-row-group
<dd>
<p>The element is a group of rows. If the parent, anonymous or
not, has a model other than <span class=css>'table'</span>, an
anonymous element is wrapped around this element and all its
sister elements with a role of <span
class=css>table-{row,header,footer}-group'</span> that form an
uninterupted sequence. The anonymous element has a role of <span
class=css>'block'</span> and a model of <span
class=css>'table'</span>.
<dt id="table-header-group">table-header-group
<dd>
<p>The element is a group of rows that is displayed at the top of
the table, after any top caption. In paged media, if a page break
occurs in the table, the header group is repeated at the top of
the table after every page break.
<p>If the parent, anonymous or not, has a model other than <span
class=css>'table'</span>, an anonymous element is wrapped around
this element and all its sister elements with a role of <span
class=css>table-{row,header,footer}-group'</span> that form an
uninterupted sequence. The anonymous element has a role of <span
class=css>'block'</span> and a model of <span
class=css>'table'</span>.
<dt>table-footer-group
<dd>
<p>The element is a group of rows that is displayed at the bottom
of the table, before any bottom caption. In paged media, if a page
break occurs in the table, the footer group is repeated at the
bottom of the table before every page break.
<p>If the parent, anonymous or not, has a model other than <span
class=css>'table'</span>, an anonymous element is wrapped around
this element and all its sister elements with a role of <span
class=css>table-{row,header,footer}-group'</span> that form an
uninterupted sequence. The anonymous element has a role of <span
class=css>'block'</span> and a model of <span
class=css>'table'</span>.
<dt>table-column
<dd>
<p>The element creates a column. It's contents are ignored.
<p>If the parent, anonymous or not, has neither the model <span
class=css>'table'</span> nor <span
class=css>'table-column-group'</span>, an anonymous element is
wrapped around this element and any sisters with a role of
<dd>
</dl>
</div>
<p class="issue">An <a
href="http://lists.w3.org/Archives/Public/www-style/2002Mar/0023.html">
idea</a> by Dorothea Salo of Open eBook Forum: some way to scroll a
table and keep the headers and footers on screen, plus a a vertical
analogue. Such "header columns" would stay on the screen during
horizontal scrolling.
<div class=example>
<p>The <a href="http://www.w3.org/TR/CSS2/sample.html">default style sheet for HTML&nbsp;4.0</a>
in the appendix illustrates the use of these values for HTML&nbsp;4.0:
<pre>
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>
</div>
<p>User agents may ignore these
'display' 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.
<p class=issue>Remove the above paragraph?
<h3 id="anonymous-boxes">Anonymous table objects</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
<em>anonymous</em> 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 boxess
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'' 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>
&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>
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 <span
class="issue">[where?]</span>:
<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>
STACK { display: inline-table }
ROW { display: table-row }
D { display: inline; font-weight: bolder }
</pre>
</div>
<h2 id=columns>Columns</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>'border'
View remainder of file in raw view