-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathtables.html
More file actions
1619 lines (1334 loc) · 72.1 KB
/
tables.html
File metadata and controls
1619 lines (1334 loc) · 72.1 KB
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.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Tables</title>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" type="text/css">
<link rel="prev" href="text.html">
<link rel="next" href="ui.html">
<link rel="contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
<link rel="first" href="cover.html">
</head>
<body>
<div class="navbar">
<p><a href="text.html">previous</a>
<a href="ui.html">next</a>
<a href="cover.html#minitoc">contents</a>
<a href="propidx.html">properties</a>
<a href="indexlist.html">index</a>
</div>
<hr class="navbar">
<h1><a name="q0">17 Tables</a></h1>
<div class="subtoc">
<p><strong>Contents</strong>
<ul class="toc">
<li class="tocline2"><a href="tables.html#q1" class="tocxref">17.1 Introduction to tables</a>
<li class="tocline2"><a href="tables.html#q2" class="tocxref">17.2 The CSS table model</a>
<ul class="toc">
<li class="tocline3"><a href="tables.html#anonymous-boxes" class="tocxref">17.2.1 Anonymous table objects</a>
</ul>
<li class="tocline2"><a href="tables.html#q4" class="tocxref">17.3 Columns</a>
<li class="tocline2"><a href="tables.html#q5" class="tocxref">17.4 Tables in the visual formatting model</a>
<ul class="toc">
<li class="tocline3"><a href="tables.html#q6" class="tocxref">17.4.1 Caption position and alignment</a>
</ul>
<li class="tocline2"><a href="tables.html#q7" class="tocxref">17.5 Visual layout of table contents</a>
<ul class="toc">
<li class="tocline3"><a href="tables.html#table-layers" class="tocxref">17.5.1 Table layers and transparency</a>
<li class="tocline3"><a href="tables.html#width-layout" class="tocxref">17.5.2 Table width algorithms: the <span class="propinst-table-layout">'table-layout'</span> property</a>
<ul class="toc">
<li class="tocline4"><a href="tables.html#fixed-table-layout" class="tocxref">17.5.2.1 Fixed table layout</a>
<li class="tocline4"><a href="tables.html#auto-table-layout" class="tocxref">17.5.2.2 Automatic table layout</a>
</ul>
<li class="tocline3"><a href="tables.html#height-layout" class="tocxref">17.5.3 Table height algorithms</a>
<li class="tocline3"><a href="tables.html#column-alignment" class="tocxref">17.5.4 Horizontal alignment in a column</a>
<li class="tocline3"><a href="tables.html#dynamic-effects" class="tocxref">17.5.5 Dynamic row and column effects</a>
</ul>
<li class="tocline2"><a href="tables.html#borders" class="tocxref">17.6 Borders</a>
<ul class="toc">
<li class="tocline3"><a href="tables.html#separated-borders" class="tocxref">17.6.1 The separated borders model</a>
<ul class="toc">
<li class="tocline4"><a href="tables.html#empty-cells" class="tocxref">17.6.1.1 Borders and Backgrounds around empty cells: the <span class="propinst-empty-cells">'empty-cells'</span> property</a>
</ul>
<li class="tocline3"><a href="tables.html#collapsing-borders" class="tocxref">17.6.2 The collapsing border model</a>
<ul class="toc">
<li class="tocline4"><a href="tables.html#border-conflict-resolution" class="tocxref">17.6.2.1 Border conflict resolution</a>
</ul>
<li class="tocline3"><a href="tables.html#q20" class="tocxref">17.6.3 Border styles</a>
</ul>
</ul>
</div>
<h2><a name="q1">17.1 Introduction to tables</a></h2>
<p>This chapter defines the processing model for tables in CSS. Part
of this processing model is the layout. For the layout, this chapter
introduces two algorithms; the first, the fixed table layout
algorithm, is well-defined, but the second, the automatic table layout
algorithm, is not fully defined by this specification.
<p>For the automatic table layout algorithm, some widely deployed
implementations have achieved relatively close interoperability.
<p><a name="x0"><span class="index-def" title="tables">Table</span></a> layout can be
used to represent tabular relationships between data. Authors specify
these relationships in the <a href="conform.html#doclanguage">document
language</a> and can specify their <em>presentation</em> using
CSS 2.1.
<p>In a visual medium, CSS tables can also be used to achieve specific
layouts. In this case, authors should not use table-related elements
in the document language, but should apply the CSS to the relevant
structural elements to achieve the desired layout.
<p>Authors may specify the visual formatting 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, column
groups, and cells may have borders drawn around them (there are two
border models in CSS 2.1). Authors may align data vertically or
horizontally within a cell and align data in all cells of a row or
column.
<div class="example"><P style="display:none">Example(s):</P><p>
Here is a simple three-row, three-column
table described in HTML 4:
<pre class="html-example">
<TABLE>
<CAPTION>This is a simple 3x3 table</CAPTION>
<TR id="row1">
<TH>Header 1 <TD>Cell 1 <TD>Cell 2
<TR id="row2">
<TH>Header 2 <TD>Cell 3 <TD>Cell 4
<TR id="row3">
<TH>Header 3 <TD>Cell 5 <TD>Cell 6
</TABLE>
</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 presents the text in the header cells with a bold font
weight:
<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 center the text in each data cell:
<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:
<pre>
table { border-collapse: collapse }
tr#row1 { border: 3px solid blue }
tr#row2 { border: 1px solid black }
tr#row3 { border: 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:
<pre>
caption { caption-side: top }
</pre>
</div>
<p>The preceding example shows how CSS works with HTML 4 elements;
in HTML 4, 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, CSS 2.1 allows
authors to <a name="x1"><span class="index-inst" title="mapping elements to table
parts">"map"</span></a> document language elements to table elements via
the <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> 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><a name="internal"></a>We discuss the various table elements in the
following section. In
this specification, the term <a name="x2"><span class="index-def" title="table
element"><dfn>table element</dfn></span></a> refers to any element
involved in the creation of a table. An <a name="x3"><span class="index-def"
title="internal table element|table element::internal">"internal"
table element</span></a> is one that produces a row, row group, column,
column group, or cell.
<h2><a name="q2">17.2 The CSS table model</a></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 <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property. The following
<a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> values assign table
formatting rules to an arbitrary element:
<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.
<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
formatting, the row group is always displayed before all other rows
and row groups and after any top captions. Print user agents may
repeat header rows on each page spanned by a table. If a table
contains multiple elements with 'display: table-header-group', only
the first is rendered as a header; the others are treated as if they
had 'display: table-row-group'.
<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
formatting, the row group is always displayed after all other rows
and row groups and before any bottom captions. Print user agents may
repeat footer rows on each page spanned by a table. If a table
contains multiple elements with 'display: table-footer-group', only
the first is rendered as a footer; the others are treated as if they
had 'display: table-row-group'.
<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.
<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. All elements
with 'display: table-caption' must be rendered, as described in
<a href="#model">section 17.4.</a>
</dl>
<p>Replaced elements with these <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> values are treated as their
given display types during layout. For example, an image that is set
to 'display: table-cell' will fill the available cell space, and its
dimensions might contribute towards the table sizing algorithms, as
with an ordinary cell.
<p>Elements with <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> 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>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:
<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
<a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> property values for
HTML table elements, since HTML tables may be rendered using other
algorithms intended for backwards compatible rendering. However, this
is not meant to discourage the use of 'display: table' on other,
non-table elements in HTML.
<h3>17.2.1 <a name="anonymous-boxes">Anonymous table objects</a></h3>
<p>Document languages other than HTML may not contain all the elements
in the CSS 2.1 table model. In these cases, the "missing"
elements must be assumed in order for the table model to work. Any
table element will automatically generate necessary anonymous table
objects around itself, consisting of at least three nested objects
corresponding to a 'table'/'inline-table' element, a 'table-row'
element, and a 'table-cell' element. Missing elements generate <a
href="visuren.html#anonymous">anonymous</a> objects (e.g., anonymous
boxes in visual table layout) according to the following rules:
<ol>
<li>If the parent P of a 'table-cell' box T is not a
'table-row', a box corresponding to a 'table-row' will be
generated between P and T. This box will span all consecutive
'table-cell' sibling boxes of T.
<li>If the parent P of a 'table-row' box T is not a 'table',
'inline-table', 'table-header-group', 'table-footer-group' or
'table-row-group' box, a box corresponding to a 'table'
element will be generated between P and T.
If P is an 'inline' box, then the generated box must be an
'inline-table' box instead of a 'table' box.
This box will span all
consecutive sibling boxes of T that require a
'table' parent: 'table-row', 'table-row-group',
'table-header-group', 'table-footer-group', 'table-column',
'table-column-group', and 'table-caption'. T and T's siblings may
also be anonymous 'table-row' boxes generated by rule 1.
<li>If the parent P of a 'table-column' box T is not a 'table',
'inline-table', or 'table-column-group' box, a box
corresponding to a 'table' element will be generated between P and
T.
If P is an 'inline' box, then the generated box must be an
'inline-table' box instead of a 'table' box.
This box will span all consecutive sibling boxes
of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'table-caption', including
any anonymous 'table-row' boxes generated by rule 1.
<li>If the parent P of a 'table-row-group' (or 'table-header-group',
'table-footer-group', or 'table-column-group' or 'table-caption')
box T is not a 'table' or 'inline-table', a box
corresponding to a 'table' element will be generated between P and
T.
If P is an 'inline' box, then the generated box must be an
'inline-table' box instead of a 'table' box.
This box will span all consecutive sibling boxess
of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'table-caption', including
any anonymous 'table-row' boxes generated by rule 1.
<li>If a child T of a 'table' box (or 'inline-table') P is not a
'table-row-group', 'table-header-group', 'table-footer-group',
'table-caption', 'table-column', 'table-column-group' or 'table-row'
box, a box corresponding to a 'table-row' element will be
generated between P and T. This box spans all consecutive
siblings of T that are not 'table-row-group', 'table-header-group',
'table-footer-group', 'table-caption', 'table-column',
'table-column-group' or 'table-row' boxes.
<li>If a child T of a 'table-row-group' box (or
'table-header-group' or 'table-footer-group') P is not a 'table-row'
box, a box corresponding to a 'table-row' element will be
generated between P and T. This box spans all consecutive
siblings of T that are not 'table-row' boxes.
<li>If a child T of a 'table-row' box P is not a 'table-cell'
box, a box corresponding to a 'table-cell' element will be
generated between P and T. This box spans all consecutive
siblings of T that are not 'table-cell' boxes.
</ol>
<div class="example"><P style="display:none">Example(s):</P>
<p>In this XML example, a 'table' element is assumed to contain the
HBOX element:
<pre class="xml-example">
<HBOX>
<VBOX>George</VBOX>
<VBOX>4287</VBOX>
<VBOX>1998</VBOX>
</HBOX>
</pre>
<p>because the associated style sheet is:
<pre class="example">
HBOX { display: table-row }
VBOX { display: table-cell }
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P>
<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 formatting model</a>:
<pre class="xml-example">
<STACK>
<ROW>This is the <D>top</D> row.</ROW>
<ROW>This is the <D>middle</D> row.</ROW>
<ROW>This is the <D>bottom</D> row.</ROW>
</STACK>
</pre>
<p>The style sheet is:
<pre class="example">
STACK { display: inline-table }
ROW { display: table-row }
D { display: inline; font-weight: bolder }
</pre>
</div>
<h2><a name="q4">17.3 Columns</a></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><a href="box.html#propdef-border" class="noxref"><span class="propinst-border">'border'</span></a>
<dd>The various border properties apply to columns only if <a href="tables.html#propdef-border-collapse" class="noxref"><span
class="propinst-border-collapse">'border-collapse'</span></a> 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><a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a>
<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><a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a>
<dd>The <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property gives
the minimum width for the column.
<dt><a href="visufx.html#propdef-visibility" class="noxref"><span class="propinst-visibility">'visibility'</span></a>
<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 style="display:none">Example(s):</P>
<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 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>
<h2 id=model><a name="q5">17.4 Tables in the visual formatting model</a></h2>
<p>In terms of the visual formatting model, a table can behave like a
<a href="visuren.html#block-level">block-level</a> (for 'display:
table') or <a href="visuren.html#inline-level">inline-level</a> (for
'display: inline-table') element.
<p>In both cases, the table box generates an anonymous box that
contains the table box itself and any caption boxes (in document
order). The caption boxes are block-level boxes that retain their own
content, padding, margin, and border areas, and are rendered as normal
blocks inside the anonymous box. Whether the caption boxes are placed
before or after the table box is decided by the 'caption-side'
property, as described below.
<p>The anonymous box is a 'block' box if the table is block-level, and
an 'inline-block' box if the table is inline-level, except that this
block is never considered as a block for 'run-in' interaction, and
that the table box (not the anonymous box) is used when doing baseline
vertical alignment for an 'inline-table'. The width of the anonymous
box is the border-edge width of the table box inside it, as described
by section 17.5.2. Percentages on 'width' on the table are relative to
the anonymous box's containing block, not the anonymous box itself.
<p>The computed values of properties 'position', 'float', 'margin-*',
'top', 'right', 'bottom', and 'left' on the table box are used on the
anonymous box instead of the table box. The table box uses the initial
values for those properties.
<div class="figure">
<p><img src="images/top-caption.png" alt="A table with a caption above
it"><SPAN class="dlink"> <A name="img-top-caption" href="images/longdesc/top-caption-desc.html" title="Long description for example showing caption above a table">[D]</A></SPAN>
<p class="caption">Diagram of a table with a caption above it; the
top margin of the caption is collapsed with the top margin of the
table.
</div>
<h3><a name="q6">17.4.1 Caption position and alignment</a></h3>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'caption-side'"><a name="propdef-caption-side" class="propdef-title"><strong>'caption-side'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td>top | bottom | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>top
<tr valign=baseline><td><em>Applies to:</em> <td>'table-caption' elements
<tr valign=baseline><td><em>Inherited:</em> <td>yes
<tr valign=baseline><td><em>Percentages:</em> <td>N/A
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>as specified
</table>
</dl>
</div>
<p>This property specifies the position of the caption box with
respect to the table box. Values have the following meanings:
<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.
</dl>
<div class=note>
<p><em><strong>Note:</strong> CSS2 described a different width and
horizontal alignment behavior. That behavior will be introduced in
CSS3 using the values 'top-outside' and 'bottom-outside' on this
property.</em>
</div>
<p>To align caption content horizontally within the caption box, use
the <a href="text.html#propdef-text-align" class="noxref"><span class="propinst-text-align">'text-align'</span></a> property.
<div class="example"><P style="display:none">Example(s):</P>
<p>In this example, the <a href="tables.html#propdef-caption-side" class="noxref"><span
class="propinst-caption-side">'caption-side'</span></a> 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;
text-align: left }
</pre>
</div>
<h2><a name="q7">17.5 Visual layout of table contents</a></h2>
<p>Internal table elements generate rectangular <a
href="box.html#box-dimensions">boxes</a> with content and borders.
Cells have padding as well. Internal table elements do not have
margins.
<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 or earlier HTML versions; HTML imposes
its own limitations on row and column spans.
<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>A column box occupies one or more columns of grid cells. Column
boxes are placed next to each other in the order they occur. The
first column box may be either on the left or on the right,
depending on the value of the <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> property of the table.
<li>A column group box occupies the same grid cells as the columns
it contains.
<li>Cells may span several rows or columns. (Although CSS 2.1
doesn't define how the number of spanned rows or columns is
determined, a user agent may have special knowledge about the source
document; a future update of CSS may provide a way to express this
knowledge in CSS syntax.) Each cell is thus a rectangular box, one
or more grid cells wide and high. The top row of this rectangle is
in 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 box, and must be to the right of all cells in the same row that
are earlier in the source document. (This constraint holds if the
'direction' property of the table is 'ltr'; if the <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'rtl', interchange
"left" and "right" in the previous sentence.)
<li>A cell box cannot extend beyond the last row box of a table or
row-group; the user agents must shorten it until it fits.
</ol>
<p>The edges of the rows, columns, row groups and column groups in the
<a href="#collapsing-borders">collapsing borders model</a> coincide
with the hypothetical grid lines on which the borders of the cells are
centered. (And thus, in this model, the rows together exactly cover
the table, leaving no gaps; ditto for the columns.) In the <a
href="#separated-borders">separated borders model,</a> the edges
coincide with the <a href="box.html#border-edge">border edges</a> of
cells. (And thus, in this model, there may be gaps between the rows,
columns, row groups or column groups, corresponding to the <a href="tables.html#propdef-border-spacing" class="noxref"><span
class="propinst-border-spacing">'border-spacing'</span></a> property.)
<div class="note">
<p><em><strong>Note.</strong> Positioning and floating of table cells
can cause them not to be table cells anymore, according to the rules
in <a href="visuren.html#dis-pos-flo">section 9.7</a>. When floating
is used, the <a>rules on anonymous table objects</a> may cause an
anonymous cell object to be created as well.</em>
</div>
<div class="html-example">
<p>Here are two examples. The first is assumed to occur in an HTML
document, the second an XHTML document:
<pre>
<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>
</pre>
<pre>
<table>
<tr><td>1 </td><td rowspan="2">2 </td><td>3 </td><td>4 </td></tr>
<tr><td colspan="2">5 </td></tr>
</table>
</pre>
<p>The second is formatted as in the figure on the right. However, the
HTML table's rendering is explicitly undefined by HTML, and CSS
doesn't try to define it. User agents are free to render it, e.g., as
in the figure on the left.
<div class="figure">
<p><img src="images/table-overlap.png" alt="One table with overlapping
cells and one without"><SPAN class="dlink"> <A name="img-table-overlap" href="images/longdesc/table-overlap-desc.html" title="Long description for example showing how structurally
overlapping cells are rendered">[D]</A></SPAN> <p class="caption">On the left, one possible
rendering of an erroneous HTML 4 table; on the right, the only
possible formatting of a similar XHTML table.
</div>
</div>
<h3>17.5.1 <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.png" alt="schema of table layers"><SPAN class="dlink"> <A name="img-tbl-layers" href="images/longdesc/tbl-layers-desc.html" title="Long description of example of cell background calculation">[D]</A></SPAN>
<p class="caption">Schema of table layers.
</div>
<ol>
<li>The lowest layer is a single plane, representing the table box
itself. Like all boxes, it may be transparent.
<li>The next layer contains the column groups. Each column group
extends from the top of the cells in the top row to the bottom of
the cells on the bottom row and from the left edge of its leftmost
column to the right edge of its rightmost column. The background
covers exactly the full area of all cells that originate in the
column group, even if they span outside the column group, but this
difference in area does not affect background image positioning.
<li>On top of the column groups are the areas representing the
column boxes. Each column is as tall as the column groups and as
wide as a normal (single-column-spanning) cell in the column. The
background covers exactly the full area of all cells that originate
in the column, even if they span outside the column, but this
difference in area does not affect background image positioning.
<li>Next is the layer containing the row groups. Each row group
extends from the top left corner of its topmost cell in the first
column to the bottom right corner of its bottommost cell in the last
column.
<li>The next to last layer contains the rows. Each row is as wide as
the row groups and as tall as a normal (single-row-spanning) cell in
the row. As with columns, the background covers exactly the full
area of all cells that originate in the row, even if they span
outside the row, but this difference in area does not affect
background image positioning.
<li>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.
In the <a href="#separated-borders">separated borders model</a>
(<a href="tables.html#propdef-border-collapse" class="noxref"><span class="propinst-border-collapse">'border-collapse'</span></a> is
'separate'), if the value of their <a href="tables.html#propdef-empty-cells" class="noxref"><span
class="propinst-empty-cells">'empty-cells'</span></a> property is 'hide'
these "empty" cells are transparent through the cell, row, row
group, column and column group backgrounds, letting the table
background show through.
</ol>
<p>A "missing cell" is a cell in the row/column grid that is not
occupied by an element or pseudo-element. Missing cells are rendered
as if an anonymous table-cell box occupied their position in the grid.
<div class="html-example">
<p>In the following example, the first row contains four non-empty
cells, but the second row contains only one non-empty cell, 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
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Table example</TITLE>
<STYLE type="text/css">
TABLE { background: #ff0; border: solid black;
empty-cells: hide }
TR.top { background: red }
TD { border: solid black }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR CLASS="top">
<TD> 1
<TD rowspan="2"> 2
<TD> 3
<TD> 4
<TR>
<TD> 5
<TD>
</TABLE>
</BODY>
</HTML>
</pre>
<p>might be formatted as follows:
<div class="figure">
<p><img src="images/tbl-empty.png" alt="Table with three empty cells
in bottom row"><SPAN class="dlink"> <A name="img-tbl-empty" href="images/longdesc/tbl-empty-desc.html" title="Long description of example illustrating background calculation
">[D]</A></SPAN>
<p class="caption">Table with empty cells in the bottom row.
</div>
</div>
<p>Note that if the table has 'border-collapse: separate', the
background of the area given by the <a href="tables.html#propdef-border-spacing" class="noxref"><span
class="propinst-border-spacing">'border-spacing'</span></a> property is
always the background of the table element. See <a
href="#separated-borders">the separated borders model</a>.
<h3>17.5.2 <a name="width-layout">Table width algorithms:</a>
the <a href="tables.html#propdef-table-layout" class="noxref"><span class="propinst-table-layout">'table-layout'</span></a>
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.
<p>Note that this section overrides the rules that apply to
calculating widths as described in <a
href="visudet.html#Computing_widths_and_margins">section 10.3</a>. In
particular, if the margins of a table are set to '0' and the width to
'auto', the table will not automatically size to fill its containing
block. However, once the calculated value of 'width' for the table is
found (using the algorithms given below or, when appropriate, some
other UA dependant algorithm) then the other parts of section 10.3 do
apply. Therefore a table <em>can</em> be centered using left and right
'auto' margins, for instance.
<p>Future updates of CSS may introduce ways of making tables
automatically fit their containing blocks.
<div class="propdef">
<dl><dt>
<span class="index-def" title="'table-layout'"><a name="propdef-table-layout" class="propdef-title"><strong>'table-layout'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td>auto | fixed | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>auto
<tr valign=baseline><td><em>Applies to:</em> <td>'table' and 'inline-table' elements
<tr valign=baseline><td><em>Inherited:</em> <td>no
<tr valign=baseline><td><em>Percentages:</em> <td>N/A
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>as specified
</table>
</dl>
</div>
<p>The <a href="tables.html#propdef-table-layout" class="noxref"><span class="propinst-table-layout">'table-layout'</span></a>
property controls the algorithm used to lay out the table cells, rows,
and columns. Values have the following meaning:
<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>17.5.2.1 <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, the width of the columns, and borders or cell spacing.
<p>The table's width may be specified explicitly with the <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> property. A value of 'auto' (for
both 'display: table' and 'display: inline-table') means use the <a
href="#auto-table-layout">automatic table layout</a> algorithm.
However, if the table is a block-level table ('display: table') in
normal flow, a UA may (but does not have to) use the algorithm of <a
href="visudet.html#blockwidth">10.3.3</a> to compute a width and apply
fixed table layout even if the specified width is 'auto'.
<div class="example"><P style="display:none">Example(s):</P>
<p>If a UA supports fixed table layout when 'width' is 'auto', the
following will create a table that is 4em narrower than its containing
block:
<pre>
table { table-layout: fixed;
margin-left: 2em;
margin-right: 2em }
</pre>
</div>
<p>In the fixed table layout algorithm, the width of each column is
determined as follows:
<ol>
<li>A column element with a value other than 'auto' for the <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> property sets the width for
that column.
<li>Otherwise, a cell in the first row with a value other than
'auto' for the <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property
determines the width for that column. If the cell spans more than
one column, the width is divided over the columns.
<li>Any remaining columns equally divide the remaining horizontal
table space (minus borders or cell spacing).
</ol>
<p>The width of the table is then the greater of the value of the
<a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property for the table
element and the sum of the column widths (plus cell spacing or
borders). If the table is wider than the columns, the extra space
should be distributed over the columns.
<p>If a subsequent row has more columns than the greater of the number
determined by the table-column elements and the number determined by
the first row, then
additional columns must not be rendered. When using 'table-layout:
fixed', authors should not omit columns from the first row.
<p>In this manner, the user agent can begin to lay out the table once
the entire first row has been received. Cells in subsequent rows do
not affect column widths. Any cell that has content that overflows
uses the <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> property to
determine whether to clip the overflow content.
<h4>17.5.2.2 <a name="auto-table-layout">Automatic table layout</a></h4>
<p>In this algorithm (which generally requires no more than two
passes), the table's 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 <a href="tables.html#propdef-table-layout" class="noxref"><span
class="propinst-table-layout">'table-layout'</span></a> is 'auto'; they
can use any other algorithm even if it results in different behavior.
<p>Input to the automatic table layout must only include the width of
the containing block and the content of, and any CSS properties set
on, the table and any of its descendants.
<div class=note>
<p><em><strong>Note.</strong> This may be defined in more detail in
CSS3.</em>
</div>
<p><em>The remainder of this section is non-normative.</em>
<p>This algorithm may be inefficient since it requires the user agent
to have access to all the content in the table before determining the
final layout and may demand more than one pass.
<p>Column widths are determined as follows:
<ol>
<li><p>Calculate the minimum content width (MCW) of each cell: the
formatted content may span any number of lines but may not overflow
the cell box. If the specified <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> (W) of the cell is greater
than MCW, W is the minimum cell width. A value of 'auto' means that
MCW is the minimum cell width.
<p>Also, calculate the "maximum" cell width of each cell: formatting
the content without breaking lines other than where explicit line
breaks occur.
<li><p>For each column, determine a maximum and minimum column width
from the cells that span only that column. The minimum is that
required by the cell with the largest minimum cell width (or the
column <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a>, whichever is
larger). The maximum is that required by the cell with the largest
maximum cell width (or the column <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a>, whichever is larger).
<li><p>For each cell that spans more than one column, increase the
minimum widths of the columns it spans so that together, they are at
least as wide as the cell. Do the same for the maximum widths. If
possible, widen all spanned columns by approximately the same
amount.
<li><p>For each column group element with a 'width' other than
'auto', increase the minimum widths of the columns it spans, so that
together they are at least as wide as the column group's 'width'.
</ol>
<p>This gives a maximum and minimum width for each column. Column
widths influence the final table width as follows:
<ol>
<li>If the 'table' or 'inline-table' element's <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> property has a computed value
(W) other than 'auto', the property's value as used for layout is
the greater of W and the minimum width required by all the columns
plus cell spacing or borders (MIN). If W is greater than MIN, the
extra width should be distributed over the columns.
<li>If the 'table' or 'inline-table' element has 'width: auto',
the table width used for layout is the greater of the table's
containing block width and MIN. However, if the maximum width
required by the columns plus cell spacing or borders (MAX) is less
than that of the containing block, use MAX.
</ol>
<p>A percentage value for a column width is relative to the table
width. If the table has 'width: 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.)
You can’t perform that action at this time.