<!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>