|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
|
2 <head> |
|
3 <title>Background on 'table-cell'</title> |
|
4 <link rel="next" href="backgr_layers-opacity.html" title="Background Layers: opacity"> |
|
5 <link rel="prev" href="backgr_border-table-column.html" title="Background with Borders: Background on 'table-column'"> |
|
6 <link rel="contents" href="./backgr_index.html" title="Table of Contents"> |
|
7 <link rel="stylesheet" type="text/css" href="common.css"> |
|
8 <style type="text/css"> |
|
9 |
|
10 table {border: 5px dotted} |
|
11 .e {background: black url(edge.gif) top left no-repeat} |
|
12 .m {background: black url(edge.gif) bottom right no-repeat} |
|
13 |
|
14 </style> |
|
15 </head> |
|
16 <body> |
|
17 <h1>CSS2 Table Backgrounds Test Suite</h1> |
|
18 |
|
19 <h2>Part D: Background with Borders</h2> |
|
20 |
|
21 <h3>Background on 'table-cell'</h3> |
|
22 |
|
23 <p>Two cells are styled.</p> |
|
24 <p>There should be three aqua stripes just inside the top and left padding edges of cell E.</p> |
|
25 <p>There should be three aqua stripes just inside the bottom and right padding edges of Cell M</a> |
|
26 |
|
27 <dl> |
|
28 <dt>next |
|
29 <dd><a href="backgr_layers-opacity.html">Special Tests: Opacity</a> |
|
30 <dt>previous |
|
31 <dd><a href="backgr_border-table-column.html">Background with Borders: Background on 'table-column'</a> |
|
32 <dt>contents |
|
33 <dd><a href="./backgr_index.html">Table of Contents</a> |
|
34 </dl> |
|
35 |
|
36 <table class="separate"> |
|
37 <caption>With 'border-collapse: separate'</caption> |
|
38 <colgroup class="colgroup-A"> |
|
39 <col class="col-1"> |
|
40 <col class="col-2"> |
|
41 <col class="col-3"> |
|
42 </colgroup> |
|
43 <colgroup class="colgroup-B"> |
|
44 <col class="col-4"> |
|
45 </colgroup> |
|
46 <thead> |
|
47 <tr class="th-row-1"> |
|
48 <th class="a">TH A</th> |
|
49 <th class="b">TH B</th> |
|
50 <th class="c">TH C</th> |
|
51 <th class="d">TH D</th> |
|
52 </tr> |
|
53 </thead> |
|
54 <tfoot> |
|
55 <tr class="tf-row-1"> |
|
56 <td class="m" colspan=2>TD M</td> |
|
57 |
|
58 <td class="o">TD O</td> |
|
59 <td class="p">TD P</td> |
|
60 </tfoot> |
|
61 <tbody> |
|
62 <tr class="tb-row-1"> |
|
63 <td class="e" rowspan=2>TD E</td> |
|
64 <td class="f">TD F</td> |
|
65 <td class="g">TD G</td> |
|
66 <td class="h">TD H</td> |
|
67 </tr> |
|
68 <tr class="tb-row-2"> |
|
69 |
|
70 <td class="j">TD J</td> |
|
71 <td class="k">TD K</td> |
|
72 <td class="l">TD L</td> |
|
73 </tr> |
|
74 </tbody> |
|
75 </table> |
|
76 |
|
77 <table class="collapse"> |
|
78 <caption>With 'border-collapse: collapse'</caption> |
|
79 <colgroup class="colgroup-A"> |
|
80 <col class="col-1"> |
|
81 <col class="col-2"> |
|
82 <col class="col-3"> |
|
83 </colgroup> |
|
84 <colgroup class="colgroup-B"> |
|
85 <col class="col-4"> |
|
86 </colgroup> |
|
87 <thead> |
|
88 <tr class="th-row-1"> |
|
89 <th class="a">TH A</th> |
|
90 <th class="b">TH B</th> |
|
91 <th class="c">TH C</th> |
|
92 <th class="d">TH D</th> |
|
93 </tr> |
|
94 </thead> |
|
95 <tfoot> |
|
96 <tr class="tf-row-1"> |
|
97 <td class="m" colspan=2>TD M</td> |
|
98 |
|
99 <td class="o">TD O</td> |
|
100 <td class="p">TD P</td> |
|
101 </tfoot> |
|
102 <tbody> |
|
103 <tr class="tb-row-1"> |
|
104 <td class="e" rowspan=2>TD E</td> |
|
105 <td class="f">TD F</td> |
|
106 <td class="g">TD G</td> |
|
107 <td class="h">TD H</td> |
|
108 </tr> |
|
109 <tr class="tb-row-2"> |
|
110 |
|
111 <td class="j">TD J</td> |
|
112 <td class="k">TD K</td> |
|
113 <td class="l">TD L</td> |
|
114 </tr> |
|
115 </tbody> |
|
116 </table> |
|
117 <div class="validity"> |
|
118 <a href="http://validator.w3.org/check/referer"><img |
|
119 src="valid-html401.png" height="31" width="88" |
|
120 alt="Valid HTML 4.01!"></a> |
|
121 </div> |
|
122 <address> |
|
123 CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> |
|
124 </address> |
|
125 |
|
126 </body> |
|
127 </html> |