fast/table/border-collapsing/004.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>
<title>Table Border Models</title>
<style type="text/css">
TABLE	{ margin: 1em; width: auto; border: medium solid blue; }
TD	{ border: thin solid green; padding: 5px; }
TH { border: medium solid purple; padding: 5px; }
TABLE.one, TABLE.two { border-spacing: 1em; }
TABLE.one { border-collapse: collapse; }
TABLE.two { border-collapse: separate; }
TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
TABLE.five { border-collapse: separate; }
TABLE.five, TABLE.five TD, TABLE.five TH, TABLE.five CAPTION { border: none; }
TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
	{ border: medium solid red; }
</style>
</head>
<body>
<h1>Table Border Models</h1>

<p>This tests tests the <a
href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS2 spec
rules on table borders</a>.  The styles applied here are:</p>

<pre>
TABLE	{ margin: 1em; border: medium solid blue; }
TD	{ border: thin solid green; padding: 5px; }
TH { border: medium solid purple; padding: 5px; }
TABLE.one, TABLE.two { border-spacing: 1em; }
TABLE.one { border-collapse: collapse; }
TABLE.two { border-collapse: separate; }
TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
TABLE.five { border-collapse: separate; }
TABLE.five, TABLE.five TD, TABLE.five TH { border: none; }
TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
	{ border: medium solid red; }
</pre>

<table class="one">
 <tr>
  <th>Header One</th>
  <th>Header Two</th>
  <th>Header Three</th>
 </tr>
 <tr>
  <td>
   This table uses the collapsed borders model.
  </td>
  <td>
   This means that elements within the cell have no border-spacing.
  </td>
  <td>
   Since it has collapsed borders, the borders on the header cells,
   on all sides, should be medium solid purple.
  </td>
 </tr>
 <tr>
  <td>
   The border of the table itself should be medium solid blue, except
   where header cells override the border.
  </td>
  <td>
   The borders that I haven't already mentioned (all the other internal
   ones) should be thin solid green.
  </td>
  <td>
   This table should have a 1em margin around all edges.  This margin
   is measured from the <em>middle</em> of its border.
  </td>
 </tr>
</table>


<table class="two">
 <tr>
  <th>Header One</th>
  <th>Header Two</th>
  <th>Header Three</th>
 </tr>
 <tr>
  <td>
   This table uses the separated borders model.
  </td>
  <td>
   This means that elements within the cell have border-spacing of 1em.
  </td>
  <td>
   The borders on the header cells,
   on all sides, should be medium solid purple.
  </td>
 </tr>
 <tr>
  <td>
   The border of the table itself should be medium solid blue.
  </td>
  <td>
   The borders of other cells should be thin solid green.
  </td>
  <td>
   This table should have a 1em margin around all edges.  This margin
   is measured from the <em>outer edge</em> of its border.
  </td>
 </tr>
</table>


<table class="three">
 <tr>
  <th>Header One</th>
  <th>Header Two</th>
  <th>Header Three</th>
 </tr>
 <tr>
  <td>
   This table uses the separated borders model.
  </td>
  <td>
   Elements within the cell have horizontal border-spacing (i.e., width of
   vertical lines) of 0 and vertical
   border-spacing (i.e., height of horizontal lines) of 0.5em.
  </td>
  <td>
   The borders on the header cells,
   on all sides, should be medium solid purple.
  </td>
 </tr>
 <tr>
  <td>
   The border of the table itself should be medium solid blue.
   The borders of other cells should be thin solid green.
  </td>
  <td>
   This table should have a 1em margin around all edges.  This margin
   is measured from the <em>outer edge</em> of its border.
  </td>
  <td>
   The table should not be wider than the room available for it unless
   that space is very small.  Because of its margins, the width of the
   table should be less than 100%.
  </td>
 </tr>
</table>


<table class="four">
 <tr>
  <th>Header One</th>
  <th>Header Two</th>
  <th>Header Three</th>
 </tr>
 <tr>
  <td>
   This table uses the separated borders model.
  </td>
  <td>
   Elements within the cell have horizontal border-spacing of 0.5em and vertical
   border-spacing of 0.
  </td>
  <td>
   The borders on the header cells,
   on all sides, should be medium solid purple.
  </td>
 </tr>
 <tr>
  <td>
   The border of the table itself should be medium solid blue.
   The borders of other cells should be thin solid green.
  </td>
  <td>
   This table should have a 1em margin around all edges.  This margin
   is measured from the <em>outer edge</em> of its border.
  </td>
  <td>
   The table should not be wider than the room available for it unless
   that space is very small.  Because of its margins, the width of the
   table should be less than 100%.
  </td>
 </tr>
</table>


<table class="five">
<caption>
 This is the caption.
</caption>
<colgroup>
 <col>
</colgroup>
<colgroup>
 <col>
 <col>
</colgroup>
<thead>
 <tr>
  <th>Header One</th>
  <th>Header Two</th>
  <th>Header Three</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>
   This table uses the separated borders model.
  </td>
  <td>
   This means that borders are allowed only on table elements or table
   cell elements.
  </td>
  <td>
   They are not allowed on elements that represent rows,
   row-groups, columns, or column-groups.
  </td>
 </tr>
 <tr>
  <td>
   There should be no borders at all on this table!
  </td>
  <td>
   If there are any borders shown that are not medium solid red, then
   the problem is something other than what this test is testing.
  </td>
  <td>
   This table should have a 1em margin around all edges.  This margin
   is measured from the <em>outer edge</em> of its border.
  </td>
 </tr>
</tbody>
</table>

</body></html>