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-bc-row-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 8px 6px; /* collapsed */
20 padding: 3px 7px 8px 6px; /* ignored */
21 border-collapse: collapse;
22 }
23
24 td {
25 border: transparent solid;
26 border-width: 2px 0 4px 2px; /* collapsed */
27 padding: 1px 2px 4px 3px;
28 empty-cells: show;
29 }
30
31 div { height: 10px; width: 50px; }
32
33 table.color tr.t { background-color: aqua; }
34
35 table.imagetl tr.t, table.imagebr tr.t {
36 background-image: url(support/repeatable-diagonal-gradient-with-ticks.png);
37 }
38
39 table.imagetl tr.t { background-position: top left; /* default */ }
40 table.imagebr tr.t { background-position: bottom right; /* default */ }
41
42 </style>
43 </head>
44 <body>
45
46 <table class="color">
47 <colgroup><col></colgroup>
48 <colgroup class="t">
49 <col>
50 <col class="t">
51 <col>
52 </colgroup>
53 <colgroup><col></colgroup>
54 <tbody>
55 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
56 </tbody>
57 <tbody class="t">
58 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
59 <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>
60 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
61 </tbody>
62 <tbody>
63 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
64 </tbody>
65 </table>
66
67 <table class="imagetl">
68 <colgroup><col></colgroup>
69 <colgroup class="t">
70 <col>
71 <col class="t">
72 <col>
73 </colgroup>
74 <colgroup><col></colgroup>
75 <tbody>
76 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
77 </tbody>
78 <tbody class="t">
79 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
80 <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>
81 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
82 </tbody>
83 <tbody>
84 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
85 </tbody>
86 </table>
87
88 <table class="imagebr">
89 <colgroup><col></colgroup>
90 <colgroup class="t">
91 <col>
92 <col class="t">
93 <col>
94 </colgroup>
95 <colgroup><col></colgroup>
96 <tbody>
97 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
98 </tbody>
99 <tbody class="t">
100 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
101 <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>
102 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
103 </tbody>
104 <tbody>
105 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
106 </tbody>
107 </table>
108
109
110
111 </body></html>