1 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN">
3 <meta http-equiv=
"Content-Type" content=
"text/html; charset=ISO-8859-1">
4 <title>empty-cells: show
</title>
5 <link rel=
"next" href=
"backgr_layers-hide.html" title=
"Background Layers: empty-cell: hide">
6 <link rel=
"prev" href=
"backgr_position-table-cell.html" title=
"Background Position: Background on 'table-cell'">
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">
11 table
{background: blue
; empty-cells: show
}
12 tbody
, thead
{background: url
(edge.gif) right top no-repeat
}
13 tr
{background: url
(edge.gif) 0 10px no-repeat
}
14 .colgroup-A {background: url
(edge.gif) 100% 20px no-repeat
}
15 .col-3 {background: url
(edge.gif) 0 30px no-repeat
}
16 .c {background: url
(edge.gif) -20px 100% no-repeat
; min-height: 50px}
21 <h1>CSS2 Table Backgrounds Test Suite
</h1>
23 <h2>Part C: Background Layers
</h2>
25 <h3>empty-cells: show
</h3>
27 <p>Both tables should have a blue background.
</p>
29 <p>In table cell C (third cell in the first row), which is empty:
</p>
31 <li>Four sets of horizontal double violet stripes surrounded by aqua should run just inside the top border edge.
32 <li>One set of aqua-backed double violet stripes should run just inside the left, right, and bottom border edges.
33 <li>The third set along the top should turn down at the right edge and go under the fourth set to form the right-edge set.
34 <li>The fourth set should turn down at the left edge to form the left set.
35 <li>The bottom stripe should be straight and cut across
<em>over
</em> the side sets.
37 <p>In table cell A, (first cell in the first row):
</p>
39 <li>Three sets of horizontal aqua-backed double violet stripes should run just inside the top border edge.
40 <li>The first set should run across.
41 <li>The second set should turn down at the left edge, going over the third set to form another set that runs just inside the left border edge.
43 <p>In table cell D, (last cell in the first row):
</p>
45 <li>Two sets of horizontal aqua-backed double violet strips should run just inside the top border edge.
46 <li>The first set should turn down at the right edge, going under the second horizontal set to run vertically just inside the right border edge.
48 <p>In table cell G, (third cell in the second row):
</p>
50 <li>Two sets of horizontal aqua-backed double violet stripes should run just inside the top border edge.
51 <li>A set of vertical stripes should run down just inside the left border edge, going under both horizontal stripes.
52 <li>Another set of vertical stripes should run down just inside the right border edge, also going under both horizontal stripes.
56 <dd><a href=
"backgr_layers-hide.html">Background Layers: empty-cells: show
</a>
58 <dd><a href=
"backgr_position-table-cell.html">Background Position: Background on 'table-cell'
</a>
60 <dd><a href=
"./backgr_index.html">Table of Contents
</a>
63 <table class=
"separate">
64 <caption>With 'border-collapse: separate'
</caption>
65 <colgroup class=
"colgroup-A">
70 <colgroup class=
"colgroup-B">
75 <th class=
"a">TH A
</th>
76 <th class=
"b">TH B
</th>
78 <th class=
"d">TH D
</th>
83 <td class=
"m" colspan=
2>TD M
</td>
85 <td class=
"o">TD O
</td>
86 <td class=
"p">TD P
</td>
90 <td class=
"e" rowspan=
2>TD E
</td>
91 <td class=
"f">TD F
</td>
92 <td class=
"g">TD G
</td>
93 <td class=
"h">TD H
</td>
97 <td class=
"j">TD J
</td>
98 <td class=
"k">TD K
</td>
99 <td class=
"l">TD L
</td>
104 <table class=
"collapse">
105 <caption>With 'border-collapse: collapse'
</caption>
106 <colgroup class=
"colgroup-A">
111 <colgroup class=
"colgroup-B">
115 <tr class=
"th-row-1">
116 <th class=
"a">TH A
</th>
117 <th class=
"b">TH B
</th>
119 <th class=
"d">TH D
</th>
123 <tr class=
"tb-row-1">
124 <td class=
"m" colspan=
2>TD M
</td>
126 <td class=
"o">TD O
</td>
127 <td class=
"p">TD P
</td>
130 <tr class=
"tb-row-1">
131 <td class=
"e" rowspan=
2>TD E
</td>
132 <td class=
"f">TD F
</td>
133 <td class=
"g">TD G
</td>
134 <td class=
"h">TD H
</td>
136 <tr class=
"tb-row-2">
138 <td class=
"j">TD J
</td>
139 <td class=
"k">TD K
</td>
140 <td class=
"l">TD L
</td>
144 <div class=
"validity">
145 <a href=
"http://validator.w3.org/check/referer"><img
146 src=
"valid-html401.png" height=
"31" width=
"88"
147 alt=
"Valid HTML 4.01!"></a>
150 CSS2 Table Backgrounds Test Suite designed and written by fantasai
<fantasai
@escape.com
>