mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-09 09:20:15 +01:00
242 lines
6.7 KiB
HTML
242 lines
6.7 KiB
HTML
|
<!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>
|