csswg-drafts/css2/tables.src at 47c3caa1459c0dda4bf644911a38f3017304dbb3 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: tables.src,v 2.0 1998-02-02 18:48:41 bbos Exp $ -->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Tables</title>
</head>
<body>
<h1 align="center"><a name="visual-tables">Tables</a></h1>

<p>Tables are used to show the relations between pieces of data, by
arranging them into visual rows, columns, and cells. CSS2 can create
and control the presentation of these visual elements, but is not
intended to allow the arrangement of the structure itself.</p>

<p>Most CSS properties apply to table elements in the same manner as
they apply to block-level elements. However, because table columns in
the HTML model do not contain strictly, some properties behave
differently for tables. A few properties apply <em>only</em> to
tables.</p>

<h2>Building visual tables</h2>

<p>A visual table is composed of a single element designated as the
"table", which contains any number of table columns, column groups,
rows and row groups. This will allow XML data, for example, to be
visually presented as a table through CSS, without requiring any other
semantics to be attached to the XML element types in the document.</p>

<h3>The 'display' property</H3>

<p>There are ten values for the 'display' property that create tables
and parts of tables:</p>

<ul class="elementtypelist">
<li><em>'table'</em> - a 'table' is the outer container for all
tables. It defines a rectangular block element that contains any
number of row groups, rows, column groups, columns, and/or captions,
all arranged in an irregular grid pattern. Any rendering objects other
than these should be displayed outside the rectangular grid.  (HTML
analog: TABLE)</li>

<li><em>'inline-table'</em> - an 'inline-table' is identical to a
'table' element, except that it is treated as an inline replaced
element in the context surrounding the 'inline-table' element.</li>

<li><em>'table-column-group'</em> - a 'table-column-group' is a
container for a number of table columns. This allows the designer to
set presentation properties on a group of columns, for example
by placing
borders around a group of columns. (HTML analog:
COLGROUP)</li>

<li><em>'table-column'</em> - a 'table-column' is a grouping of all
cells in a particular vertical column. (HTML analog: COL)</li>

<li><em>'table-row-group'</em> - a 'table-column-group' is a container
for a number of table rows. This allows the designer to set
presentation properties on a group of rows, for example by placing
borders around a group of rows. (HTML analog: TBODY)</li>

<li><em>'table-header-group'</em> - A 'table-header-group' is a
special type of 'table-row-group' that is always displayed at the top
of the table, above all other rows and rowgroups, but below any
captions. (HTML analog: THEAD)</li>

<li><em>'table-footer-group'</em> - A 'table-footer-group' is a
special type of 'table-row-group' that is always displayed at the
bottom of the table, below all other rows and rowgroups, but above any
captions. (HTML analog: TFOOT)</li>

<li><em>'table-row'</em> - a 'table-row' groups all cells in
a particular horizontal row. (HTML analog: TR)</li>

<li><em>'table-cell'</em> - a 'table-cell' is the rectangular object
to be arranged in the table grid. Table cells are only allowed
inside rows. (HTML analog: TD)</li>

<li><em>'table-caption'</em> - a 'table-caption' is a special type of
table cell that appears as a row or column of its own in a table.
(HTML analog: CAPTION) <em>[Need better description; caption
is not really a row or column]</em></li>
</ul>

<p>Elements designated as 'inline-table' are considered to be replaced
elements; the others are to be treated as block-level elements for the
purposes of classification of interaction with other CSS properties -
that is, other CSS properties that are defined as applying to
block-level elements will apply to these elements. Some of the
semantics of these other properties may change, as defined
below.</p>

<p class="note">Throughout this specification, &quot;table
elements&quot; refers to any element designated as one of these ten
types; &quot;'table' elements&quot; refers to only those designated as

935E
display type 'table'. Similarly, unless single-quoted, &quot;row
groups&quot; refers to elements of type 'table-row-group',
'table-header-group' or 'table-footer-group', &quot;row elements&quot;
refers to row group elements or elements of type 'table-row', and
'columns' refers to elements of type 'table-column' or
'table-column-group'.</p>

<p>Tables are row-primary; that is, a branch of a structured document
is displayed as a visual table by designating one element as a
'table', with one or more of its child elements designated as 'rows',
and one or more elements inside each row designated as 'cells'.
'Row-groups' are optional structures used to group rows, and
potentially create specific margin, border or padding space around
them. 'Columns' and 'column-groups' are optional structures that
allow borders to be placed around specific rows and allow
CSS selectors to select cells and their children based on the columns
they appear in. The visual interactions of columns and rows are
described below in the table layout model.</p>

<div class="note">
<p>"Missing" elements are inserted as <a
href="visuren.html#anonymous">anonymous elements</a>. In other words:
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'.</p>

<p>In particular, if the parent 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.</p>

<p>Similarly, 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.</p>

<p>Analogously for a row group element.</p>
</div>

<div class="example">
<p>In this XML example, an anonymous 'table' is inserted to
contain the HBOX element:</p>

<pre class="xml-example">
&lt;HBOX&gt;
  &lt;VBOX&gt;George&lt;/VBOX&gt;
  &lt;VBOX&gt;4287&lt;/VBOX&gt;
  &lt;VBOX&gt;1998&lt;/VBOX&gt;
&lt;/HBOX&gt;
</pre>

<p>The style sheet is:</p>

<pre class="example">
HBOX {display: table-row}
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
encapsulated in anonymous inline boxes, as explained in <a
href="visuren.html#anonymous">"Visual rendering model."</a>:</p>

<pre class="xml-example">
&lt;STACK&gt;
  &lt;ROW&gt;This is the &lt;D&gt;top&lt;/D&gt; row.&lt;/ROW&gt;
  &lt;ROW&gt;This is the &lt;D&gt;middle&lt;/D&gt; row.&lt;/ROW&gt;
  &lt;ROW&gt;This is the &lt;D&gt;bottom&lt;/D&gt; row.&lt;/ROW&gt;
&lt;/STACK&gt;
</pre>

<p>The style sheet is:</p>

<pre class="example">
STACK {display: inline-table}
ROW {display: table-row}
D {display: inline; font-weight: bolder}
</pre>

</div><!-- end of example -->

<p>Elements with 'display' 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>

<h3><a name="cell-spanning-props">Cell spanning properties:</a> <span
class="propinst-column-span">'column-span'</span>, and
<span class="propinst-row-span">'row-span'</span></h3>

<!-- #include src=properties/row-span.srb -->

<p>This property specifies the number of rows spanned by a cell. A
cell box occupies a rectangle of <span
class="propinst-column-span">'column-span'</span> by <span
class="propinst-row-span">'row-span'</span> grid cells in a table.</p>

<!-- #include src=properties/column-span.srb -->

<p>This property specifies the number of grid columns spanned by a
cell, column, or column group.  A cell box occupies a rectangle of
<span class="propinst-column-span">'column-span'</span> by <span
class="propinst-row-span">'row-span'</span> grid cells in a table.</p>


<p><em>[Need description of how to determine the row/column
coordinates of cells and how to count column elements; or refer to
HTML&nbsp;4.0?]</em></p>


<h2>Layout model of elements inside tables</h2>

<p>The layout of tables is a fundamentally different algorithm than
that used to lay out regular block-level elements. Cells are laid out
on a two-dimensional grid-based pattern, unlike block elements, which
are laid on in a one-dimensional flow. This is further complicated by
the interactions of rows and columns.</p>


<h3>Margins on rows, columns and cells</h3>

<p>The most important difference between the layout model of tables in
CSS and the layout model of other elements (e.g., inline and
block-level elements) is that margins collapse horizontally as well as
vertically on elements inside tables (margins on the table element
itself function as expected on a replaced element). This collapsing
uses the same algorithm as vertical collapsing on regular block
elements in CSS. This is designed to allow easy duplication of the
HTML &quot;cell spacing&quot; effect - that is, 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-t
7862
able') 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>


<h3>Interactions between rows and columns</h3>

<p>Row and Column elements (and row-groups and column-groups) inside
tables essentially exist in two different layout planes. They both
constrain and are constrained by the layout of the cells they contain,
but rows and columns are not considered to interact with each other
directly when laying out the table. This means that widths on columns
may change the layout of the cell (due to word-breaking occurring with
different constraints), which may affect the height of the cell (and
hence the row), but the columns do not directly affect the row height
(and vice versa).</p>

<div class="example">
<p>Example of interaction:</p>

<p><img src="images/CSStbl1a.gif" width="617" height="551"
alt="a table with many borders that cross each other"></p>

<p>CSS rules:</p>

<pre class="example">
#tbl1 {
	margin: 1em;
	border: 1em solid cyan;
	padding: 1em;
}
</pre>

<P>HTML source:</p>
<PRE class="html-example">
&lt;P&gt;
&lt;TABLE id=&quot;tbl1&quot;&gt;
&lt;COL id=&quot;col1&quot;&gt;&lt;COL id=&quot;col2&quot;&gt;
&lt;TR id=&quot;row1&quot;&gt;
    &lt;TD id=&quot;cell1&quot;&gt;Cell1&lt;BR&gt;(Contents)&lt;/TD&gt;
    &lt;TD id=&quot;cell2&quot;&gt;Cell2&lt;BR&gt;(Contents)&lt;/TD&gt;
&lt;/TR&gt;&lt;TR id=&quot;row2&quot;&gt;
    &lt;TD id=&quot;cell3&quot;&gt;Cell3&lt;BR&gt;(Contents)&lt;/TD&gt;
    &lt;TD id=&quot;cell4&quot;&gt;Cell4&lt;BR&gt;(Contents)&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
</pre>

<DIV STYLE="text-align: center">
<H4>Labeled diagram:</H4>
<img src="images/CSStbl1.gif" width="617" height="551" alt="diagram
showing the positions of some of the margins, paddings, borders.">
</DIV>


<h3>The 'border-collapse' property</h3>

<!-- #include src=properties/border-collapse.srb -->

<p>This property selects between two different models of border
behavior. The HTML table behavior is that borders are drawn separately
for each cell, and cell spacing separates the borders. Another common
model in document publishing (and used in most popular word
processors) is a collapsing border model. In this model, adjacent
borders are collapsed into one border when drawn. If the border is
collapsed, any margin or column/row padding separating the two borders
is ignored.</p>

<p><a name="border-conflict-resolution"></a> The question of which
border to draw is determined by the following algorithm. If any border
side on an element is set to 'none', it is considered to have the
lowest possible precedence - in other words, any other non-'none'
values that may apply to that edge from other coincident border sides
will apply. (This does not apply to borders with style of 'hidden',
which has highest precedence - see the following section on border
style values for more information.)</p>

<ol>
<li>Borders on 'table' elements take precedence over borders on any
other table elements.</li>

<li>Borders on 'row-groups' take precedence over borders on 'rows',
and likewise borders on 'column-groups' take precedence over borders
on 'columns'.</li>

<li>Borders on any other type of table element take precedence over
'table-cell' elements.</li>

<li>If the adjacent elements are of the same type, the wider of the
two borders is used.  &quot;Wider&quot; takes into account the
border-style of 'none', so a "1px solid" border will take precedence
over a "20px none" border.</li>

<li>If the borders are of the same width, the border on the element
occurring first is used.</li>
</ol>

<p class="note">[A possible other rule, that tries to make sure thinner
borders never interrupt thicker ones: if <em>any</em> of the
coincident border is 'hidden', use that; otherwise, if <em>all</em> of
the coincident borders are 'none', use that; otherwise take the widest
border among the non-'none' styles; if there is more than one, prefer
'double' over 'solid' over 'dashed' over 'dotted ' over 'inset' over
'outset' over 'ridge over 'groove'. If there is still a conflict
(which must be in the color), the result is undefined.]

<p>The chosen border is drawn using its normal width, style and
color. Other coincident border edges are <b>not</b> drawn underneath,
in the case of partially transparent border styles (e.g. 'double'
borders, which have a transparent gap). </p>

<div class="note"><p> <strong>Note.</strong> [If the margins around
table elements are dropped in favor of a single 'cell-spacing'
property, as suggested above, the cell spacing and <span
class="propinst-border-collapse">'border-collapse'</span> can be
combined according to <span
class="propinst-cell-spacing">'cell-spacing'</span>]
</div>

<div class="example">
<p>Example of collapsed borders:

<p><img src="images/CSStbl2.gif" width="167" height="142" alt="an
example of a table with collapsed borders">

<p>CSS source:</p>

<pre class="example">
TABLE {		border: 5px solid yellow; }
#col1 {		border: 1px solid black; }
TD {		border: 5px solid red; }
TD.foo {	border: 11px solid blue; }
TD.bar {	border: 7px solid green; }
}
</pre>

<P>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;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR id=&quot;row2&quot;&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD class="foo"&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD class="bar"&gt;&amp;nbsp;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR id=&quot;row3&quot;&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR id=&quot;row4&quot;&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR id=&quot;row5&quot;&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
    &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
</pre>
</div><!-- example -->
</div><!-- note -->


<h3>The border styles</h3>

<p>Some of the <span class="index-inst"
title="&lt;border-style&gt;">border styles</span> are drawn
differently in tables than elsewhere (cf. <a
href="visudet.html#border-style-properties">"Border style"</a>):</p>

<dl>
<dt><span class="value-inst-none"><strong>none</strong></span>
<dd><span class="index-inst" title="'none'::as border
style">No border.</span>

<dt><strong><span class="index-inst" title="'hidden"><span
class="value-inst-hidden">hidden</span></span></strong>
<dd>Same as 'none', but if borders are drawn collapsed, also inhibits
any other border (see <a
href="#border-conflict-resolution">above</a>).

<dt><strong><span class="index-inst" title="'dotted'"><span
class="value-inst-dotted">dotted</span></span></strong>
<dd>The border is a series of dots.

<dt><strong><span class="index-inst" title="'dashed'"><span
class="value-inst-dashed">dashed</span></span></strong>
<dd>The border is a series of short line segments.

<dt><strong><span class="index-inst" title="'solid'"><span
class="value-inst-solid">solid</span></span></strong>
<dd>The border is a single line segment.

<dt><strong><span class="index-inst" title="'double'"><span
class="value-inst-double">double</span></span></strong>
<dd>The border is two solid lines. The sum of the two lines and the
space between them equals the value of <span
class="propinst-border-width">'border-width'</span>.

<dt><strong><span class="index-inst" title="'groove'"><span
class="value-inst-groove">groove</span></span></strong>
<dd>The border looks as though it were carved into the canvas.

<dt><strong><span class="index-inst" title="'ridge'"><span
class="value-inst-ridge">ridge</span></span></strong>
<dd>The opposite of 'grove': the border looks as though it were coming
out of the canvas.

<dt><strong><span class="index-inst" title="'inset'"><span
class="value-inst-inset">inset</span></span></strong>
<dd>If borders are drawn non-collapsed: the border makes the entire
box look as though it were embedded in the canvas. If borders are
collapsed: same as 'groove'.

<dt><strong><span class="index-inst" title="'outset'"><span
class="value-inst-outset">outset</span></span></strong>
<dd>The opposite of 'inset'. If borders are drawn non-collapsed: the
border makes the entire box look as though it were coming out of the
canvas. If borders are collapsed: same as 'ridge'.
</dl>

<div class="example">
<p>Example of hidden collapsed borders:

<p><img src="images/CSStbl3.gif" width="57" height="48" alt="table
with three omitted internal borders">

<p>HTML source:</p>

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

<h2>Computing widths and heights</h2>

<h3>The 'table-layout' property</h3>

<!-- #include src=properties/table-layout.srb -->

<p>The <span class="propinst-table-layout">'table-layout'</span>
property controls the algorithm used to lay out the table (that is, to
determine the widths and heights of the table and its individual
cells, rows and columns). A value of 'auto' denotes the
existing-practice HTML layout algorithm, which requires multiple
passes through the data and determines the width of a column of cells
based on the largest unbreakable element in a cell in the column. This
algorithm can be inefficient - not only does it require multiple
passes, it also requires the layout engine to have access to all the
content in the table before determining the final layout.</p>

<p>The 'fixed' layout algorithm is a much faster algorithm. The
horizontal layout of the table is not dependent on the content
contained in the cells, it is dependent entirely on the widths set on
the table and its columns and first row of cells. If the table has a
'width' of 'auto', the entire available space is used. The cell's
width is determined by any width value set on the column, overridden
by any value other than 'auto' set on the cell itself. All cells that
have a 'width' of 'auto' in the row are collected by the layout
engine, and when the end of the row is reached, all remaining
available space is evenly distributed among them.</p>

<p>In this manner, the engine lays out the first row of the table
immediately upon receiving the content. All subsequent rows have the
same widths of columns of cells - nothing in subsequent rows can
affect the widths of the columns.  Any cell that has content that
overflows its dimensions uses the <span
class="propinst-overflow">'overflow'</span> property to determine how
to handle the overflow content. Using the 'overflow' value of
'visible' will not grow the cell dimensions, but will slop the content
into the next cell. The height of the row of cells may be computed
(the 'auto' value), or may be set explicitly, in which case overflow
is handled in the same manner as with the width dimension.</p>


<h3>The 'collapse' value for the 'visibility' property</h3>

<p>The <span class="propinst-visibility">'visibility'</span> property
should take an additional value -- <span
class="value-def-collapse">'collapse'</span>. This <span
class="index-inst" title="collapse">value</span> works identically to
the 'hidden' value, except when it is applied to a 'table-row',
'table-row-group', 'table-column' or 'table-column-group'. When
applied to an entire table row or column, the 'collapse' property will
cause the entire row or column to be removed from the display, and the
space normally taken up by the row or column will be available for
other content - in this context only, it is similar to setting the
'display' property to 'none', except the cells that are no longer
displayed will continue to affect the horizontal layout of the table
columns (if a row is being collapsed) or vertical layout of table rows
(if a column is being collapsed). 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.</p>


<h2>'Vertical-align' on table cells</h2>

<p>The CSS <span
class="propinst-vertical-align">'vertical-align'</span> property also
applies to 'table-cell' elements. Only the 'top', 'middle', 'bottom',
'baseline' and percentage values are applicable - all other values
function as 'middle'. The property sets the vertical alignment of the
content inside the table cell, in the same manner as the HTML VALIGN
attribute on table cells (TD elements) does.</p>

<div class="note">
<p>The baseline of a cell is the baseline of the first line of text 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. The maximum distance between the top of the cell
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>

<p><img src="images/cell-align.gif" alt="Example of vertically
aligning the cells"></p>

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

<p>To avoid ambiguous situations, the alignment of cells proceeds in a
certain order. First the cells that are aligned on their baseline are
positioned. This will establish the baseline of the row. Next the
cells with alignment 'top' are positioned.</p>

<p>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.)</p>

<p>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.</p>

<p>Finally the remaining cells are positioned.</p>

<p>The area between the cell content and the border is part of the
cell's padding. The padding at the top and bottom of each cell after
positioning must be at least as large as the <span
class="propinst-padding">'padding'</span> property
specifies. The height of the row must be as small as possible without
violating this rule.</p>

</div><!-- end of note -->


<h2>Table elements in selectors</h2>

<p>Due to the uniqueness of the table structure, there are several
additional semantics and pseudo-classes for table cells.</p>

<div class="note">
<p>[The implementation cost of this feature may be high. It requires
two passes over the style sheet: first to determine the 'display',
'float' and 'position' properties using the normal element hierarchy,
than again searching for selectors that match cell element inside
column elements. In the second kind of rules, 'display', 'position'
and 'float' may not appear.]
</div>


<h3>Columns and cell selectors</h3>

<p>Due to their two-dimensional visual structure, cells have a unique
feature in CSS selectors - they have a dual inheritance chain for
contextual selectors, both from columns and from rows. This means a
stylesheet author can easily write a CSS rule that applies to all the
cells "contained" in a column, as well as all the cells contained in a
row. The columns are treated as a second parent to the cell, not
intermingled with the row inheritance chain.</p>

<P>CSS source:</p>
<pre class="example">
TR.foo TD { color: red }
COL.bar TD { color: blue }
COL.foo TR.bar TD { color: green }
TR.bar COL.bar TD { color: yellow }
</pre>

<P>HTML source:</p>
<PRE class="html-example">
&lt;P&gt;
&lt;TABLE&gt;
&lt;COLGROUP&gt;&lt;COL class=foo&gt;&lt;COL class=bar&gt;&lt;/COLGROUP&gt;
&lt;TR class=foo&gt;&lt;TD&gt;one&lt;/TD&gt;&lt;TD&gt;two&lt;/TD&gt;&lt;/TR&gt;
&lt;TR class=bar&gt;&lt;TD&gt;three&lt;/TD&gt;&lt;TD&gt;four&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
</pre>

<p>Cell &quot;one&quot; will be red, cell &quot;two&quot; will be
blue. Since the row and column inheritance chains are not
intermingled, the second two rules in the stylesheet will not apply to
any of the content, and therefore cell &quot;three&quot; will be
default color, and cell &quot;four&quot; will be blue.</p>

<p>If a cell appears in multiple columns (e.g. the cell has a
column-span of more than 1), all column parents will apply in the
selector.</p>


<h3>Row, column and cell pseudo-classes</h3>

<p>There are several new row and column pseudo-classes available for
table formatting.</p>

<p class="note">[The implementation cost of this feature is probably
even higher than the one in the previous section. Not only does it
require two passes, it also precludes the use of hash tables for quick
access to rules.]


<h4>Row pseudo-classes:</h4>

<ul class="elementtypelist">
<li><em>:row[n], :row[%n], :row[%n+m]</em> - 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).

<li><em>:row-even</em> - This is a shortcut for a pseudo-class of
":row[%2]".

<li><em>:row-odd</em> - This is a shortcut for a pseudo-class of
":row[%2+1.
</ul>


<h4>Column pseudo-classes:</h4>

<ul class="elementtypelist">
<li><em>:column[n], :column[%n], :column[%n+m]</em> - 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).

<li><em>:column-even</em> - This is a shortcut for a pseudo-class of
":column[%2]".

<li><em>:column-odd</em> - This is a shortcut for a pseudo-class of
":column[%2+1]".
</ul>


<h2>HTML 4.0 default table stylesheet</h2>

<p>The following CSS2 stylesheet attempts to codify HTML 4.0 table
behavior.</p>

<pre class="example">
TABLE {
	display: table;
	border-collapse: separate;
	table-layout: auto;
	}
COLGROUP { display: table-column-group; column-span: attr(colspan); }
COL { display: table-column; column-span: attr(span); }
THEAD { display: table-header-group; row-span: attr(rows) }
TBODY { display: table-footer-group; row-span: attr(rows) }
TFOOT { display: table-row-group; row-span: attr(rows) }
TR { display: table-row }
TD { display: table-cell; column-span: attr(colspan); row-span: attr(rowspan) }
CAPTION { display: table-caption }
</pre>

<hr>

<h2 title="material yet to be integrated, substituted, or discarded">UNDER CONSTRUCTION!</h2>

<p>The rest of this chapter is material that may merge with the
preceding sections, or replace some of them.

<h3><a name="table-layout">Table layout</a></h3>


<p>A table is made up of one table element, several columns possibly
grouped into column groups, and several rowgroups, containing rows,
which in turn contain cells. (For speech style sheets, the cells are
further subdivided into header and data cells.) The spatial layout is
governed by a grid. All boxes that make up the table have to align
with the grid.</p>

<p>One can think of a table as built from six layers. Each layer hides
the lower layers from view, unless it is transparent (or has
transparent parts). See Figure&nbsp;1.</p>

<object data="images/tbl-layers.gif">
<P>Figure 1. Schema of table layers.
<p><img src="images/tbl-layers.gif" alt="schema of tab
8DE2
le layers"></p>
</object>

<ol>
<li>
<p>The lowest layer is a single plane, representing the table box
itself. (Note that like all boxes, it may be transparent).</p>
</li>
<li>
<p>The next layer contains the column groups. The columns groups are
as tall as the table, but they need not cover the whole table
horizontally.</p>
</li>
<li>
<p>On top of the column groups are the areas representing the column
boxes. Like column groups, columns are as tall as the table, but need
not cover the whole table horizontally.</p>
</li>
<li>
<p>Next is the layer containing the row groups. Each row group is as
wide as the table. Together, the row groups completely cover the table
from top to bottom.</p>
</li>
<li>
<p>The last but one layer contains the rows. The rows also cover the
whole table.</p>
</li>
<li>
<p>The topmost layer contains the cells themselves, and the borders in
between them. As the figure shows, the cells don't have to cover the
whole table, but may leave "holes."</p>
</li>
</ol>

<p>To position the table elements, we assume a hypothetical grid,
consisting of an infinite number of columns and rows of "grid cells."
All table elements (table box, row boxes, cell boxes, etc.) are
rectangular and are aligned with the grid: they occupy a whole number
of grid cells, determined according to the following rules.</p>

<p>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 contained in it. 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.</p>

<p>Each row box occupies one row of grid cells. Together, the row
boxes fill the table from top to bottom in the order they occur in the
source document, or, stated differently: the table occupies exactly as
many grid rows as there are row elements.

<p>A row group occupies the same grid cells as the rows inside the row
group together.</p>

<p>Each cell occupies a rectangle of <span
class="propinst-column-span">'column-span'</span> grid cells wide and
<span class="propinst-row-span">'row-span'</span> grid cells high. The
top row of this rectangle of grid cells must be in the row occupied by
the cell's parent. The rectangle must be as far to the left as
possible, but may not overlap with any other cell, and must be to the
right of all cells in the same row that are earlier in the source
document. (If the <span class="propinst-direction">'direction'</span>
of the table is 'right-to-left', interchange "left" and "right" in the
previous sentence.) </p>

<p>Cells are <span class="propinst-row-span">'row-span'</span> high
only if there are enough rows: a cell cannot extend below the last row
box; it is made shorter until it fits.</p>

<p>Note that there may be "holes" left between the cells. These holes
are transparent, and the lower layers of the table are visible through
them. Example:</p>

<div class="html-example">
<PRE>
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;STYLE type="text/css"&gt;
  TABLE {background: #ff0}
  TD {background: red; border: double black}
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;
&lt;TABLE&gt;
  &lt;TR&gt;
    &lt;TD&gt; 1
    &lt;TD rowspan="2"&gt; 2
    &lt;TD&gt; 3
    &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>
</div>

<p><img src="images/tbl-empty.gif" alt='table with a "hole" in lower
left corner'></p>


<h3>Computing widths and heights</h3>

<p>The principle for determining the width of each column is as
follows:</p>

<ol>
<li>
<p>The width is determined by the <span
class="propinst-width">'width'</span> property of the column box.</p>
</li>
<li>
<p>However, if there is no column box, or its 'width' is 'auto', the
width is given by the width requirements of the cells in the
column.</p>
</li>
<li>
<p>If the value of <span class="propinst-width">'width'</span> for the
first cell in the column is 'auto', the UA finds the "optimal" width
of the column, based on some heuristics.</p>
</li>
</ol>

<p>More details are given below.</p>

<p>The width of the table is given by its <span
class="propinst-width">'width'</span> property. If that is 'auto', the
width is the sum of the column widths. More precisely: the sum of the
columns and the borders between them. See <a
href="#border-placement">"Placement of the borders"</a> below.</p>

<p
7DDE
>Finding the optimal width is complicated. In many cases, what is
optimal is a matter of taste. CSS therefore doesn't define what the
optimal width of each column is; a UA is free to use whatever
heuristics is has, and is also free to prefer speed over precision.
There are a few implementation hints in chapter [???].</p>

<p>The width computation is complicated by cells that span columns and
by widths that are specified as percentages. The problem of finding
the widths can  be regarded as a constraint resolution system, that
may be over- or under-constrained.</p>

<p>A percentage is relative to the table width. If the table's width
is '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 inside a table whose <span
class="propinst-width">'width'</span> is 'auto'.)</p>

<p>A cell that spans columns, provides a constraint on the sum of the
widths of the columns it spans.</p>

<p>If a cell's content doesn't "fit" the width of the column, the
<span class="propinst-overflow">'overflow'</span> property
determines what happens to it. Similarly, if the <span
class="propinst-width">'width'</span> of the table is not 'auto',
and the sum of the columns is not equal to the table's width, the
<span class="propinst-overflow">'overflow'</span> property of the
table determines what happens.</p>

<h3><a name="border-placement">Placement of the borders:</a> <span
class="propinst-cell-spacing">'cell-spacing'</span></h3>

<p>For block-level and inline elements, the position of the border
relative to the content of the element is determined by the margin
and the padding. But in a table, the positions of the borders are
constrained by the fact that they have to line up from one row to the
next and from one column to the next.</p>

<p>There are two distinct models for setting borders on table
cells. One is most suitable for so-called <span class="index-inst"
title="2½D borders">"2½D" borders</span> (<span class="index-inst"
title="ridge">ridge</span>,
<span class="index-inst" title="groove">groove</span>, <span
class="index-inst" title="inset">inset</span>, and <span
class="index-inst" title="outset">outset</span>) around individual
cells, the other is suitable for borders that are continuous from one
and of the table to the other. Many border styles can be achieved with
either model, so it is often a matter of taste which model is used.</p>

<p>The property <span
class="propinst-cell-spacing">'cell-spacing'</span> selects the model:

<!-- #include src=properties/cell-spacing.srb -->

<p>The 'cell-spacing' property only applies to elements with 'display:
table'.

<p>If the value is a length, that amount of space is kept open between
the borders of all cells. It may not be negative. The space is filled
with the background of the table element.</p>

<p>If there are two length values, the first one is the horizontal
spacing, and the second one is the vertical spacing. If there is just
one length value, it gives both the horizontal and vertical
spacing.</p>

<p>Each cell has its own borders, and the overall width of the table
is the sum of the cells, plus the cell-spacing between all borders
(see figure 3).</p>

<div class=figure>
<p><img src="images/tbl-spacing.gif" alt="A table with cell-spacing"></p>
<p class=caption>Figure 3. A table with 'cell-spacing' set to a length
value. Note that each cell has its own border, and the table has a
separate border as well.
</div>

<p>In this mode, rows, columns, row-groups and column groups cannot
have borders (i.e., user agents must <span class="index-inst"
title="skip"><a href="syndata.html#skip">skip</a></span> the border
properties for those elements.

<div class="example">
<p>The table in figure 3 could be the result of a style sheet like
this:

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

<p>If the value of 'cell-spacing' is 'none', the model is more
complicated. In this mode it is possible to set borders on rows and
row-groups that extend all the way from one end of the table to the
other, and it is possible, e.g., to create tables with rules between
the cells, and no rules on the outside of the table.

<p>The borders are centered on the grid lines between the cells. A
renderer has to 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>table-width</var> = <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> +
<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.</p>