tables.html

CSS lets learn this step by step...

</ol>

<p>This gives a maximum and minimum width for each column. 
Column widths influence the final table width as follows:</p>  

<ol>

<li>If the 'table' or 'inline-table' element's <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> property has a specified value (W)
other than 'auto', the property's computed value 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
computed table width 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.)</p>

<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>17.5.3 <a name="height-layout">Table height algorithms</a></h3>

<P>The height of a table is given by the <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> 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 specifies the height explicitly; the table may thus be taller or
shorter than the height of its rows. CSS2 does not specify rendering
when the specified table height differs from the content height, in
particular whether content height should override specified height; if
it doesn't, how extra space should be distributed among rows that add
up to less than the specified table height; or, if the content height
exceeds the specified table height, whether the UA should provide a
scrolling mechanism.  <strong>Note.</strong> Future versions 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 <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a>
and the minimum height (MIN) required by the cells. A <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> value of 'auto' for a
'table-row' means the computed row height 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).  CSS2 does not
define what percentage values of <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> refer to when specified for
table rows and row groups.

<P>In CSS2, the height of a cell box is the maximum of the table
cell's <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> property and the
minimum height required by the content (MIN). A value of 'auto' for
<a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> implies a computed value
of MIN. CSS2 does not define what percentage values of <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> refer to when specified for
table cells.

<P>CSS2 does not specify how cells that span more than 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 <a href="visudet.html#propdef-vertical-align" class="noxref"><span class="propinst-vertical-align">'vertical-align'</span></a>
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 <a href="visudet.html#propdef-vertical-align" class="noxref"><span
class="propinst-vertical-align">'vertical-align'</span></a> have the
following meanings:</p>

<dl>
<dt><strong>baseline</strong></dt>
<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></dt>
<dd>The top of the cell box is aligned with the top of the first row
it spans.
<dt><strong>bottom</strong></dt>
<dd>The bottom of the cell box is aligned with the bottom of the last
row it spans.
<dt><strong>middle</strong></dt>
<dd>The center of the cell is aligned with the center of the rows it
spans.
<dt><strong>sub, super, text-top, text-bottom</strong></dt>
<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 
<a href="visuren.html#line-box">line box</a> in
the cell. If there is no text, the baseline is the baseline of
whatever object is displayed in the cell, or, if it has none, the
bottom of the cell box. The maximum distance between the top of the
cell box and the baseline over all cells that have
'vertical-align: baseline' is used to set the baseline of the row. Here
is an example:</p>

<div class="figure">
<p><img src="images/cell-align.gif" alt="Example of vertically
aligning the cells"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-cell-align" href="images/longdesc/cell-align-desc.html" title="Long description of example illustrating table row height
calculations and vertical cell alignment">[D]</A></SPAN><p class="caption"> Diagram showing the effect of
various values of 'vertical-align' on table cells.
</div>

<p>Cell boxes 1 and 2 are aligned at their baselines. Cell box 2 has
the largest height above the baseline, so that determines the baseline
of the row.  Note that if there is no cell box aligned at its
baseline, the row will not have (nor need) a baseline.</p>

<p>To avoid ambiguous situations, the alignment of cells proceeds in
the following order:</p>

<ol>

<li>First the cells that are aligned on their baseline are
positioned. This will establish the baseline of the row. Next the
cells with 'vertical-align: top' are positioned.

<li>The row now has a top, possibly a baseline, and a provisional
height, which is the distance from the top to the lowest bottom of the
cells positioned so far. (See conditions on the cell padding
below.)

<li>If any of the remaining cells, those aligned at the bottom or the
middle, have a height that is larger than the current height of the
row, the height of the row will be increased to the maximum of those
cells, by lowering the bottom.

<li>Finally the remaining cells are positioned.

</ol>

<P>Cell boxes that are smaller than the height of the row receive
extra top or bottom padding.</p>

<h3>17.5.4 <a name="column-alignment">Horizontal alignment in a column</a></h3>

<p>The horizontal alignment of a cell's content within a cell box is
specified with the <a href="text.html#propdef-text-align" class="noxref"><span
class="propinst-text-align">'text-align'</span></a> property.

<P>When the <a href="text.html#propdef-text-align" class="noxref"><span class="propinst-text-align">'text-align'</span></a>
property for more than one cell in a column is set to a <span
class="index-inst" title="&lt;string&gt;"><a name="x17" href="syndata.html#value-def-string" class="noxref"><span
class="value-inst-string">&lt;string&gt;</span></a></span> value, the
content of those cells is aligned along a vertical axis. The beginning
of the string touches this axis. Character directionality determines
whether the string lies to the left or right of the axis.

<p>Aligning text in this way is only useful if the text fits on one
line. The result is undefined if the cell content spans more than one
line.

<p>If value of <a href="text.html#propdef-text-align" class="noxref"><span class="propinst-text-align">'text-align'</span></a>
for a table cell is a string but the string doesn't occur in the cell
content, the end of the cell's content touches the vertical axis of
alignment.

<p>Note that the strings do not have to be the same for each cell,
although they usually are.

<P>CSS does not provide a way specify the offset of the vertical
alignment axis with respect to the edge of a column box.

<div class="example"><P style="display:none">Example(s):</P><P>
The following style sheet:</p>

<PRE>
   TD { text-align: "." }
   TD:before { content: "$" }
</PRE>

<P>will cause the column of dollar figures
in the following HTML table:</p>

<PRE class="html-example">
  &lt;TABLE&gt;
  &lt;COL width="40"&gt;
  &lt;TR&gt; &lt;TH&gt;Long distance calls
  &lt;TR&gt; &lt;TD&gt; 1.30
  &lt;TR&gt; &lt;TD&gt; 2.50
  &lt;TR&gt; &lt;TD&gt; 10.80
  &lt;TR&gt; &lt;TD&gt; 111.01
  &lt;TR&gt; &lt;TD&gt; 85.
  &lt;TR&gt; &lt;TD&gt; 90
  &lt;TR&gt; &lt;TD&gt; .05
  &lt;TR&gt; &lt;TD&gt; .06
  &lt;/TABLE&gt;
</PRE>

<P>to align along the decimal point. For fun,
we have used the <a name="x18"><span class="index-inst" title=":before">:before</span></a>
pseudo-element to insert a dollar sign before each figure. The table
might be rendered as follows:</P>

<PRE>
Long distance calls
              $1.30      
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06
</PRE>
</div>

<h3>17.5.5 <a name="dynamic-effects">Dynamic row and column effects</a></h3>

<p>The <a href="visufx.html#propdef-visibility" class="noxref"><span class="propinst-visibility">'visibility'</span></a> property
takes the value 'collapse' for row, row group, column, and column
group elements. This value causes the entire row or column to be
removed from the display, and the space normally taken up by the row
or column to be made available for other content. The suppression of
the row or column, however, does not otherwise affect the layout of
the table. This allows dynamic effects to remove table rows or columns
without forcing a re-layout of the table in order to account for the
potential change in column constraints.



<h2>17.6 <a name="borders">Borders</a></h2>

<p>There are two distinct models for setting borders on table cells in
CSS. One is most suitable for so-called <a name="x19"><span class="index-inst"
title="separated borders">separated borders</span></a> around individual cells, the
other is suitable for borders that are continuous from one end of the
table to the other. Many border styles can be achieved with either
model, so it is often a matter of taste which one is used.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-collapse'"><a name="propdef-border-collapse" class="propdef-title"><strong>'border-collapse'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>collapse | separate | <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>collapse
<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>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 selects a table's border model.  The value 'separate'
selects the separated borders border model. The value 'collapse'
selects the collapsing borders model. The models are described below.

<h3>17.6.1 <a name="separated-borders">The separated borders model</a></h3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-spacing'"><a name="propdef-border-spacing" class="propdef-title"><strong>'border-spacing'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a>? | <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>0
<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>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>The lengths specify the distance that separates adjacent cell
borders. If one length is specified, it gives both the horizontal and
vertical spacing. If two are specified, the first gives the horizontal
spacing and the second the vertical spacing. Lengths may not be
negative.

<p>In this model, each cell has an individual border.  The
<a href="tables.html#propdef-border-spacing" class="noxref"><span class="propinst-border-spacing">'border-spacing'</span></a> property
specifies the distance between the borders of adjacent cells.  This
space is filled with the background of the table element.  Rows,
columns, row groups, and column groups cannot have borders (i.e., user
agents must <span class="index-inst" title="ignore"><a name="x22"
href="syndata.html#ignore">ignore</a></span> the border properties for
those elements).

<div class="example"><P style="display:none">Example(s):</P>