blob: de492aec1345e46594a6edf528bf917671c3885c [file] [log] [blame]
<!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>(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>