tables.html

CSS lets learn this step by step...

</div>
</div>

<h2><a name="q7">17.5 Visual layout of table contents</a></h2>

<P>Like other elements of the <a
href="conform.html#doclanguage">document language</a>, internal table
elements generate rectangular <a
href="box.html#box-dimensions">boxes</a> with content, padding, and
borders. They do not have margins, however.

<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.0 or earlier HTML versions; 
HTML imposes its own limitations on row and column spans.
</p>

<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 <a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a>
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 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 <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'rtl', interchange
"left" and "right" in the previous sentence.)

<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><strong>Note.</strong>
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.

<div class="html-example">
<p>Here are two examples. The first is assumed to occur in an HTML
document:

<pre>
&lt;TABLE&gt;
&lt;TR&gt;&lt;TD&gt;1 &lt;TD rowspan="2"&gt;2 &lt;TD&gt;3 &lt;TD&gt;4
&lt;TR&gt;&lt;TD colspan="2"&gt;5
&lt;/TABLE&gt;
</pre>

<pre>
&lt;TABLE&gt;
&lt;ROW&gt;&lt;CELL&gt;1 &lt;CELL rowspan="2"&gt;2 &lt;CELL&gt;3 &lt;CELL&gt;4
&lt;ROW&gt;&lt;CELL colspan="2"&gt;5
&lt;/TABLE&gt;
</pre>

<p>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.

<div class="figure">
<p><img src="images/table-overlap.gif" alt="One table with overlapping
cells and one without"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-table-overlap" href="images/longdesc/table-overlap-desc.html" title="Long description for example showing how structurally
overlapping cells are rendered">[D]</A></SPAN> <p class="caption">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.
</div>
</div>

<h3>17.5.1 <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.gif" alt="schema of table layers"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-tbl-layers" href="images/longdesc/tbl-layers-desc.html" title="Long description of example of cell background calculation">[D]</A></SPAN> <p
class="caption">Schema of table layers.
</div>

<ol>
<li>
<p>The lowest layer is a single plane, representing the table box
itself. Like all boxes, it may be transparent.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>The next to last layer contains the rows. The rows also cover the
whole table.</p>
</li>
<li>
<p>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.
</p>
</li>
</ol>

<div class="html-example">
<P>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</p>

<PRE>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;STYLE type="text/css"&gt;
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P&gt;
    &lt;TABLE&gt;
      &lt;TR&gt;
        &lt;TD&gt; 1 
        &lt;TD rowspan="2"&gt; 2
        &lt;TD&gt; 3 
        &lt;TD&gt; 4 
      &lt;/TR&gt;
      &lt;TR&gt;&lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;
    &lt;/TABLE&gt; 
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>might be formatted as follows:</p>

<div class="figure">
<p><img src="images/tbl-empty.gif" alt="Table with three empty cells
in bottom row"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-tbl-empty" href="images/longdesc/tbl-empty-desc.html" title="Long description of example illustrating background calculation
">[D]</A></SPAN><p class="caption"> Table with three empty cells in the
bottom row.
</div>
</div>

<h3>17.5.2 <a name="width-layout">Table width algorithms:</a>
the <a href="tables.html#propdef-table-layout" class="noxref"><span class="propinst-table-layout">'table-layout'</span></a>
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.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'table-layout'"><a name="propdef-table-layout" class="propdef-title"><strong>'table-layout'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>auto | fixed | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>'table' 
and 'inline-table' elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<p>The <a href="tables.html#propdef-table-layout" class="noxref"><span class="propinst-table-layout">'table-layout'</span></a>
property controls the algorithm used to lay out the table cells, rows,
and columns. Values have the following meaning:</p>

<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 <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> 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.

<P>In the fixed table layout algorithm, the width of each column is
determined as follows:</p>

<ol>
<li>A column element with a value other than 'auto' for the
<a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property sets the width
for that column.

<li>Otherwise, a cell in the first row with a value other than 'auto'
for the <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property sets 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 <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> 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>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 <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> 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 <a href="tables.html#propdef-table-layout" class="noxref"><span
class="propinst-table-layout">'table-layout'</span></a> is 'auto'; they
can use any other algorithm.

<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:</p>

<ol>
<li>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
<a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> (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
then content without breaking lines other than where explicit line
breaks occur.

<li>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 <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a>, whichever is larger). The
maximum is that required by the cell with the largest maximum cell
width (or the column <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a>,
whichever is larger).

<li>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.