table-backgrounds-bc-cell-001-ref.xht (1589B)
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>Table background tests</title> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <meta http-equiv="Content-Style-Type" content="text/css" /> 5 <style type="text/css"> 6 7 html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } 8 body { padding: 15px; } 9 10 /* 11 table { 12 margin: 0px 3px 2px 4px; 13 border-width: 4px 2px 8px 6px; 14 15 height is 97px: 16 (2px of border outside height) 17 extra border width for top row: 0 18 cell * 5: == 19px * 5 == 95px 19 border-top: 2px; 20 padding-top: 1px; 21 height: 10px; 22 padding-bottom: 4px; 23 border-bottom: 2px; 24 extra border width for top row: 2px 25 (4px of border outside height) 26 27 width is 287px: 28 (3px of border outside width) 29 extra border width for left column: 2px 30 cell * 5: == 57px * 5 == 285px 31 border-left: 1px; 32 padding-left: 3px; 33 width: 50px; 34 padding-right: 2px; 35 border-right: 1px; 36 (1px of border outside width) 37 */ 38 39 div { width: 57px; height: 19px; margin: 40px 118px 86px 123px; } 40 div.color { background-color: aqua; } 41 42 div.imagetl, div.imagebr { 43 background-image: url(support/repeatable-diagonal-gradient-with-ticks.png); 44 } 45 46 div.imagetl { background-position: 1px 2px; } 47 div.imagebr { background-position: 56px 17px; } 48 49 </style> 50 </head> 51 <body> 52 53 <div class="color"></div> 54 <div class="imagetl"></div> 55 <div class="imagebr"></div> 56 57 58 59 </body></html>