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