Skip to content

Commit ea64d91

Browse files
bert-githubbert-github
committed
[css2] Small edits. Still not happy. I think there are gaps in the
explanations. --HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40900
1 parent 3307da2 commit ea64d91

1 file changed

Lines changed: 67 additions & 25 deletions

File tree

‎css2/tables.src‎

Lines changed: 67 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: tables.src,v 2.6 1998-02-13 18:23:11 ijacobs Exp $ -->
3+
<!-- $Id: tables.src,v 2.7 1998-02-13 20:02:22 bbos Exp $ -->
44
<head>
55
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
66
<title>Tables</title>
@@ -242,18 +242,22 @@ to the following rules:</p>
242242
<li>Any table element will automatically generate a whole table tree
243243
around itself, consisting of at least a 'table'/'inline-table', a
244244
'table-row', and a 'table-cell'.
245+
245246
<li>If the parent of a 'table-cell' is not a 'table-row',
246247
an anonymous 'table-row' element will be assumed as its parent, and
247248
this anonymous element will span all consecutive 'table-cell'
248249
siblings.
250+
249251
<li>If the parent of a 'table-row' is not a
250252
'table'/'inline-table' nor a row group element, an anonymous 'table'
251253
will be assumed as its parent, spanning all consecutive siblings that
252254
also need an anonymous 'table' parent.
255+
253256
<li>If the parent of a row group element is not a
254257
'table'/'inline-table', an anonymous 'table' will be assumed as its
255258
parent, spanning all consecutive siblings that also need an anonymous
256259
'table' parent.
260+
257261
<li>Anonymous 'table-cell' elements are inserted as children of
258262
'table-rows', to contain consecutive children that are not
259263
'table-cell' elements.
@@ -330,14 +334,14 @@ to two contexts: rows and columns. An author may write a CSS rule
330334
that applies to either of the two contexts, but not to both (i.e.,
331335
the contexts do not interact).
332336

333-
<P>Thus, to specify the color of all the cells in a particular
334-
row, one would write:</P>
337+
<P>Thus, to specify the color of all the cells in a particular class
338+
of row, one would write:</P>
335339

336340
<pre class="example">
337341
TR.row1 TD { color: red } /* HTML row and data cell */
338342
</pre>
339343

340-
<P>To specify the color of all the cells in a particular
344+
<P>To specify the color of all the cells in a particular class of
341345
column, one would write:</P>
342346

343347
<pre class="example">
@@ -430,8 +434,12 @@ href="visuren.html#anonymous">anonymous box</a> that contains the
430434
table box itself and the caption's box (if present). The table and
431435
caption boxes retain their own content, padding, margin, and border
432436
areas, and the dimensions of the rectangular anonymous box are the
433-
smallest required to contain both. Margins collapse where the table
434-
box and caption box touch.
437+
smallest required to contain both. Vertical margins collapse where
438+
the table box and caption box touch.
439+
440+
<p><img src="images/top-caption.gif" alt="A table with a caption above
441+
it; both have margins and the margins between them are collapsed, as
442+
is normal for vertical margins.">
435443

436444
<h3>Caption position and alignment</h3>
437445

@@ -446,19 +454,22 @@ respect to the table box. Values have the following meanings:</p>
446454
<dt><strong>bottom</strong>
447455
<dd>Positions the caption box below the table box.
448456
<dt><strong>left</strong>
449-
<dd>Positions the caption box to the left of the
450-
table box.
457+
<dd>Positions the caption box to the left of the table box.
451458
<dt><strong>right</strong>
452-
<dd>Positions the caption box to the right of the
453-
table box.
459+
<dd>Positions the caption box to the right of the table box.
454460
</dl>
455461

456-
<P>To align caption content horizontally
457-
within the caption box, use the <span
458-
class="propinst-text-align">'text-align'</span>
459-
property. For vertical alignment, use the <span
460-
class="propinst-vertical-align">'vertical-align'</span>
461-
property.
462+
<P>To align caption content horizontally within the caption box, use
463+
the <span class="propinst-text-align">'text-align'</span>
464+
property. For vertical alignment of captions on the left or right
465+
side, use the <span
466+
class="propinst-vertical-align">'vertical-align'</span> property.
467+
468+
<P>The width of a caption that is on the left or right side of the
469+
table is computed as if the caption were an extra column. In other
470+
words, the width is computed by either the <a
471+
href="#auto-table-layout">automatic layout algorithm</a> or the <a
472+
href="#fixed-table-layout">fixed layout algorithm</a>.
462473

463474
<div class="example"><P>
464475
<P>In this example, the <span
@@ -479,6 +490,35 @@ bottom.)
479490
</PRE>
480491
</div>
481492

493+
<div class="example">
494+
<p>The following example shows how to put a caption in the left
495+
margin. The table itself is centered, by setting its left and right
496+
margins to 'auto', and the whole box with table and caption is shifted
497+
into the left margin by the same amount as the width of the caption.
498+
499+
<pre>
500+
BODY {
501+
margin-left: 8em
502+
}
503+
TABLE {
504+
margin-left: auto;
505+
margin-right: auto
506+
}
507+
CAPTION {
508+
margin-left: -8em;
509+
width: 8em;
510+
text-align: right;
511+
vertical-align: bottom
512+
}
513+
</pre>
514+
515+
<p>Assuming the width of the table is less than the available width,
516+
the rendering will be similar to this:
517+
518+
<p><img src="left-caption.gif" alt="A centered table with a caption in
519+
the left margin of the page">
520+
</div>
521+
482522
<h2>Visual layout of table contents</h2>
483523

484524
<P>Like other elements of the <a
@@ -527,6 +567,7 @@ only if there are enough rows: a cell cannot extend below the last row
527567
box; it is made shorter until it fits.
528568
</ol>
529569

570+
<!--
530571
<p>Unlike other CSS boxes, however, margins of table boxes collapse
531572
both vertically <em>and</em> horizontally. Thus, within a given row,
532573
horizontal margins between adjacent cells will collapse. Similarly,
@@ -562,6 +603,7 @@ below). Example:</em></p>
562603

563604
<p><em>the left column will be (1 + 3 + 3 =) 7cm high, and the right
564605
one (2 + 4 + 4 =) 10cm. Where do the extra 3cm go?</em>]
606+
-->
565607

566608
<p>Only four properties apply to column and column group elements:
567609
<span class="propinst-border">'border'</span>, <span
@@ -703,7 +745,7 @@ and columns. Values have the following meaning:</p>
703745

704746
<P>The two algorithms are described below.
705747

706-
<h4>Fixed table layout</h4>
748+
<h4><a name="fixed-table-layout">Fixed table layout</a></h4>
707749

708750
<P>With this (fast) algorithm in which the
709751
horizontal layout of the table does not depend on the
@@ -987,12 +1029,12 @@ border model. Values have the following meanings:</p>
9871029

9881030
<dl>
9891031
<dt><strong>none</strong>
990-
<dd>Use the 2�D border model.
1032+
<dd>Use the collapsing border model.
9911033
<dt><span class="index-inst" title="&lt;length&gt;"><span
9921034
class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
9931035
<span class="index-inst" title="&lt;length&gt;"><span
9941036
class="value-inst-length"><strong>&lt;length&gt;?</strong></span></span>
995-
<dd>Use the collapsing border model. In this case, the
1037+
<dd>Use the separated borders model. In this case, the
9961038
lengths specify the distance that separate adjacent cell borders.
9971039
If one length is specified, gives both the horizontal and vertical
9981040
spacing. If two are specified, the first gives the horizontal
@@ -1002,10 +1044,10 @@ not be negative.
10021044

10031045
<P>The models are described below.
10041046

1005-
<h3><a name="2D">The 2�D border model</a></h3>
1047+
<h3><a name="2D">The separated borders model</a></h3>
10061048

1007-
<p>In this model, each cell has a single rectangular border. The
1008-
<span class="propinst-border-spacing">'border-spacing'</span> property
1049+
<p>In this model, each cell has an individual border. The
1050+
<span class="propinst-cell-spacing">'cell-spacing'</span> property
10091051
specifies the distance between the borders of adjacent cells. This
10101052
space is filled with the background of the table element. Rows,
10111053
columns, row groups, and column groups cannot have borders (i.e., user
@@ -1039,10 +1081,10 @@ for more information about table dimension calculations.
10391081

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

1042-
<p>In the (more complex) collapsing border model, it is possible to
1084+
<p>In the collapsing border model, it is possible to
10431085
specify borders that surround all or part of a cell, row, row group,
1044-
column, and column group. Authors may specify internal rules with
1045-
this model.
1086+
column, and column group. Borders for HTML's RULE attribute can be
1087+
specified this way.
10461088

10471089
<p>Borders are centered on the grid lines between the cells. User
10481090
agents must find a consistent rule for rounding off in the case of an

0 commit comments

Comments
 (0)