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

tables.src

Latest commit

 

History

History
1553 lines (1268 loc) · 61.2 KB

tables.src

File metadata and controls

1553 lines (1268 loc) · 61.2 KB
<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> which participate in the
table formatting context established by the table box. These boxes
have content and borders and 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#C 1090E omputing_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.
<p>The caption width minimum (CAPMIN) is determined by calculating for
each caption the minimum caption outer width as the MCW of a
hypothetical table cell that contains the caption formatted as
"display: block". The greatest of the minimum caption outer widths is
CAPMIN.
<p>Column and caption
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 used width is
the greater of W, CAPMIN, and the minimum width required by all the
columns plus cell spacing or borders (MIN). If the used width 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 used width is the greater of the table's containing block width,
CAPMIN, and MIN. However, if either CAPMIN or the maximum width
required by the columns plus cell spacing or borders (MAX) is less
than that of the containing block, use max(MAX, CAPMIN).
</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.
<p class=note><em><strong>Note.</strong> Future
updates of CSS may specify this further.</em>
<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 computed <span class="propinst-height">'height'</span>,
the computed <span class="propinst-height">'height'</span> of each
View remainder of file in raw view