captions3.html | Explore in Territory

<!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:[email protected]" TITLE="Send e-mail to David Baron">[email protected]</a></p>

</body></html>
chromium/third_party/blink/web_tests/tables/mozilla_expected_failures/core/captions3.html
