|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
|
2 <head> |
|
3 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
|
4 <title>Background on 'table-column-group'</title> |
|
5 <link rel="next" href="backgr_simple-table-row.html" title="Background Area: Background on 'table-row'"> |
|
6 <link rel="prev" href="backgr_simple-table-row-group.html" title="Background Area: Background on 'table-row-group'"> |
|
7 <link rel="contents" href="./backgr_index,.html" title="Table of Contents"> |
|
8 <link rel="stylesheet" type="text/css" href="common.css"> |
|
9 <style type="text/css"> |
|
10 |
|
11 colgroup {background: black url(rainbowv.gif) top left} |
|
12 |
|
13 </style> |
|
14 </head> |
|
15 <body> |
|
16 <h1>CSS2 Table Backgrounds Test Suite</h1> |
|
17 |
|
18 <h2>Part A: Background Area</h2> |
|
19 |
|
20 <h3>Background on 'table-column-group'</h3> |
|
21 |
|
22 <p class="scope">The first column group spans the first three |
|
23 columns. The second column group only contains the last column. |
|
24 <p class="clip">The table column group background should be visible |
|
25 within the border edge of each cell originating in the column |
|
26 group. Within each column group, all stripes should line up as if |
|
27 the cells were cutouts in a stencil placed over the column group |
|
28 background. Furthermore, the horizontal stripes should also align |
|
29 across the two column groups.</p> |
|
30 <p class="position">A purple band should align with the top border |
|
31 edge of the cells in the first row. An aqua stripe should align a |
|
32 few pixels to the right of the left border edge of cells in the |
|
33 column group's leftmost column.</p> |
|
34 |
|
35 <dl> |
|
36 <dt>next |
|
37 <dd><a href="backgr_simple-table-row.html">Background Area: Background on 'table-row'</a> |
|
38 <dt>previous |
|
39 <dd><a href="backgr_simple-table-row-group.html">Background Area: Background on 'table-row-group'</a> |
|
40 <dt>contents |
|
41 <dd><a href="./backgr_index.html">Table of Contents</a> |
|
42 </dl> |
|
43 |
|
44 |
|
45 <table class="separate"> |
|
46 <caption>With 'border-collapse: separate'</caption> |
|
47 <colgroup class="colgroup-A"> |
|
48 <col class="col-1"> |
|
49 <col class="col-2"> |
|
50 <col class="col-3"> |
|
51 </colgroup> |
|
52 <colgroup class="colgroup-B"> |
|
53 <col class="col-4"> |
|
54 </colgroup> |
|
55 <thead> |
|
56 <tr class="th-row-1"> |
|
57 <th class="a">TH A</th> |
|
58 <th class="b">TH B</th> |
|
59 <th class="c">TH C</th> |
|
60 <th class="d">TH D</th> |
|
61 </tr> |
|
62 </thead> |
|
63 <tfoot> |
|
64 <tr class="tf-row-1"> |
|
65 <td class="m" colspan=2>TD M</td> |
|
66 |
|
67 <td class="o">TD O</td> |
|
68 <td class="p">TD P</td> |
|
69 </tfoot> |
|
70 <tbody> |
|
71 <tr class="tb-row-1"> |
|
72 <td class="e" rowspan=2>TD E</td> |
|
73 <td class="f">TD F</td> |
|
74 <td class="g">TD G</td> |
|
75 <td class="h">TD H</td> |
|
76 </tr> |
|
77 <tr class="tb-row-2"> |
|
78 |
|
79 <td class="j">TD J</td> |
|
80 <td class="k">TD K</td> |
|
81 <td class="l">TD L</td> |
|
82 </tr> |
|
83 </tbody> |
|
84 </table> |
|
85 |
|
86 <table class="collapse"> |
|
87 <caption>With 'border-collapse: collapse'</caption> |
|
88 <colgroup class="colgroup-A"> |
|
89 <col class="col-1"> |
|
90 <col class="col-2"> |
|
91 <col class="col-3"> |
|
92 </colgroup> |
|
93 <colgroup class="colgroup-B"> |
|
94 <col class="col-4"> |
|
95 </colgroup> |
|
96 <thead> |
|
97 <tr class="th-row-1"> |
|
98 <th class="a">TH A</th> |
|
99 <th class="b">TH B</th> |
|
100 <th class="c">TH C</th> |
|
101 <th class="d">TH D</th> |
|
102 </tr> |
|
103 </thead> |
|
104 <tfoot> |
|
105 <tr class="tf-row-1"> |
|
106 <td class="m" colspan=2>TD M</td> |
|
107 |
|
108 <td class="o">TD O</td> |
|
109 <td class="p">TD P</td> |
|
110 </tfoot> |
|
111 <tbody> |
|
112 <tr class="tb-row-1"> |
|
113 <td class="e" rowspan=2>TD E</td> |
|
114 <td class="f">TD F</td> |
|
115 <td class="g">TD G</td> |
|
116 <td class="h">TD H</td> |
|
117 </tr> |
|
118 <tr class="tb-row-2"> |
|
119 |
|
120 <td class="j">TD J</td> |
|
121 <td class="k">TD K</td> |
|
122 <td class="l">TD L</td> |
|
123 </tr> |
|
124 </tbody> |
|
125 </table> |
|
126 <div class="validity"> |
|
127 <a href="http://validator.w3.org/check/referer"><img |
|
128 src="valid-html401.png" height="31" width="88" |
|
129 alt="Valid HTML 4.01!"></a> |
|
130 </div> |
|
131 <address> |
|
132 CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> |
|
133 </address> |
|
134 |
|
135 </body> |
|
136 </html> |