[css2] Added border-collapse, fixed examples, column/row rules do not apply to HTML,

ianbjacobs · ianbjacobs · commit 1cba1721e262 · 1998-03-17T01:18:29.000Z
--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401238
diff --git a/css2/tables.src b/css2/tables.src
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html lang="en">
-<!-- $Id: tables.src,v 2.19 1998-03-16 14:35:28 ijacobs Exp $ -->
+<!-- $Id: tables.src,v 2.20 1998-03-17 01:18:29 ijacobs Exp $ -->
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
 <title>Tables</title>
@@ -264,17 +264,14 @@ CAPTION  { display: table-caption }
 class="propinst-display">'display'</span> property values for HTML
 documents, since authors should not alter an element's expected
 behavior.
-<!-- must ==> may 27/2/98 -->
 
 <h3><a name="anonymous-boxes">Anonymous table boxes</a></h3> 
 
-<P>For
-document languages other than HTML, authors may end up some, but not
-all, document language elements that correspond to those 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> boxes according to the
-following rules:</p> 
+<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> boxes
+according to the following rules:</p>
 
 <ol>
 
@@ -363,8 +360,8 @@ setting properties on columns.
 <dt><span class="propinst-border">'border'</span>
 
 <dd>The various border properties apply to columns only if <span
-class="propinst-border-spacing">'border-spacing'</span> is set to
-'none' on the table element. In that case, borders set on columns and
+class="propinst-border-collapse">'border-collapse'</span> 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.
@@ -441,7 +438,6 @@ table with a caption above it; the bottom margin of the caption is
 collapsed with the top margin of the table.
 </div>
 
-
 <h3>Caption position and alignment</h3>
 
 <!-- #include src=properties/caption-side.srb -->
@@ -538,7 +534,6 @@ href="conform.html#doclanguage">document language</a>, table elements
 generate rectangular <a href="visuren.html#box-dimensions">boxes</a>
 with content, padding, border, and margin areas.
 
-
 <h3><a name="spanning-props">Row and column spans:</a> <span
 class="propinst-column-span">'column-span'</span>, and 
 <span class="propinst-row-span">'row-span'</span></h3>
@@ -559,7 +554,10 @@ columns spanned by a cell, column, or column group.</p>
 
 <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:</p>
+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
@@ -577,7 +575,9 @@ the value of the <span class="propinst-direction">'direction'</span>
 property of the table.
 
 <li>A column group occupies the same grid cells as the columns it
-contains. <em class=note>[Not true, need correct description.]</em>
+contains. 
+
+<P><em class=note>[Not true, need correct description.]</em>
 
 <li>Structurally speaking, each cell belongs to one row and column;
 this row and column determine the coordinates of the cell.
@@ -598,19 +598,6 @@ only if there are enough rows: a cell cannot extend below the last row
 box; it is made shorter until it fits.
 </ol>
 
-<div class="note">
-<p><em><strong>Note.</strong> The above is an extension of the HTML 4.0
-algorithm. The HTML 4.0 specification only defines the position of
-cells if they can be placed so that they do not leave gaps. If cells
-would leave gaps when following the algorithm above (or, equivalently,
-would overlap other cells according to the algorithm in the HTML 4.0
-specification), the table is in error according to HTML 4.0, and a UA
-is free to try to recover. UAs that implement CSS2 are not free
-anymore, and must leave gaps, as per the algorithm above. </em></div>
-
-<!-- Make the above only suggested for XML, not for HTML. HTML stays
-undefined. 27/2/98 -->
-
 <div class="html-example">
 <p>Here is an example:
 
@@ -688,7 +675,7 @@ row. The following HTML code and style rules</p>
 &lt;HTML&gt;
   &lt;HEAD&gt;
     &lt;STYLE type="text/css"&gt;
-      TABLE { background: #ff0; border-spacing: none }
+      TABLE { background: #ff0; border-collapse: collapse }
       TD { background: red; border: double black }
     &lt;/STYLE&gt;
   &lt;/HEAD&gt;
@@ -750,25 +737,23 @@ and columns. Values have the following meaning:</p>
 
 <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 and the width of the cells in the first row.
-
-<!-- Only use width of column, not of cells. ChrisW. Agreed. 27/2/98 -->
+table's width and the width of the columns.
 
 <P>The table's width is determined by the <span
 class="propinst-width">'width'</span> property.  If the value is
 'auto', the table is as wide as the available horizontal space.
 
-<P>The width of each column is determined as follows:
+<P>The width of each column is determined as follows:</p>
 
 <ol>
-<li>A cell in the first row with a value other than 'auto' for the
+<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. If the cell spans columns, the width is divided over
-the columns.
+for that columns.
 
-<li>If a cell in the first row has 'width' 'auto', but there is a
-column element for that column with 'width' other than 'auto', than
-that width is used.
+<li>Otherwise, a cell in the first row with a value other than 'auto'
+for the <span class="propinst-width">'width'</span> property sets the
+width for that column. If the cell spans columns, the width is divided
+over the columns.
 
 <li>Any remaining columns equally divide the remaining space.
 </ol>
@@ -862,6 +847,14 @@ vice versa.</em>
 <P>Cells may be aligned vertically (within a row) and
 horizontally (within a column).
 
+<div class="note"><P>
+<em><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.
+</em>
+</div>
+
 <h4><a name="vertical-align">Vertical alignment in a row</a></h4>
 
 <P>The height of a cell's box is constrained by the rows that contain
@@ -1036,18 +1029,17 @@ 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.
 
-<!-- #include src=properties/border-spacing.srb -->
+<!-- #include src=properties/border-collapse.srb -->
+
+<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.
 
-<!-- make collapse/non-collapse a separate, binary property.
-border-collapse: collapse|separate. 27/2/98 -->
+<h3><a name="2D">The separated borders model</a></h3>
 
-<P>The property <span
-class="propinst-border-spacing">'border-spacing'</span> selects a
-table's border model. Values have the following meanings:</p>
+<!-- #include src=properties/border-spacing.srb -->
 
 <dl>
-<dt><strong>none</strong>
-<dd>Use the collapsing border model.
 <dt><span class="index-inst" title="&lt;length&gt;"><span
 class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
 <span class="index-inst" title="&lt;length&gt;"><span
@@ -1060,10 +1052,6 @@ spacing and the second the vertical spacing. Lengths may
 not be negative.
 </dl>
 
-<P>The models are described below.
-
-<h3><a name="2D">The separated borders model</a></h3>
-
 <p>In this model, each cell has an individual border.  The
 <span class="propinst-border-spacing">'border-spacing'</span> property
 specifies the distance between the borders of adjacent cells.  This
@@ -1078,7 +1066,9 @@ those elements.
 like this:
 
 <pre>
-  TABLE      { border: outset 10pt; border-spacing: 15pt }
+  TABLE      { border: outset 10pt; 
+               border-collapse: separate;
+               border-spacing: 15pt }
   TD         { border: inset 5pt }
   TD.special { border: inset 10pt }  /* The top-left cell */
 </pre>
@@ -1093,15 +1083,15 @@ has a separate border as well.
 </div>
 
 <P>When this border model is used, the overall width of the table is
-the sum of the cells plus the border-spacing between all borders. See
+the sum of the cells plus the border spacing between all borders. See
 the section on <a href="#auto-table-layout">automatic table layout</a>
 for more information about table dimension calculations.
 
 <h3><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
+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
@@ -1177,10 +1167,9 @@ group and, lastly, table.
 <P>The following example illustrates the application
 of these precedence rules. This style sheet:</p>
 
-<!-- Add border-collapse: collapse to style below. 27/2/98 -->
-
 <pre>
-  TABLE          { border: 5px solid yellow; }
+  TABLE          { border-collapse: collapse;
+                   border: 5px solid yellow; }
   *#col1         { border: 1px solid black; }
   TD             { border: 5px solid red; }
   TD.solid-blue  { border: 11px solid blue; }
@@ -1240,7 +1229,8 @@ attribute of HTML 4.0.
 
 <pre>
 TABLE[rules=rows] TR {border-top: solid}
-TABLE[rules=rows] {border-spacing: none; border-top: hidden}
+TABLE[rules=rows] {border-collapse: collapse; 
+                   border-top: hidden}
 </pre>
 
 <div class="figure">
@@ -1272,7 +1262,7 @@ two omitted internal borders.
 <p>HTML source:</p>
 
 <pre class="html-example">
-&lt;TABLE style="border-spacing: none; border: solid;"&gt;
+&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;
