| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
| |
| <!-- Work done for Netscape. License unknown. --> |
| |
| <html lang="en-US"> |
| <head> |
| <title>Tables and captions</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| <meta http-equiv="Content-Style-Type" content="text/css"> |
| <link rel="copyright" href="/~dbaron/legal.html"> |
| <style type="text/css"> |
| |
| table { border: 10px solid green; } |
| caption { |
| border: medium solid purple; |
| caption-side: top; |
| } |
| |
| table.one { width: 300px; } |
| table.one caption { width: 300px; } |
| |
| table.two { width: 300px; } |
| table.two caption { width: 600px; } |
| |
| table.three { width: 600px; } |
| table.three caption { width: 300px; } |
| |
| table.four { margin-top: 20px; } |
| table.four caption { margin-bottom: 0; } |
| |
| table.five { margin-top: 0; } |
| table.five caption { margin-bottom: 20px; } |
| |
| table.six { margin-top: 15px; } |
| table.six caption { margin-bottom: 20px; } |
| |
| table.seven { margin-top: 20px; } |
| table.seven caption { margin-bottom: 15px; } |
| |
| table.eight { margin-right: 20px; } |
| table.eight caption { margin-left: 0; caption-side: right; } |
| |
| table.nine { margin-right: 0; } |
| table.nine caption { margin-left: 20px; caption-side: right; } |
| |
| table.ten { margin-right: 15px; } |
| table.ten caption { margin-left: 20px; caption-side: right; } |
| |
| table.eleven { margin-right: 20px; } |
| table.eleven caption { margin-left: 15px; caption-side: right; } |
| |
| table.twelve { margin-bottom: 20px; } |
| table.twelve caption { margin-top: 0; caption-side: bottom; } |
| |
| table.thirteen { margin-bottom: 0; } |
| table.thirteen caption { margin-top: 20px; caption-side: bottom; } |
| |
| table.fourteen { margin-bottom: 15px; } |
| table.fourteen caption { margin-top: 20px; caption-side: bottom; } |
| |
| table.fifteen { margin-bottom: 20px; } |
| table.fifteen caption { margin-top: 15px; caption-side: bottom; } |
| |
| table.sixteen { margin-left: 20px; } |
| table.sixteen caption { margin-right: 0; caption-side: left; } |
| |
| table.seventeen { margin-left: 0; } |
| table.seventeen caption { margin-right: 20px; caption-side: left; } |
| |
| table.eighteen { margin-left: 15px; } |
| table.eighteen caption { margin-right: 20px; caption-side: left; } |
| |
| table.nineteen { margin-left: 20px; } |
| table.nineteen caption { margin-right: 15px; caption-side: left; } |
| |
| </style> |
| </head> |
| <body> |
| <h1>Tables and captions</h1> |
| |
| <p> |
| The table should have width 300px, as should the caption (entirely |
| above the table): |
| </p> |
| |
| <table class="one"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <p> |
| The table should have width 300px, and the caption should have |
| width 600px. |
| </p> |
| |
| <table class="two"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <p> |
| The table should have width 600px, and the caption should have |
| width 300px. |
| </p> |
| |
| <table class="three"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <p> |
| The next four tables should have their caption on the top, |
| with a 20px gap between the table and the caption. |
| </p> |
| |
| <table class="four"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="five"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="six"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="seven"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| |
| <p> |
| The next four tables should have their caption on the right, |
| with a 20px gap between the table and the caption. |
| </p> |
| |
| <table class="eight"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="nine"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="ten"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="eleven"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| |
| <p> |
| The next four tables should have their caption on the bottom, |
| with a 20px gap between the table and the caption. |
| </p> |
| |
| <table class="twelve"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="thirteen"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="fourteen"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="fifteen"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| |
| <p> |
| The next four tables should have their caption on the left, |
| with a 20px gap between the table and the caption. |
| </p> |
| |
| <table class="sixteen"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="seventeen"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="eighteen"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <table class="nineteen"> |
| <caption>The table's caption.</caption> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| |
| <hr title="Beginning of Footer"> |
| <p><a href="http://validator.w3.org/check/referer" title="W3C HTML Validator"><img src="../../images/vh40" alt="Valid HTML 4.0!" height="31" width="88"></a></p> |
| <p>(Back to |
| <a href="./">CSS Testing Information</a>, |
| <a href="../../">David Baron</a>)</p> |
| <p><a href="/~dbaron/" title="David Baron's Homepage">LDB</a>, |
| <a rev="made" href="mailto:dbaron@fas.harvard.edu" TITLE="Send e-mail to David Baron">dbaron@fas.harvard.edu</a></p> |
| |
| </body></html> |
