tables.html

CSS lets learn this step by step...

<p>The table in the figure below could be the result of a style sheet
like this:

<pre>
  TABLE      { border: outset 10pt; 
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* The top-left cell */
</pre>

<div class=figure>
<p><img src="images/tbl-spacing.gif" alt="A table with
border-spacing"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-tbl-spacing" href="images/longdesc/tbl-spacing-desc.html" title="Long description of example illustrating the separated
borders model">[D]</A></SPAN><p class="caption"> A table with <a href="tables.html#propdef-border-spacing" class="noxref"><span
class="propinst-border-spacing">'border-spacing'</span></a> set to a
length value. Note that each cell has its own border, and the table
has a separate border as well.
</div>
</div>

<h4> <a name="empty-cells">Borders around empty cells:</a> the <a href="tables.html#propdef-empty-cells" class="noxref"><span
class="propinst-empty-cells">'empty-cells'</span></a> property</h4>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'empty-cells'"><a name="propdef-empty-cells" class="propdef-title"><strong>'empty-cells'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>show | hide | <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>show
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>'table-cell'
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>In the separated borders model, this property controls the
rendering of borders around cells that have no visible content.  Empty
cells and cells with the <a href="visufx.html#propdef-visibility" class="noxref"><span
class="propinst-visibility">'visibility'</span></a> property set to
'hidden' are considered to have no visible content.  Visible content
includes "&amp;nbsp;" and other whitespace except ASCII CR ("\0D"), LF
("\0A"), tab ("\09"), and space ("\20").

<P>When this property has the value 'show', borders are drawn
around empty cells (like normal cells). 

<P>A value of 'hide' means that no borders are drawn around
empty cells. Furthermore, if all the cells in a row have a value of
'hide' and have no visible content, the entire row behaves as if
it had 'display: none'.

<div class="example"><P style="display:none">Example(s):</P><P>
The following rule causes borders to be drawn around
all cells:</p>

<PRE>
TABLE { empty-cells: show }
</PRE>
</div>


<h3>17.6.2 <a name="collapsing-borders">The collapsing border model</a></h3>

<p>In the collapsing border model, it is possible to
specify borders that surround all or part of a cell, row, row group,
column, and column group. Borders for HTML's "rule" attribute can be
specified this way.

<p>Borders are centered on the grid lines between the cells. User
agents must find a consistent rule for rounding off in the case of an
odd number of discrete units (screen pixels, printer dots).</p>

<p>The diagram below shows how the width of the table, the widths of
the borders, the padding, and the cell width interact. Their relation
is given by the following equation, which holds for every row of the
table:</p>

<blockquote>
<p><var>row-width</var> = (0.5 * <var>border-width</var><sub>0</sub>) +
<var>padding-left</var><sub>1</sub> + <var>width</var><sub>1</sub> +
<var>padding-right</var><sub>1</sub> +
<var>border-width</var><sub>1</sub> +
<var>padding-left</var><sub>2</sub> +...+
<var>padding-right</var><sub><var>n</var></sub> +
(0.5 * <var>border-width</var><sub><var>n</var></sub>)</p>
</blockquote>

<p>Here <var>n</var> is the number of cells in the row, and
<var>border-width</var><sub><var>i</var></sub> refers to the border
between cells <var>i</var> and <var>i</var> + 1. Note only half
of the two exterior borders are counted in the table width;
the other half of these two borders lies in the margin area.</p>

<div class="figure">
<p><img src="images/tbl-width.gif" alt="Schema showing the widths of
cells and borders and the padding of cells"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-tbl-width" href="images/longdesc/tbl-width-desc.html" title="Long description of example illustrating the collapsing
borders model">[D]</A></SPAN><p class="caption"> Schema
showing the widths of cells and borders and the padding of cells.
</div>

<p>Note that in this model, the width of the table includes half the
table border. Also, in this model, a table doesn't have padding (but
does have margins).

<h4> <a name="border-conflict-resolution">Border conflict resolution</a></h4>

<p>In the collapsing border model, borders at every edge of every cell
may be specified by border properties on a variety of elements that
meet at that edge (cells, rows, row groups, columns, column groups, and
the table itself), and these borders may vary in width, style, and
color. The rule of thumb is that at each edge the most "eye catching"
border style is chosen, except that any occurrence of the style
'hidden' unconditionally turns the border off.</p>

<P>The following rules determine which border style "wins" in case
of a conflict:</p>

<ol>
<li>Borders with the <a href="box.html#propdef-border-style" class="noxref"><span
class="propinst-border-style">'border-style'</span></a> of 'hidden'
take precedence over all other conflicting borders. Any border
with this value suppresses all borders at this location.
</li>

<li>Borders with a style of 'none' have the lowest priority. Only if
the border properties of all the elements meeting at this edge are
'none' will the border be omitted (but note that 'none' is the default
value for the border style.)

<li>If none of the styles is 'hidden' and at least one of them is not
'none', then narrow borders are discarded in favor of wider ones. If
several have the same <a href="box.html#propdef-border-width" class="noxref"><span
class="propinst-border-width">'border-width'</span></a> than styles are
preferred in this order: 'double', 'solid', 'dashed', 'dotted',
'ridge', 'outset', 'groove', and the lowest: 'inset'.

<li>If border styles differ only in color, then a style set on a cell
wins over one on a row, which wins over a row group, column, column
group and, lastly, table.
</ol>

<div class="example"><P style="display:none">Example(s):</P>
<P>The following example illustrates the application
of these precedence rules. This style sheet:</p>

<pre>
  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }
</pre>

<P>with this HTML source:</p>

<pre class="html-example">
&lt;P&gt;
&lt;TABLE&gt;
&lt;COL id=&quot;col1&quot;&gt;&lt;COL id=&quot;col2&quot;&gt;&lt;COL id=&quot;col3&quot;&gt;
&lt;TR id=&quot;row1&quot;&gt;
    &lt;TD&gt; 1
    &lt;TD&gt; 2
    &lt;TD&gt; 3
&lt;/TR&gt;
&lt;TR id=&quot;row2&quot;&gt;
    &lt;TD&gt; 4 
    &lt;TD class="solid-blue"&gt; 5
    &lt;TD class="solid-green"&gt; 6
&lt;/TR&gt;
&lt;TR id=&quot;row3&quot;&gt;
    &lt;TD&gt; 7
    &lt;TD&gt; 8
    &lt;TD&gt; 9
&lt;/TR&gt;
&lt;TR id=&quot;row4&quot;&gt;
    &lt;TD&gt; 10
    &lt;TD&gt; 11
    &lt;TD&gt; 12
&lt;/TR&gt;
&lt;TR id=&quot;row5&quot;&gt;
    &lt;TD&gt; 13
    &lt;TD&gt; 14
    &lt;TD&gt; 15
&lt;/TR&gt;
&lt;/TABLE&gt;
</pre>

<P>would produce something like this:</p>

<div class="figure">
<P><img src="images/tbl-border-conflict.gif"
alt="An example of a table with collapsed borders"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-tbl-border-conflict" href="images/longdesc/tbl-border-conflict-desc.html" title="Long description of example illustrating precedence 
in the collapsing borders model">[D]</A></SPAN></P>
<p class="caption">An example of a table with collapsed borders.</p>
</div>
</div>

<div class="example"><P style="display:none">Example(s):</P>
<p>The next example shows a table with horizontal rules between the
rows. The top border of the table is set to 'hidden' to suppress the
top border of the first row. This implements the "rules"
attribute of HTML 4.0 (rules="rows").

<pre>
TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden }
</pre>

<div class="figure">
<p><img src="images/tbl-rules.gif" alt="Table with horizontal
rules"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-tbl-rules" href="images/longdesc/tbl-rules-desc.html" title="Long description of example illustrating rows separated
by a border">[D]</A></SPAN><p class="caption"> Table with horizontal rules between the
rows.
</div>

<p>In this case the same effect can also be achieved without setting a
'hidden' border on TABLE, by addressing the first row separately. Which
method is preferred is a matter of taste.

<pre>
TR:first-child { border-top: none }
TR { border-top: solid }
</pre>
</div>

<div class="example"><P style="display:none">Example(s):</P>
<p>Here is another example of hidden collapsing
borders:</p>

<div class="figure">
<p><img src="images/CSStbl3.gif" width="57" height="48" alt="Table
with two omitted borders"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-CSStbl3" href="images/longdesc/CSStbl3-desc.html" title="Long description of example illustrating hidden internal
borders">[D]</A></SPAN><p class="caption"> Table with
two omitted internal borders.
</div>

<p>HTML source:</p>

<pre class="html-example">
&lt;TABLE style="border-collapse: collapse; border: solid;"&gt;
&lt;TR&gt;&lt;TD style="border-right: hidden; border-bottom: hidden"&gt;foo&lt;/TD&gt;
    &lt;TD style="border: solid"&gt;bar&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD style="border: none"&gt;foo&lt;/TD&gt;
    &lt;TD style="border: solid"&gt;bar&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
</pre>
</div>

<h3><a name="q20">17.6.3 Border styles</a></h3>

<p>Some of the values of the <span class="index-inst"
title="&lt;border-style&gt;"><a name="x24" href="box.html#propdef-border-style" class="noxref"><span
class="propinst-border-style">'border-style'</span></a></span> have
different meanings in tables than for other elements. In the list
below they are marked with an asterisk.</p>

<dl>
<dt><a href="box.html#value-def-bo-none" class="noxref"><span class="value-inst-bo-none"><strong>none</strong></span></a>
<dd><a name="x25"><span class="index-inst" title="'none'::as border
style">No border.</span></a>

<dt><strong>*<span class="index-inst" title="'hidden"><a name="x26" href="box.html#value-def-hidden" class="noxref"><span
class="value-inst-hidden">hidden</span></a></span></strong>
<dd>Same as 'none', but in the <a href="#collapsing-borders">collapsing
border model</a>, also inhibits any other border (see the
section on <a href="#border-conflict-resolution">border conflicts</a>).

<dt><strong><span class="index-inst" title="'dotted'"><a name="x27" href="box.html#value-def-dotted" class="noxref"><span
class="value-inst-dotted">dotted</span></a></span></strong>
<dd>The border is a series of dots.

<dt><strong><span class="index-inst" title="'dashed'"><a name="x28" href="box.html#value-def-dashed" class="noxref"><span
class="value-inst-dashed">dashed</span></a></span></strong>
<dd>The border is a series of short line segments.

<dt><strong><span class="index-inst" title="'solid'"><a name="x29" href="box.html#value-def-solid" class="noxref"><span
class="value-inst-solid">solid</span></a></span></strong>
<dd>The border is a single line segment.

<dt><strong><span class="index-inst" title="'double'"><a name="x30" href="box.html#value-def-double" class="noxref"><span
class="value-inst-double">double</span></a></span></strong>
<dd>The border is two solid lines. The sum of the two lines and the
space between them equals the value of <a href="box.html#propdef-border-width" class="noxref"><span
class="propinst-border-width">'border-width'</span></a>.

<dt><strong><span class="index-inst" title="'groove'"><a name="x31" href="box.html#value-def-groove" class="noxref"><span
class="value-inst-groove">groove</span></a></span></strong>
<dd>The border looks as though it were carved into the canvas.

<dt><strong><span class="index-inst" title="'ridge'"><a name="x32" href="box.html#value-def-ridge" class="noxref"><