third_party/WebKit/LayoutTests/fast/table/border-collapsing/004.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
   2 <html><head>
   3 <title>Table Border Models</title>
   4 <style type="text/css">
   5 TABLE   { margin: 1em; width: auto; border: medium solid blue; }
   6 TD      { border: thin solid green; padding: 5px; }
   7 TH { border: medium solid purple; padding: 5px; }
   8 TABLE.one, TABLE.two { border-spacing: 1em; }
   9 TABLE.one { border-collapse: collapse; }
  10 TABLE.two { border-collapse: separate; }
  11 TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
  12 TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
  13 TABLE.five { border-collapse: separate; }
  14 TABLE.five, TABLE.five TD, TABLE.five TH, TABLE.five CAPTION { border: none; }
  15 TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
  16         { border: medium solid red; }
  17 </style>
  18 </head>
  19 <body>
  20 <h1>Table Border Models</h1>
  21
  22 <p>This tests tests the <a
  23 href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS2 spec
  24 rules on table borders</a>.  The styles applied here are:</p>
  25
  26 <pre>
  27 TABLE   { margin: 1em; border: medium solid blue; }
  28 TD      { border: thin solid green; padding: 5px; }
  29 TH { border: medium solid purple; padding: 5px; }
  30 TABLE.one, TABLE.two { border-spacing: 1em; }
  31 TABLE.one { border-collapse: collapse; }
  32 TABLE.two { border-collapse: separate; }
  33 TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
  34 TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
  35 TABLE.five { border-collapse: separate; }
  36 TABLE.five, TABLE.five TD, TABLE.five TH { border: none; }
  37 TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
  38         { border: medium solid red; }
  39 </pre>
  40
  41 <table class="one">
  42  <tr>
  43   <th>Header One</th>
  44   <th>Header Two</th>
  45   <th>Header Three</th>
  46  </tr>
  47  <tr>
  48   <td>
  49    This table uses the collapsed borders model.
  50   </td>
  51   <td>
  52    This means that elements within the cell have no border-spacing.
  53   </td>
  54   <td>
  55    Since it has collapsed borders, the borders on the header cells,
  56    on all sides, should be medium solid purple.
  57   </td>
  58  </tr>
  59  <tr>
  60   <td>
  61    The border of the table itself should be medium solid blue, except
  62    where header cells override the border.
  63   </td>
  64   <td>
  65    The borders that I haven't already mentioned (all the other internal
  66    ones) should be thin solid green.
  67   </td>
  68   <td>
  69    This table should have a 1em margin around all edges.  This margin
  70    is measured from the <em>middle</em> of its border.
  71   </td>
  72  </tr>
  73 </table>
  74
  75
  76 <table class="two">
  77  <tr>
  78   <th>Header One</th>
  79   <th>Header Two</th>
  80   <th>Header Three</th>
  81  </tr>
  82  <tr>
  83   <td>
  84    This table uses the separated borders model.
  85   </td>
  86   <td>
  87    This means that elements within the cell have border-spacing of 1em.
  88   </td>
  89   <td>
  90    The borders on the header cells,
  91    on all sides, should be medium solid purple.
  92   </td>
  93  </tr>
  94  <tr>
  95   <td>
  96    The border of the table itself should be medium solid blue.
  97   </td>
  98   <td>
  99    The borders of other cells should be thin solid green.
 100   </td>
 101   <td>
 102    This table should have a 1em margin around all edges.  This margin
 103    is measured from the <em>outer edge</em> of its border.
 104   </td>
 105  </tr>
 106 </table>
 107
 108
 109 <table class="three">
 110  <tr>
 111   <th>Header One</th>
 112   <th>Header Two</th>
 113   <th>Header Three</th>
 114  </tr>
 115  <tr>
 116   <td>
 117    This table uses the separated borders model.
 118   </td>
 119   <td>
 120    Elements within the cell have horizontal border-spacing (i.e., width of
 121    vertical lines) of 0 and vertical
 122    border-spacing (i.e., height of horizontal lines) of 0.5em.
 123   </td>
 124   <td>
 125    The borders on the header cells,
 126    on all sides, should be medium solid purple.
 127   </td>
 128  </tr>
 129  <tr>
 130   <td>
 131    The border of the table itself should be medium solid blue.
 132    The borders of other cells should be thin solid green.
 133   </td>
 134   <td>
 135    This table should have a 1em margin around all edges.  This margin
 136    is measured from the <em>outer edge</em> of its border.
 137   </td>
 138   <td>
 139    The table should not be wider than the room available for it unless
 140    that space is very small.  Because of its margins, the width of the
 141    table should be less than 100%.
 142   </td>
 143  </tr>
 144 </table>
 145
 146
 147 <table class="four">
 148  <tr>
 149   <th>Header One</th>
 150   <th>Header Two</th>
 151   <th>Header Three</th>
 152  </tr>
 153  <tr>
 154   <td>
 155    This table uses the separated borders model.
 156   </td>
 157   <td>
 158    Elements within the cell have horizontal border-spacing of 0.5em and vertical
 159    border-spacing of 0.
 160   </td>
 161   <td>
 162    The borders on the header cells,
 163    on all sides, should be medium solid purple.
 164   </td>
 165  </tr>
 166  <tr>
 167   <td>
 168    The border of the table itself should be medium solid blue.
 169    The borders of other cells should be thin solid green.
 170   </td>
 171   <td>
 172    This table should have a 1em margin around all edges.  This margin
 173    is measured from the <em>outer edge</em> of its border.
 174   </td>
 175   <td>
 176    The table should not be wider than the room available for it unless
 177    that space is very small.  Because of its margins, the width of the
 178    table should be less than 100%.
 179   </td>
 180  </tr>
 181 </table>
 182
 183
 184 <table class="five">
 185 <caption>
 186  This is the caption.
 187 </caption>
 188 <colgroup>
 189  <col>
 190 </colgroup>
 191 <colgroup>
 192  <col>
 193  <col>
 194 </colgroup>
 195 <thead>
 196  <tr>
 197   <th>Header One</th>
 198   <th>Header Two</th>
 199   <th>Header Three</th>
 200  </tr>
 201 </thead>
 202 <tbody>
 203  <tr>
 204   <td>
 205    This table uses the separated borders model.
 206   </td>
 207   <td>
 208    This means that borders are allowed only on table elements or table
 209    cell elements.
 210   </td>
 211   <td>
 212    They are not allowed on elements that represent rows,
 213    row-groups, columns, or column-groups.
 214   </td>
 215  </tr>
 216  <tr>
 217   <td>
 218    There should be no borders at all on this table!
 219   </td>
 220   <td>
 221    If there are any borders shown that are not medium solid red, then
 222    the problem is something other than what this test is testing.
 223   </td>
 224   <td>
 225    This table should have a 1em margin around all edges.  This margin
 226    is measured from the <em>outer edge</em> of its border.
 227   </td>
 228  </tr>
 229 </tbody>
 230 </table>
 231
 232 </body></html>