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