tables.html

CSS lets learn this step by step...

<p>The <a href="sample.html">default style sheet for HTML 4.0</a>
in the appendix illustrates the use of these values for HTML 4.0:</p>

<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 <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property values for HTML
documents, since authors should not alter an element's expected
behavior.

<h3>17.2.1 <a name="anonymous-boxes">Anonymous table objects</a></h3> 

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

<ol>

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

<li>If the parent P of a 'table-cell' element T is not a 'table-row',
an object corresponding to a 'table-row' will be generated between P
and T.  This object will span all consecutive 'table-cell' siblings
(in the document tree) of T.

<li>If the parent P of a 'table-row' element T is not a 'table',
'inline-table', or 'table-row-group' element, an
object corresponding to a 'table' element will be
generated between P and T. This object will span all consecutive siblings
(in the document tree) of T that require a 'table' parent:
'table-row', 'table-row-group', 'table-header-group', 
'table-footer-group', 'table-column', 'table-column-group', and 'caption'.

<li>If the parent P of a 'table-row-group' (or 'table-header-group' or
'table-footer-group') element T is not a 'table' or 'inline-table', an
object corresponding to a 'table' element will be generated between P
and T. This object will span all consecutive siblings (in the document
tree) of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'caption'.

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

<div class="example"><P style="display:none">Example(s):</P>
<p>In this XML example, a 'table' element is assumed
to contain the HBOX element:</p>

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

<pre class="example">
HBOX { display: table-row }
VBOX { display: table-cell }
</pre>
</div>

<div class="example"><P style="display:none">Example(s):</P>
<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>:</p>

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

<pre class="example">
STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }
</pre>

</div>

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

<h2><a name="q4">17.3 Column selectors</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><a href="box.html#propdef-border" class="noxref"><span class="propinst-border">'border'</span></a>

<dd>The various border properties apply to columns only if <a href="tables.html#propdef-border-collapse" class="noxref"><span
class="propinst-border-collapse">'border-collapse'</span></a> 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><a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a>

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

<dd>The <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property gives the
minimum width for the column.

<dt><a href="visufx.html#propdef-visibility" class="noxref"><span class="propinst-visibility">'visibility'</span></a>

<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 style="display:none">Example(s):</P>
<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.0 with a value of "cols". The third rule makes the "totals"
column blue, the final two rules shows how to make a column a fixed
size, by using the <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="q5">17.4 Tables in the visual formatting model</a></h2>

<P>In terms of the <a href="visuren.html">visual formatting model</a>,
a table may behave like a <a
href="visuren.html#block-level">block-level</a> or replaced <a
href="visuren.html#inline-level">inline-level</a> element. Tables have
content, padding, borders, and margins.

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

<div class="figure">
<p><img src="images/top-caption.gif" alt="A table with a caption above
it; both have margins and the margins between them are collapsed, as
is normal for vertical margins."><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-top-caption" href="images/longdesc/top-caption-desc.html" title="Long description for example showing caption above a table">[D]</A></SPAN> <p class="caption">Diagram of a
table with a caption above it; the bottom margin of the caption is
collapsed with the top margin of the table.
</div>

<h3><a name="q6">17.4.1 Caption position and alignment</a></h3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'caption-side'"><a name="propdef-caption-side" class="propdef-title"><strong>'caption-side'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>top | bottom | left | right | <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>top
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>'table-caption' elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<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>This property specifies the position of the caption box with
respect to the table box. Values have the following meanings:</p>

<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.
<dt><strong>left</strong>
<dd>Positions the caption box to the left of the table box.
<dt><strong>right</strong>
<dd>Positions the caption box to the right of the table box.
</dl>

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

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

<p>For a caption that is on the left or right side of a table box, on
the other hand, a value other than 'auto' for <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> sets the width explicitly, but
'auto' tells the user agent to chose a "reasonable width".  This may
vary between "the narrowest possible box" to "a single line", so we
recommend that users do not specify 'auto' for left and right caption
widths.

<P>To align caption content horizontally within the caption box, use
the <a href="text.html#propdef-text-align" class="noxref"><span class="propinst-text-align">'text-align'</span></a>
property. For vertical alignment of a left or right caption box with
respect to the table box, use the <a href="visudet.html#propdef-vertical-align" class="noxref"><span
class="propinst-vertical-align">'vertical-align'</span></a> property. The
only meaningful values in this case are 'top', 'middle', and
'bottom'. All other values are treated the same as 'top'.

<div class="example"><P style="display:none">Example(s):</P>
<p>In this example, the <a href="tables.html#propdef-caption-side" class="noxref"><span
class="propinst-caption-side">'caption-side'</span></a> 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>

<div class="example"><P style="display:none">Example(s):</P>
<p>The following example shows how to put a caption in the left
margin. The table itself is centered, by setting its left and right
margins to 'auto', and the whole box with table and caption is shifted
into the left margin by the same amount as the width of the caption.

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

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

<div class="figure">
<p><img src="images/left-caption.gif" alt="A centered table with a
caption in the left margin of the page"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-left-caption" href="images/longdesc/left-caption-desc.html" title="Long description for example showing caption to the left of a table">[D]</A></SPAN><p class="caption"> Diagram
showing a centered table with the caption extending into the left
margin, as a result of a negative 'margin-left' property.