1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html lang="en-US"><head>
3 <link rel="reference" href="table-backgrounds-bs-colgroup-001-ref.xht">
4 <title>CSS Test: table backgrounds</title>
5 <link rel="author" title="L. David Baron" href="http://dbaron.org/">
6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers">
8 <meta name="flags" content="">
9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10 <meta http-equiv="Content-Style-Type" content="text/css">
11 <style type="text/css">
12
13 html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
14 body { padding: 15px; }
15
16 table {
17 margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */
18 border: transparent solid;
19 border-width: 4px 2px 7px 3px;
20 padding: 3px 7px 8px 6px;
21 border-collapse: separate;
22 border-spacing: 2px 3px;
23 }
24
25 td {
26 border: transparent solid;
27 border-width: 2px 1px 4px 3px;
28 padding: 1px 2px 4px 3px;
29 empty-cells: show;
30 }
31
32 div { height: 10px; width: 50px; }
33
34 table.color colgroup.t { background-color: aqua; }
35
36 table.imagetl colgroup.t, table.imagebr colgroup.t {
37 background-image: url(support/repeatable-diagonal-gradient-with-ticks.png);
38 }
39
40 table.imagetl colgroup.t { background-position: top left; /* default */ }
41 table.imagebr colgroup.t { background-position: bottom right; /* default */ }
42
43 </style>
44 </head>
45 <body>
46
47 <table class="color">
48 <colgroup><col></colgroup>
49 <colgroup class="t">
50 <col>
51 <col class="t">
52 <col>
53 </colgroup>
54 <colgroup><col></colgroup>
55 <tbody>
56 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
57 </tbody>
58 <tbody class="t">
59 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
60 <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
61 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
62 </tbody>
63 <tbody>
64 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
65 </tbody>
66 </table>
67
68 <table class="imagetl">
69 <colgroup><col></colgroup>
70 <colgroup class="t">
71 <col>
72 <col class="t">
73 <col>
74 </colgroup>
75 <colgroup><col></colgroup>
76 <tbody>
77 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
78 </tbody>
79 <tbody class="t">
80 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
81 <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
82 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
83 </tbody>
84 <tbody>
85 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
86 </tbody>
87 </table>
88
89 <table class="imagebr">
90 <colgroup><col></colgroup>
91 <colgroup class="t">
92 <col>
93 <col class="t">
94 <col>
95 </colgroup>
96 <colgroup><col></colgroup>
97 <tbody>
98 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
99 </tbody>
100 <tbody class="t">
101 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
102 <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
103 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
104 </tbody>
105 <tbody>
106 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
107 </tbody>
108 </table>
109
110
111
112 </body></html>