-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathtables.src
More file actions
1542 lines (1278 loc) · 55.8 KB
/
tables.src
File metadata and controls
1542 lines (1278 loc) · 55.8 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.0 Transitional//EN">
<html lang="en">
<!-- $Id: tables.src,v 2.40 1998-05-06 02:27:03 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 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, 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">
<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 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-collapse: collapse }
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.
<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 rowgroups
and after any top captions. Print user agents may repeat
footer rows on each page spanned by a table.
<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 rowgroups and before any
bottom captions. Print user agents may repeat footer rows on each page
spanned by a table.
<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.
</dl>
<p>Elements with <span class="propinst-display">'display'</span> set
to 'table-column' or 'table-column-group' are not rendered (exactly as
if they had 'display: none'), but they are useful, because they may
have attributes which induce a certain style for the columns they
represent.</p>
<p>The <a href="sample.html">default style sheet for HTML 4.0</a>
in the appendix illustrates the use of these values for HTML 4.0:</p>
<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 objects</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> objects (e.g.,
anonymous boxes in visual table layout) according to the following
rules:</p>
<ol>
<li>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.
<li>If the parent P of a 'table-cell' element T is not a 'table-row',
an object corresponding to a 'table-row' will be generated between P
and T. This object will span all consecutive 'table-cell' siblings
(in the document tree) of T.
<li>If the parent P of a 'table-row' element T is not a 'table',
'inline-table', or 'table-row-group' element, an
object corresponding to a 'table' element will be
generated between P and T. This object will span all consecutive siblings
(in the document tree) of T that require a 'table' parent:
'table-row', 'table-row-group', 'table-header-group',
'table-footer-group', 'table-column', 'table-column-group', and 'caption'.
<li>If the parent P of a 'table-row-group' (or 'table-header-group' or
'table-footer-group') element T is not a 'table' or 'inline-table', an
object corresponding to a 'table' element will be generated between P
and T. This object will span all consecutive siblings (in the document
tree) of T that require a 'table' parent: 'table-row',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-column', 'table-column-group', and 'caption'.
<li>If a child T of a 'table-row' element P is not a 'table-cell'
element, an object corresponding to a 'table-cell' element will be
generated between P and T. This object spans all consecutive siblings
of T 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">
<HBOX>
<VBOX>George</VBOX>
<VBOX>4287</VBOX>
<VBOX>1998</VBOX>
</HBOX>
</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 formatting model</a>:</p>
<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:</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 objects 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 <span class="propinst-width">'width'</span> property gives the
minimum width for the column.
<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 formatting model</h2>
<P>In terms of the <a href="visuren.html">visual formatting 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. Tables have
content, padding, borders, and margins.
<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 formatted 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) they are
not considered to be a block box for the purposes of any
'compact' or 'run-in' element that may precede the table.
<p>A caption that is above or below a table box also behaves like a
block box for width calculations; the width is computed with respect
to the width of the table box's containing block.
<p>For a caption that is on the left or right side of a table box, on
the other hand, a value other than 'auto' for <span
class="propinst-width">'width'</span> sets the width explicitly, but
'auto' tells the user agent to chose a "reasonable width". This may
vary between "the narrowest possible box" to "a single line", so we
recommend that users do not specify 'auto' for left and right caption
widths.
<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 a left or right caption box with
respect to the table box, 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="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;
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 formatting 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>, internal table
elements generate rectangular <a
href="box.html#box-dimensions">boxes</a> with content, padding, and
borders. They do not have margins, however.
<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>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 <span class="propinst-direction">'direction'</span>
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 CSS2 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
version 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 <span
class="propinst-direction">'direction'</span> is 'rtl', interchange
"left" and "right" in the previous sentence.)
<li>A cell box cannot extend beyond the last row box of a table; the
user agents must shorten it until it fits.
</ol>
<p><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.
<div class="html-example">
<p>Here are two examples. The first is assumed to occur in an HTML
document:
<pre>
<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>
</pre>
<pre>
<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>
</pre>
<p>The second table 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.gif" alt="One table with overlapping
cells and one without"> <p class="caption">On the left, one possible
rendering of an erroneous HTML 4.0 table; on the right, the only
possible formatting of a similar, non-HTML table.
</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 next to last 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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
TABLE { background: #ff0; border-collapse: collapse }
TD { background: red; border: double black }
</STYLE>
</HEAD>
<BODY>
<P>
<TABLE>
<TR>
<TD> 1
<TD rowspan="2"> 2
<TD> 3
<TD> 4
</TR>
<TR><TD></TD></TR>
</TABLE>
</BODY>
</HTML>
</PRE>
<P>might be formatted 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="width-layout">Table width 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.
<!-- #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, the width of the columns, and borders or cell spacing.
<P>The table's width may be specified explicitly with the <span
class="propinst-width">'width'</span> 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.
<P>In the fixed table layout algorithm, 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 column.
<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 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 <span class="propinst-width">'width'</span> 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>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 <span class="propinst-overflow">'overflow'</span> property to
determine whether to clip the overflow content.
<h4><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 <span
class="propinst-table-layout">'table-layout'</span> is 'auto'; they
can use any other algorithm.
<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:</p>
<ol>
<li>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
<span class="propinst-width">'width'</span> (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
then content without breaking lines other than where explicit line
breaks occur.
<li>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 <span
class="propinst-width">'width'</span>, whichever is larger). The
maximum is that required by the cell with the largest maximum cell
width (or the column <span class="propinst-width">'width'</span>,
whichever is larger).
<li>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.
</ol>
<p>This gives a maximum and minimum width for each column.
Column widths influence the final table width as follows:</p>
<ol>
<li>If the 'table' or 'inline-table' element's <span
class="propinst-width">'width'</span> property has a specified value (W)
other than 'auto', the property's computed value 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
computed table width 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.)</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="height-layout">Table height algorithms</a></h3>
<P>The height of a table is given by the <span
class="propinst-height">'height'</span> property for the 'table' or
'inline-table' element. A value of 'auto' means that the height is the
sum of the row heights plus any cell spacing or borders. Any other
value specifies the height explicitly; the table may thus be taller or
shorter than the height of its rows. CSS2 does not specify rendering
when the specified table height differs from the content height, in
particular whether content height should override specified height; if
it doesn't, how extra space should be distributed among rows that add
up to less than the specified table height; or, if the content height
exceeds the specified table height, whether the UA should provide a
scrolling mechanism. <strong>Note.</strong> Future versions of CSS
may specify this further.
<P>The height of a 'table-row' element's box is calculated once the
user agent has all the cells in the row available: it is the maximum
of the row's specified <span class="propinst-height">'height'</span>
and the minimum height (MIN) required by the cells. A <span
class="propinst-height">'height'</span> value of 'auto' for a
'table-row' means the computed row height is MIN. MIN depends on cell
box heights and cell box alignment (much like the calculation of a <a
href="visudet.html#line-height">line box</a> height). CSS2 does not
define what percentage values of <span
class="propinst-height">'height'</span> refer to when specified for
table rows and row groups.
<P>In CSS2, the height of a cell box is the maximum of the table
cell's <span class="propinst-height">'height'</span> property and the
minimum height required by the content (MIN). A value of 'auto' for
<span class="propinst-height">'height'</span> implies a computed value
of MIN. CSS2 does not define what percentage values of <span
class="propinst-height">'height'</span> refer to when specified for
table cells.
<P>CSS2 does not specify how cells that span more than row
affect row height calculations except that the sum of the row
heights involved must be great enough to encompass the cell
spanning the rows.
<P>The <span class="propinst-vertical-align">'vertical-align'</span>
property of each table cell determines its alignment within the row.
Each cell's content has a baseline, a top, a middle, and a bottom, as
does the row itself. In the context of tables, values for <span
class="propinst-vertical-align">'vertical-align'</span> 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>
<!-- Add statement about cells that span more than one row? -IJ -->
<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
the following order:</p>
<ol>
<li>First the cells that are aligned on their baseline are
positioned. This will establish the baseline of the row. Next the
cells with 'vertical-align: top' are positioned.
<li>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.)
<li>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.
<li>Finally the remaining cells are positioned.
</ol>
<P>Cell boxes that are smaller than the height of the row receive
extra top or bottom padding.</p>
<h3><a name="column-alignment">Horizontal alignment in a column</a></h3>
<p>The horizontal alignment of a cell's content within a cell box is
specified with the <span
class="propinst-text-align">'text-align'</span> property.
<P>When the <span class="propinst-text-align">'text-align'</span>
property for more than one cell in a column is set to a <span
class="index-inst" title="<string>"><span
class="value-inst-string"><string></span></span> value, the
content of those cells is aligned along a vertical axis. The beginning
of the string touches this axis. Character directionality determines
whether the string lies to the left or right of the axis.
<p>Aligning text in this way is only useful if the text fits on one
line. The result is undefined if the cell content spans more than one
line.
<p>If value of <span class="propinst-text-align">'text-align'</span>
for a table cell is a string but the string doesn't occur in the cell
content, the end of the cell's content touches the vertical axis of
alignment.
<p>Note that the strings do not have to be the same for each cell,
although they usually are.
<P>CSS does not provide a way specify the offset of the vertical
alignment axis with respect to the edge of a column box.
<div class="example"><P>
The following style sheet:</p>
<PRE>
TD { text-align: "." }
TD:before { content: "$" }
</PRE>
<P>will cause the column of dollar figures
in the following HTML table:</p>
<PRE class="html-example">
<TABLE>
<COL width="40">
<TR> <TH>Long distance calls