csswg-drafts/css2/tables.src at 33601fbe3f8b9c001f3214b90e26e088f2f4453c · 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
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
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
92
786A
5
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.25 1998-03-21 21:22:49 ijacobs 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>
<h2>Introduction to tables</h2>

<p><span class="index-def" title="tables">Tables</span> represent
relationships between data. Authors specify these relationships in the
<a href="conform.html#doclanguage">document language</a> and specify
their <em>presentation</em> in CSS, in two ways: visually and aurally.

<P>Authors may specify the visual rendering of a table as a
rectangular grid of cells. Rows and columns of cells may be organized
into row groups and column groups. Rows, columns, row groups, row
columns, and cells may have borders drawn around them (there are two
border models in CSS2). Authors may align data vertically or
horizontally within a cell and align data in all cells of a row or
column.

<P>Authors may also specify the aural rendering of a table; how
headers and data will be spoken. In the document language, authors may
label cells and groups of cells so that when rendered aurally, cell
headers are spoken before cell data. In effect, this "serializes" the
table: users browsing the table aurally hear a sequence of headers
followed by data.

<div class="example"><P>
Here is a simple three-row, three-column
table described in HTML 4.0:

<PRE class="html-example">
&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;TD&gt;Cell 1        &lt;TD&gt;Cell 2
&lt;TR id="row2"&gt;
   &lt;TH&gt;Header 2      &lt;TD&gt;Cell 3        &lt;TD&gt;Cell 4
&lt;TR id="row3"&gt;
   &lt;TH&gt;Header 3      &lt;TD&gt;Cell 5        &lt;TD&gt;Cell 6
&lt;/TABLE&gt;
</PRE>

<P>This code creates one table (the TABLE element), three
rows (the TR elements), three header cells (the TH elements),
and six data cells (the TD elements). Note that the three columns
of this example are specified implicitly: there are as many
columns in the table as required by header and data cells.

<P>The following CSS rule centers the text horizontally
in the header cells and present the data with a bold font weight:</P>

<PRE>
TH { text-align: center; font-weight: bold }
</PRE>

<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: middle }
</PRE>

<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 { border-spacing: none }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }
</PRE>

<P>Note, however, that the borders around the rows overlap where the
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 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 row of data is to be spoken as a "Header, Data, Data":</P>

<PRE>
TH { speak-header: once }
</PRE>

<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>it would be spoken "Header1 Cell1 Header1 Cell2".
</div>

<P>The preceding example shows how CSS works with HTML 4.0 elements;
in HTML 4.0, the semantics of the various table elements (TABLE,
CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, and TD) are
well-defined. In other document languages (such as XML applications),
there may not be pre-defined table elements. Therefore, CSS2 allows
authors to <span class="index-inst" title="mapping elements to table
parts">"map"</span> document language elements to table elements via
the <span class="propinst-display">'display'</span> property. For
example, the following rule makes the FOO element act like an HTML
TABLE element and the BAR element act like a CAPTION element:</p>

<PRE class="example">
FOO { display : table }
BAR { display : table-caption }
</PRE>

<P>We discuss the various table elements in the following section. In
this specification, the term <span class="index-def" title="table
element"><dfn>table element</dfn></span> refers to any element
involved in the creation of a table. An <span class="index-def"
title="internal table element|table element::internal">"internal"
table element</span> is one that produces a row, row group, column,
column group, or cell.

<H2>The CSS table model</h2>

<P>The CSS table model is based on the HTML 4.0 table model, in which
the structure of a table closely parallels the visual layout of the
table. In this model, a table consists of an optional caption and any
number of rows of cells. The table model is said to be "row primary"
since authors specify rows, not columns, explicitly in the document
language. Columns are derived once all the rows have been specified --
the first cell of each row belongs to the first column, the second to
the second column, etc.). Rows and columns may be grouped structurally
and this grouping reflected in presentation (e.g., a border may
be drawn around a group of rows).

<P>Thus, the table model consists of tables, captions,
rows, row groups, columns, column groups, and cells.

<P>The CSS model does not require that the <a
href="conform.html#doclanguage">document language</a> include elements
that correspond to each of these components.  For document languages
(such as XML applications) that do not have pre-defined table
elements, authors must map document language elements to table
elements; this is done with the <span
class="propinst-display">'display'</span> property. The following
<span class="propinst-display">'display'</span> values assign table
semantics to an arbitrary element:</p>

<dl>
<dt><strong><span class="index-def" title="table"><a class="value-def"
name="value-def-table">table</a></span></strong> (In HTML: TABLE)

<dd>Specifies that an element defines a <a
href="visuren.html#block-level">block-level</a> table: it
is a rectangular block that participates
in a <a href="visuren.html#block-formatting">block formatting
context</a>.

<dt><strong><span class="index-def" title="inline-table"><a
class="value-def"
name="value-def-inline-table">inline-table</a></span></strong> (In
HTML: TABLE)

<dd>Specifies that an element defines an
<a href="visuren.html#inline-level">inline-level</a> table: it
is a rectangular block that participates
in an <a href="visuren.html#inline-formatting">inline formatting
context</a>).

<dt><strong><span class="index-def" title="table-row"><a
class="value-def"
name="value-def-table-row">table-row</a></span></strong> (In HTML: TR)

<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><span class="index-def" title="table-row-group"><a
class="value-def"
name="value-def-table-row-group">table-row-group</a></span></strong>
(In HTML: TBODY) <dd>Specifies that an element groups one or more
rows.

<dt><strong><span class="index-def" title="table-header-group"><a
class="value-def"
name="value-def-table-header-group">table-header-group</a></span></strong>
(In HTML: THEAD) <dd>Like 'table-row-group', but for visual rendering,
the row group is always displayed before all other rows and rowgroups
and after any top captions.

<dt><strong><span class="index-def" title="table-footer-group"><a
class="value-def"
name="value-def-table-footer-group">table-footer-group</a></span></strong>
(In HTML: TFOOT)

<dd>Like 'table-row-group', but for visual rendering, the row group is
always displayed after all other rows and rowgroups and before any
bottom captions.

<dt><strong><span class="index-def" title="table-column"><a
class="value-def"
name="value-def-table-column">table-column</a></span></strong> (In
HTML: COL)

<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><span class="index-def" title="table-column-group"><a
class="value-def"
name="value-def-table-column-group">table-column-group</a></span></strong>
(In HTML: COLGROUP)

<dd>Specifies that an element groups one or more columns.

<dt><strong><span class="index-def" title="table-cell"><a
class="value-def"
name="value-def-table-cell">table-cell</a></span></strong> (In HTML:
TD, TH)

<dd>Specifies that an element represents a table cell.

<dt><strong><span class="index-def" title="table-caption"><a
class="value-def"
name="value-def-table-caption">table-caption</a></span></strong> (In
HTML: CAPTION)

<dd>Specifies a caption for the table.
</dl>

<!-- table-column-header-group? StevenP 27/2/98 -->

<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>

<pre class="example">
TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }
</pre>

<P>User agents may <a href="syndata.html#ignore">ignore</a> these <span
class="propinst-display">'display'</span> property values for HTML
documents, since authors should not alter an element's expected
behavior.

<h3><a name="anonymous-boxes">Anonymous table boxes</a></h3>

<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>

<li>Any table element will automatically generate necessary table
boxes around itself, consisting of at least three nested boxes
corresponding to a 'table'/'inline-table' element, a 'table-row'
element, and a 'table-cell' element.

<li>If the parent of a 'table-cell' is not a 'table-row', a
'table-row' element will be assumed as its parent, and this
element will generate an anonymous box that spans
all consecutive 'table-cell' siblings.

<li>If the parent of a 'table-row' is not a 'table', 'inline-table',
or 'row-group' element, the 'table-row' will be assumed to have a
parent 'table' element that generates a box spanning all consecutive
siblings also requiring a 'table' parent.

<li>If the parent of a 'table-row-group' is not a 'table'
or 'inline-table', the 'table-row-group' will be assumed to have a
parent 'table' element that generates a box spanning all consecutive
siblings also requiring a 'table' parent.

<li>'table-cell' elements are inserted as children of a
'table-row' element to contain consecutive children that are not
'table-cell' elements.
</ol>

<div class="example">
<p>In this XML example, a 'table' element is assumed
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>because the associated style sheet is:</p>

<pre class="example">
HBOX {display: table-row}
VBOX {display: table-cell}
</pre>
</div><!-- end of example -->

<div class="example">
<p>In this example, three 'table-cell' elements are assumed
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>HTML user agents are not required to create
anonymous boxes according to the above rules.

<h2>Column selectors</h2>

<p>Table cells may belong to two contexts: rows and columns. However,
in the source document cells are descendants of rows, never of
columns. Nevertheless, some aspects of cells can be influenced by
setting properties on columns.

<p>The following properties apply to column and column-group elements:

<dl>
<dt><span class="propinst-border">'border'</span>

<dd>The various border properties apply to columns only if <span
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.

<dt><span class="propinst-background">'background'</span>

<dd>The background properties set the background for cells in the
column, but only if both the cell and row have transparent
backgrounds. See <a href="#table-layers">"Table layers and
transparency."</a>

<dt><span class="propinst-width">'width'</span>

<dd>The 'width' property of the column only applies if the <a
href="#layout-algos">fixed layout algorithm</a> is selected on the
<span class="propinst-table-layout">'table-layout'</span> property.

<dt><span class="propinst-column-span">'column-span'</span>

<dd>The number of grid columns spanned by this column or column group.

<dt><span class="propinst-visibility">'visibility'</span>

<dd>If the 'visibility' of a column is set to 'collapse', none of the
cells in the column are rendered, and cells that span into other
columns are clipped. In addition, the width of the table is diminished
by the width the column would have taken up. See <a
href="#dynamic-effects">"Dynamic effects"</a> below. Other values for
'visibility' have no effect.
</dl>

<div class="example">
<p>Here are some examples of style rules that set properties on
columns. The first two rules together implement the "rules" attribute
of HTML 4.0 with a value of "cols". The third rule makes the "totals"
column blue, the final two rules shows how to make a column a fixed
size, by using the <a href="#fixed-table-layout">fixed layout
algorithm</a>.

<pre>
COL {border-style: none solid}
TABLE {border-style: hidden}
COL.totals {background: blue}
TABLE {table-layout: fixed}
COL.totals {width: 5em}
</pre>
</div>

<!-- Make illustration. 27/2/98 -->


<h2>Tables in the visual rendering model</h2>

<P>In terms of the <a href="visuren.html">visual rendering model</a>,
a table may behave like a <a
href="visuren.html#block-level">block-level</a> or replaced <a
href="visuren.html#inline-level">inline-level</a> element.

<P>In both cases, the table element generates an <a
href="visuren.html#anonymous">anonymous</a> box that contains the
table box itself and the caption's box (if present). The table and
caption boxes retain their own content, padding, margin, and border
areas, and the dimensions of the rectangular anonymous box are the
smallest required to contain both. Vertical margins collapse where
the table box and caption box touch. Any repositioning of the table
must move the entire anonymous box, not just the table box, so
that the caption follows the table.

<div class="figure">
<p><img src="images/top-caption.gif" alt="A table with a caption above
it; both have margins and the margins between them are collapsed, as
is normal for vertical margins."> <p class="caption">Diagram of a
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 -->

<P>This property specifies the position of the caption box with
respect to the table box. Values have the following meanings:</p>

<dl>
<dt><strong>top</strong>
<dd>Positions the caption box above the table box.
<dt><strong>bottom</strong>
<dd>Positions the caption box below the table box.
<dt><strong>left</strong>
<dd>Positions the caption box to the left of the table box.
<dt><strong>right</strong>
<dd>Positions the caption box to the right of the table box.
</dl>

<p>Captions above or below a 'table' element are rendered very much as
if they were a block element before or after the table, except that
(1) they inherit inheritable properties from the table, and (2) are
not considered to be a block box for the purposes of any
'compact' or 'run-in' element that may precede the table.

<p>The width of a caption that is above or below a 'table' element is
computed as if the caption were a block-level child of the table's
parent. In other words, the width of the caption is independent of the
width of the table.

<P>The width of a caption that is on the left or right side of the
table must be set explicitly. The default value ('auto') will result in
the narrowest possible box.

<P>To align caption content horizontally within the caption box, use
the <span class="propinst-text-align">'text-align'</span>
property. For vertical alignment of captions on the left or right
side, use the <span
class="propinst-vertical-align">'vertical-align'</span> property. The
only meaningful values in this case are 'top', 'middle', and
'bottom'. All other values are treated the same as 'top'.

<div class="
F890
;example">
<p>In this example, the <span
class="propinst-caption-side">'caption-side'</span> property places
captions below tables.  The caption will be as wide as the parent of
the table, and caption text will be left-justified.

<PRE>
CAPTION { caption-side: bottom;
          width: auto;    /* default */
          text-align: left }
</PRE>
</div>

<div class="example">
<p>The following example shows how to put a caption in the left
margin. The table itself is centered, by setting its left and right
margins to 'auto', and the whole box with table and caption is shifted
into the left margin by the same amount as the width of the caption.

<pre>
BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}
</pre>

<p>Assuming the width of the table is less than the available width,
the rendering will be similar to this:

<div class="figure">
<p><img src="images/left-caption.gif" alt="A centered table with a
caption in the left margin of the page"><p class="caption"> Diagram
showing a centered table with the caption extending into the left
margin, as a result of a negative 'margin-left' property.

</div><!-- figure -->
</div><!-- example -->

<h2>Visual layout of table contents</h2>

<P>Like other elements of the <a
href="conform.html#doclanguage">document language</a>, table elements
generate rectangular <a href="box.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>

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

<p>This property specifies the <span class="index-inst"
title="&lt;integer&gt;"><span
class="value-inst-integer">&lt;integer&gt;</span></span> number of
rows spanned by a cell.

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

<p>This property specifies the <span class="index-inst"
title="&lt;integer&gt;"><span
class="value-inst-integer">&lt;integer&gt;</span></span> number of grid
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.
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
boxes fill the table from top to bottom in the order they occur in the
source document (i.e., the table occupies exactly as
many grid rows as there are row elements).

<li>A row group occupies the same grid cells as the rows it contains.

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

<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.
Visually, 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
the row specified by the cell's parent. The rectangle must be as far
to the left as possible, but it 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.)

<li>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.
</ol>

<div class="html-example">
<p>Here is an example:

<pre>
&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;TD colspan=2&gt;5
&lt;/TABLE&gt;
</pre>

<p>This table is in error. According to HTML 4.0, the rendering on the
left is allowed. However, CSS2 UAs must render this table as in the
figure on the right:

<div class="figure">
<p><img src="images/table-overlap.gif" alt="two renderings of an erroneous table"> <p class="caption">Two renderings of an erroneous
HTML 4.0 table. The rendering on the left is allowed by HTML 4.0, but
in CSS2 the one on the right is compulsory.
</div>
</div>

<h3><a name="table-layers">Table layers and transparency</a></h3>

<p>For the purposes of finding the background of each table cell, the
different table elements may be thought of as being on six
superimposed layers. The background set on an element in one of the
layers will only be visible if the layers above it have a transparent
background.

<div class="figure">
<p><img src="images/tbl-layers.gif" alt="schema of table layers"> <p
class="caption">Schema of table layers.
</div>

<ol>
<li>
<p>The lowest layer is a single plane, representing the table box
itself. 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. As the figure
shows, although all rows contain the same number of cells, not every
cell may have specified content These "empty" cells are transparent,
letting lower layers shine through.
</p>
</li>
</ol>

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

<PRE>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;STYLE type="text/css"&gt;
      TABLE { background: #ff0; border-collapse: collapse }
      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&gt;&lt;/TR&gt;
    &lt;/TABLE&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>might be rendered as follows:</p>

<div class="figure">
<p><img src="images/tbl-empty.gif" alt="Table with three empty cells
in bottom row"><p class="caption"> Table with three empty cells in the
bottom row.
</div>
</div>


<h3><a name="layout-algos">Table size algorithms:</a>
the <span class="propinst-table-layout">'table-layout'</span>
property</h3>

<p>CSS does not define an "optimal" layout for tables since, in many
cases, what is optimal is a matter of taste. CSS does define
constraints that user agents must respect when laying out a
table. User agents may use any algorithm they wish to do so, and are
free to prefer rendering speed over precision, except when the "fixed
layout algorithm" is selected.

<!-- Implementation notes? -->

<!-- #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 cells, rows,
and columns. Values have the following meaning:</p>

<dl>
<dt><strong>fixed</strong>
<dd>Use the fixed table layout algorithm
<dt><strong>auto</strong>
<dd>Use any automatic table layout algorithm
</dl>

<P>The two algorithms are described below.

<h4><a name="fixed-table-layout">Fixed table layout</a></h4>

<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 columns.

<P>The table's width is determined by the <span
<
6CEE
div id="LC743" class="react-file-line html-div" data-testid="code-cell" data-line-number="743" style="position:relative">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>

<ol>
<li>A column element with a value other than 'auto' for the
<span class="propinst-width">'width'</span> property sets the width
for that columns.

<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>

<p>In this manner, the user agent 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. However, a value of
'visible' will <em>not</em> increase the cell box dimensions; cell
content will flow into the adjacent cell.

<P>With this algorithm, the height of a row of cells may either be
computed dynamically (the 'auto' value), or may be set explicitly, in
which case overflow is handled in the same manner as with the width
dimension.

<p>It is possible that the sum of the widths of the columns exceeds
the table's width. In that case the larger width is used as the <a
href="cascade.html#actual-value">actual value</a> of the table's
'width' property.


<h4><a name="auto-table-layout">Automatic table layout</a></h4>

<P>This is a multiple-pass algorithm in which a table width is given
by the width of its columns (and intervening <a
href="#borders">borders</a>). This algorithm reflects the behavior of
several popular HTML user agents at the writing of this
specification. UAs are not required to implement this algorithm to
determine the table layout in the case that 'table-layout' is 'auto';
they can use any other algorithm.

<P>In this algorithm, the width of each column is based on the largest
unbreakable element in a cell in that column.  This algorithm may be
inefficient since it may demand multiple passes and requires the user
agent to have access to all the content in the table before
determining the final layout.

<p>For this algorithm, a value of 'auto' for the <span
class="propinst-width">'width'</span> property for the table element
means that the final table width is computed dynamically: it is the sum
of the column widths and the borders between them.

<p>Column widths are determined as follows:</p>

<ol>
<li>For each cell determine the minimum and maximum widths needed.
Cells with a given 'width' get a minimum width equal to the greater of
the specified width and the minimum needed width.

<li>For each column determine a maximum and minimum width from the
cells with a colspan of 1. If the column has a 'width' greater than
the minimum over the cells, then the 'width' is used as the minimum
width for the column.

<li>For each cell with a colspan of more than one, increase the
minimum and maximum widths of the columns it spans enough so the
combined minimum/maximum widths are at least those of the cell. If
possible, widen all spanned columns by approximately the same amount.
</ol>

<p>Now we have a maximum and minimum width per column. We now
determine final column widths. Cell spacing is appropriately added
into these calculations.

<p>If there is a table width given, and it is larger than the minimum
width needed, use it, and distribute the width over the columns in
some way.

<p class="note">Note that a table may thus be wider than its 'width'
property.

<p>If the table width is 'auto', there are three cases:

<ol>
<li>If the maximum needed width for the table is less than the width
of the table's containing block, use the maximum width.

<li>If the minimum width needed is greater than the width of the
containing block, use the minimum width.

<li>Otherwise, use the width of the containing block and distribute
the width over the columns in some way.
</ol>

<p>A percentage is relative to the table width. If the table's width
is 'auto', a pe
9ED2
rcentage 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.)</p>

<div class="note">
<P> <em><strong>Note.</strong> In this algorithm, rows (and row
groups) and columns (and column groups) both constrain and are
constrained by the dimensions of the cells they contain. Setting the
width of a column may indirectly influence the height of a row, and
vice versa.</em>
</div>

<h3><a name="alignment">Alignment of cell boxes</a></h3>

<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
it.  A cell may be smaller than a row, in which case its vertical
alignment is governed by the <span
class="propinst-vertical-align">'vertical-align'</span> property (much
as an inline box is aligned within a <a
href="visuren.html#line-box">line box</a>).

<P>Each cell's content has a baseline, a top, a middle, and a bottom,
and so does the row itself. The value of the <span
class="propinst-vertical-align">'vertical-align'</span> property of
the cells determines on which of these lines they are aligned.  In the
context of tables, values have the following meanings:</p>

<dl>
<dt><strong>baseline</strong></dt>
<dd>The baseline of the cell is put at the same height as the baseline
of the row (see below for the definition of baselines of cells and
rows)
<dt><strong>top</strong></dt>
<dd>The top of the cell box is aligned with the top of the row
<dt><strong>bottom</strong></dt>
<dd>The bottom of the cell box is aligned with the bottom of the row
<dt><strong>middle</strong></dt>
<dd>The center of the cell is aligned with the center of the row
<dt><strong>sub, super, text-top, text-bottom</strong></dt>
<dd>These values do not apply to cells; the cell is aligned at the
baseline instead
</dl>

<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 box. The maximum distance between the top of the
cell box 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>

<div class="figure">
<p><img src="images/cell-align.gif" alt="Example of vertically
aligning the cells"><p class="caption"> Diagram showing the effect of
various values of 'vertical-align' on table cells.
</div>

<p>Cell boxes 1 and 2 are aligned at their baselines. Cell box 2 has
the largest height above the baseline, so that determines the baseline
of the row.  Note that if there is no cell box aligned at its
baseline, the row will not have (nor 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>Cells that are smaller than the height of the row will get extra
padding added at their top or bottom. As a result, the <a
href="box.html#box-padding-area">padding area</a> at the top and
bottom of each cell box 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>

<!-- Add example -IJ -->

<h4><a name="column-alignment">Horizontal alignment in a column</a></h4>

<p>The horizontal alignment of a cell's contents within a cell box is
specified with the <span
class="propinst-text-align">'text-align'</span> property.

<P>Cell boxes in the same column may also be aligned horizontally
along a common axis, specified by the <span
class="propinst-text-align">'text-align'</span> property.  The <span
class="index-inst" title="&lt;string&gt;"><span
class="value-inst-string">&lt;string&gt;</span></span> value of this
property specifies how cell boxes in the same column will align
horizontally.

<P>When the 'text-align' property for more than one cell in a column
is set to a &lt;string&gt; the content of those cells is placed in
such a way that the beginnings of the first occurrence of the string in
the respective cells are placed directly over each other.

<p>If a cell has a string-values 'text-align', but the string doesn't
occur in the cell, the cell is aligned at the end of its content.

<p>Note that the strings do not have to be the same for each cell,
although they usually are.

<p>Aligning text in this way is only useful if the text fits on one
line. The result is undefined if the text spans more than one line.

<div class="example"><P>
The following style sheet:</p>

<PRE>
   TD { text-align: "." }
   TD:before { text-align: right; content: "$" }
</PRE>

<P>will cause the column of dollar figures
in the following HTML table:</p>

<PRE class="html-example">
  &lt;TABLE&gt;
  &lt;COL width="40"&gt;
  &lt;TR&gt; &lt;TH&gt;Long distance calls
  &lt;TR&gt; &lt;TD&gt; 1.30
  &lt;TR&gt; &lt;TD&gt; 2.50
  &lt;TR&gt; &lt;TD&gt; 10.80
  &lt;TR&gt; &lt;TD&gt; 111.01
  &lt;TR&gt; &lt;TD&gt; 85.
  &lt;TR&gt; &lt;TD&gt; 90
  &lt;TR&gt; &lt;TD&gt; .05
  &lt;TR&gt; &lt;TD&gt; .06
  &lt;/TABLE&gt;