[css2] Small improvements in first half.

bert-github · bert-github · commit 1eea86a4c895 · 1998-02-11T21:47:44.000Z
--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40869
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.3 1998-02-10 00:53:42 ijacobs Exp $ -->
+<!-- $Id: tables.src,v 2.4 1998-02-11 21:47:44 bbos Exp $ -->
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
 <title>Tables</title>
@@ -37,11 +37,11 @@ table described in HTML 4.0:
 &lt;TABLE&gt;
 &lt;CAPTION&gt;This is a simple 3x3 table&lt;/CAPTION&gt;
 &lt;TR id="row1"&gt;
-   &lt;TH&gt;Header 1      &lt;TH&gt;Header 2      &lt;TH&gt;Header 3
+   &lt;TH&gt;Header 1      &lt;TD&gt;Cell 1        &lt;TD&gt;Cell 2
 &lt;TR id="row2"&gt;
-   &lt;TD&gt;Cell 1        &lt;TD&gt;Cell 2        &lt;TD&gt;Cell 3
+   &lt;TH&gt;Header 2      &lt;TD&gt;Cell 3        &lt;TD&gt;Cell 4
 &lt;TR id="row3"&gt;
-   &lt;TD&gt;Cell 4        &lt;TD&gt;Cell 5        &lt;TD&gt;Cell 6
+   &lt;TH&gt;Header 3      &lt;TD&gt;Cell 5        &lt;TD&gt;Cell 6
 &lt;/TABLE&gt;
 </PRE>
 
@@ -58,18 +58,17 @@ in the header cells and present the data with a bold font weight:</P>
    TH { text-align: center; font-weight: bold }
 </PRE>
 
-<P>The next rules align the text of the three header cells 
-along a common baseline and centers the text in each data cell:</p>
-
+<P>The next rules align the text of the header cells on their baseline
+and vertically centers the text in each data cell:</p>
 
 <PRE>
    TH { vertical-align: baseline }
    TD { vertical-align: center }
 </PRE>
 
-<P>The next rules specify that the row of header cells will be surrounded
-by a 3px solid blue border and each row of data cells will be surrounded
-by a 1px solid black border:</P>
+<P>The next rules specify that the top row will be surrounded by a 3px
+solid blue border and each of the other rows will be surrounded by a
+1px solid black border:</P>
 
 <PRE>
    TABLE { cell-spacing: none }
@@ -83,29 +82,27 @@ rows meet. What color (black or blue) and thickness (1px or 3px) will
 the border between row1 and row2 be? We discuss this in the section on
 <a href="#border-conflict-resolution">border conflict resolution.</a>
 
-<P>The following rule positions the table caption centered, above
-the table:</P>
+<P>The following rule puts the table caption above the table:</P>
 
 <PRE>
    CAPTION { caption-side: top }
 </PRE>
 
-<P>Finally, the following rule specifies that, when rendered
-aurally, each column of data is to be spoken 
-as a "Header, Data, Data":</P>
+<P>Finally, the following rule specifies that, when rendered aurally,
+each row of data is to be spoken as a "Header, Data, Data":</P>
 
 <PRE>
    TH { speak-header: once }
 </PRE>
 
-<P>For instance, the first column would be spoken "Header1 Cell1 Cell4".
-The following rule:</p>
+<P>For instance, the first row would be spoken "Header1 Cell1 Cell2".
+On the other hand, with the following rule:</p>
 
 <PRE>
    TH { speak-header: always }
 </PRE>
 
-<P>would be spoken "Header1 Cell1 Header1 Cell4". 
+<P>it would be spoken "Header1 Cell1 Header1 Cell2". 
 </div>
 
 <P>The preceding example shows how CSS works with HTML 4.0 elements;
@@ -171,9 +168,9 @@ in an <a href="visuren.html#inline-formatting">inline formatting
 context</a>).
 
 <dt><strong>table-row</strong> (In HTML: TR)
-<dd>Specifies that an element refers to a row of cells.
-Note, however, that the calculation of <em>which</em> row of
-cells depends on the document language.
+<dd>Specifies that an element is a row of cells.
+<!--Note, however, that the calculation of <em>which</em> row of
+cells depends on the document language.-->
 
 <dt><strong>table-row-group</strong> (In HTML: TBODY)
 <dd>Specifies that an element groups one or more rows.
@@ -191,24 +188,26 @@ after all other rows and rowgroups and before any bottom
 captions. 
 
 <dt><strong>table-column</strong> (In HTML: COL)
-<dd>Specifies that an element refers to a column
-of cells. Note, however, that the calculation of <em>which</em> column 
-of cells depends on the document language.
+<dd>Specifies that an element describes a column
+of cells. <!--Note, however, that the calculation of <em>which</em> column 
+of cells depends on the document language.-->
 
 <dt><strong>table-column-group</strong> (In HTML: COLGROUP)
 <dd>Specifies that an element groups one or more columns.
 
 <dt><strong>table-cell</strong> (In HTML: TD, TH)
-<dd>Specifies that an element contains table cell
-data. 'Table-cell' elements may only be inside of 
-'table-row' elements.
+<dd>Specifies that an element represents a table cell.
 
 <dt><strong>table-caption</strong> (In HTML: CAPTION)
-<dd>Specifies a caption for the table. Inherited
-values of properties set for a caption element come
-from the parent table element (e.g., percentage widths).
+<dd>Specifies a caption for the table.
 </dl>
 
+<p>Elements with <span class="propinst-display">'display'</span> set
+to 'table-column' or 'table-column-group' are not rendered (exactly as
+if they had 'display: none'), but they are useful, because they may
+have attributes which induce a certain style for the columns they
+represent.</p>
+
 <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>
 
@@ -243,18 +242,23 @@ to the following rules:</p>
 <li>Any table element will automatically generate a whole table tree
 around itself, consisting of at least a 'table'/'inline-table', a
 'table-row', and a 'table-cell'.
-<li>If the parent a 'table-cell' is not a 'table-row',
+<li>If the parent of a 'table-cell' is not a 'table-row',
 an anonymous 'table-row' element will be assumed as its parent, and
 this anonymous element will span all consecutive 'table-cell'
 siblings. 
 <li>If the parent of a 'table-row' is not a
 'table'/'inline-table' nor a row group element, an anonymous 'table'
 will be assumed as its parent, spanning all consecutive siblings that
 also need an anonymous 'table' parent.
+<li>If the parent of a row group element is not a
+'table'/'inline-table', an anonymous 'table' will be assumed as its
+parent, spanning all consecutive siblings that also need an anonymous
+'table' parent.
+<li>Anonymous 'table-cell' elements are inserted as children of
+'table-rows', to contain consecutive children that are not
+'table-cell' elements.
 </ol>
 
-<P>The same holds for row group elements.
-
 <div class="example">
 <p>In this XML example, an anonymous 'table' is inserted to
 contain the HBOX element:</p>
@@ -275,10 +279,6 @@ VBOX {display: table-cell}
 </pre>
 </div><!-- end of example -->
 
-<p>Anonymous 'table-cell' elements are inserted as children of
-'table-rows', to contain consecutive children that are not
-'table-cell' elements.</p>
-
 <div class="example">
 <p>In this example, three anonymous 'table-cell' elements are inserted
 to contain the text in the ROWs. Note that the text is further
@@ -303,12 +303,6 @@ D {display: inline; font-weight: bolder}
 
 </div><!-- end of example -->
 
-<p>Elements with <span class="propinst-display">'display'</span> set
-to 'table-column' or 'table-column-group' are not rendered (exactly as
-if they had 'display: none'), but they are useful, because they may
-have attributes which induce a certain style for the columns they
-represent.</p>
-
 <h2>Table selectors</h2>
 
 <p>Due to the uniqueness of the table structure, there are several
@@ -364,7 +358,7 @@ for a cell in a particular row and column authors may use
 an "id" selector, as in:</p>
 
 <pre class="example">
-   TD.one-cell { color: green }   /* HTML row and data cell */
+   TD#one-cell { color: green }   /* HTML row and data cell */
 </pre>
 
 <!-- I added row to this note. -IJ -->
@@ -388,16 +382,16 @@ access to rules.]</p>
 <dt><strong>:row[n], :row[%n], :row[%n+m]</strong>
 <dd>This pseudo-class allows
 the author to specify "the third row" (":row[3]"), "every third row"
-(":row[%3]"), or "every third row, starting with the second row"
-(":row[%3 + 1") (rows are zero-indexed).
+(":row[%3]"), or "every third row, starting with the first row"
+(":row[%3 + 1").
 
 <dt><strong>:row-even</strong>
 <dd>This is a shortcut for a pseudo-class of
 ":row[%2]".
 
 <dt><strong>:row-odd</strong>
 <dd>This is a shortcut for a pseudo-class of
-":row[%2+1.
+":row[%2+1].
 </dl>
 
 <!-- Need example  -IJ -->
@@ -411,8 +405,7 @@ the author to specify "the third row" (":row[3]"), "every third row"
 <dd>This pseudo-class
 allows the author to specify (for example) "the third column"
 (":column[3]"), "every third column" (":column[%3]"), or "every third
-column, starting with the second column" (":column[%3 + 1") (columns
-are zero-indexed).
+column, starting with the first column" (":column[%3 + 1").
 
 <dt><strong>:column-even</strong>
 <dd>This is a shortcut for a pseudo-class of
@@ -474,6 +467,8 @@ property places captions below tables.
 The caption will be as wide as the table,
 and caption text will be left-justified horizontally
 and centered vertically.
+(But that last property has no effect if the caption is at the top or
+bottom.)
 
 <PRE>
   CAPTION { caption-side: bottom; 
@@ -491,9 +486,9 @@ 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.
 
-<p>The visual layout of these boxes is governed by a rectangular grid
-of rows and columns.  Each box occupies a whole number of grid cells,
-determined according to the following rules:</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>
 
 <ol>
 <li>Each row box occupies one row of grid cells. Together, the row
@@ -505,12 +500,14 @@ many grid rows as there are row elements).
 
 <li>Columns are placed next to each other in the order they occur. Each
 one occupies the number of grid columns given by its <span
-class="propinst-column-span">'column-span'</span> property. A column
-group occupies the same columns as the columns it contains. The
+class="propinst-column-span">'column-span'</span> property. The
 first column may be either on the left or on the right, depending on
 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>
+
 <li>Structurally speaking, each cell belongs to one row and column;
 this row and column determine the coordinates of the cell.
 Visually, each cell occupies a
@@ -544,7 +541,27 @@ i.e., to easily design evenly spaced table cells in a table.</p>
 <p><em>[Can this work? Maybe it is better to say that table elements
 (other than 'table' and 'inline-table') have no margins at all, and
 instead use a single 'cell-spacing' property for the whole table, or a
-single horizontal and a single vertical spacing (see below)]</em></p>
+single horizontal and a single vertical spacing (see
+below). Example:</em></p>
+
+<pre>
+&lt;TABLE>
+  &tl;TR>&lt;TD id=t1> &lt;TD id=t2>
+  &tl;TR>&lt;TD id=t3> &lt;TD id=t4>
+&lt;/TABLE>
+</pre>
+
+<p><em>If the style sheet says:</em>
+
+<pre>
+#t1 {margin: 1cm}
+#t2 {margin: 2cm}
+#t3 {margin: 3cm}
+#t4 {margin: 4cm}
+</pre>
+
+<p><em>the left column will be (1 + 3 + 3 =) 7cm high, and the right
+one (2 + 4 + 4 =) 10cm. Where do the extra 3cm go?</em>]
 
 <p>Only four properties apply to column and column group elements:
 <span class="propinst-border">'border'</span>, <span
@@ -586,11 +603,10 @@ layers for purposes of visual precedence. Except for transparent
 parts, each layer hides lower layers from view, as shown in
 Figure&nbsp;1.</p>
 
-<!-- Are you sure you want to use OBJECT? -IJ -->
-<object data="images/tbl-layers.gif">
-<P>Figure 1. Schema of table layers.
+<div>
 <p><img src="images/tbl-layers.gif" alt="schema of table layers"></p>
-</object>
+<P>Figure 1. Schema of table layers.
+</div>
 
 <ol>
 <li>
@@ -625,11 +641,11 @@ These "empty" cells are transparent, letting lower layers shine through.
 </li>
 </ol>
 
-<div class="html-example"><P>
-In the following example, the rows contain four cells, but the first
-cell of the second row has no content (it is "empty"), and thus
-the table background shines through. The following HTML code
-and style sheet rules:</p>
+<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 sheet rules</p>
 
 <PRE>
 &lt;HTML&gt;
@@ -649,15 +665,13 @@ and style sheet rules:</p>
     &lt;TD&gt; 4 
   &lt;/TR&gt;
   &lt;TR&gt;
-    &lt;TD&gt;
-    &lt;TD colspan="2"&gt; 5
   &lt;/TR&gt;
 &lt;/TABLE&gt; 
 &lt;/BODY&gt;
 &lt;/HTML&gt;
 </PRE>
 
-<P>Might be rendered as follows:</p>
+<P>might be rendered as follows:</p>
 
 <p><img src="images/tbl-empty.gif" alt="Table with an empty cell in lower left corner"></p>
 </div>
@@ -693,7 +707,7 @@ and columns. Values have the following meaning:</p>
 
 <P>With this (fast) algorithm in which the
 horizontal layout of the table does not depend on the
-contents of every cell; it only depends on the table's width, the width
+contents of every cell; it only depends on the table's width and the width
 of the cells in the first row. 
 
 <P>The table's width is determined by the <span
