441 lines
14 KiB
HTML
441 lines
14 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
|
|
|
<!-- The contents of this file are subject to the Netscape Public
|
|
License Version 1.1 (the "License"); you may not use this file
|
|
except in compliance with the License. You may obtain a copy of
|
|
the License at http://www.mozilla.org/NPL/
|
|
|
|
Software distributed under the License is distributed on an "AS
|
|
IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
|
|
implied. See the License for the specific language governing
|
|
rights and limitations under the License.
|
|
|
|
The Initial Developer of the Original Code is Netscape
|
|
Communications Corporation. Portions created by Netscape are
|
|
Copyright (C) 1998-1999 Netscape Communications Corporation. All
|
|
Rights Reserved.
|
|
|
|
Contributor(s): ______________________________________. -->
|
|
|
|
<html lang="en-US">
|
|
<head>
|
|
<title>Vertical alignment and table height</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">
|
|
|
|
/* XXX Should really remove black */
|
|
table td { border: thin solid black; }
|
|
|
|
table.one { height: auto; }
|
|
table.two { height: 30px; }
|
|
table.three { height: 500px; }
|
|
table.four, table.five { height: 50%; }
|
|
div.five { height: 600px; border: medium solid purple; }
|
|
|
|
tr.auto { height: auto; }
|
|
tr.small { height: 2px; }
|
|
tr.big { height: 200px; }
|
|
|
|
table.baseline td { vertical-align: baseline; }
|
|
table.middle td { vertical-align: middle; }
|
|
table.top td { vertical-align: top; }
|
|
table.bottom td { vertical-align: bottom; }
|
|
|
|
span.big { font-size: 400%; }
|
|
|
|
table.cellsmall td { height: 2px; }
|
|
table.cellauto td { height: auto; }
|
|
|
|
td.baselinea { vertical-align: baseline; }
|
|
td.baselineb { vertical-align: text-bottom; }
|
|
td.baselinec { vertical-align: text-top; }
|
|
td.baselined { vertical-align: super; }
|
|
td.baselinee { vertical-align: sub; }
|
|
td.baselinef { vertical-align: -12px; } /* probably correct */
|
|
td.baselineg { vertical-align: 40%; } /* probably correct */
|
|
td.top { vertical-align: top; }
|
|
td.middle { vertical-align: middle; }
|
|
td.bottom { vertical-align: bottom; }
|
|
|
|
td.big { font-size: 300%; }
|
|
td.biggest { font-size: 600%; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Vertical alignment and table height</h1>
|
|
|
|
<p>The following three tables have heights of <code>auto</code>,
|
|
<code>30px</code>, and <code>500px</code>. The first one should have
|
|
the height of the sum of its rows. The second and third can be handled
|
|
however the browser wants, but there just here to make sure it does
|
|
something reasonable.</p>
|
|
|
|
<table class="one">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<table class="two">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<table class="three">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<p>These tables test percentage heights. The first should be its
|
|
natural height; the second should be 50% of the height of the div
|
|
(600px), which is 300px.</p>
|
|
|
|
<table class="four">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<div class="five">
|
|
<table class="five">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<p>The following tests test <code>height</code> on table rows.
|
|
A value of <code>auto</code> requires the minimum height needed by
|
|
the cells. In a simple case, this is just the height of the tallest
|
|
cell (excluding the increased padding, of course, since with the padding
|
|
the cells have the same height):</p>
|
|
|
|
<table>
|
|
<tr class="auto"><td>Data</td><td>Data<br>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<p>However, vertical-align values of <code>baseline</code> (the default,
|
|
but could be overridden in a UA stylesheet)
|
|
can make it taller than that:</p>
|
|
|
|
<table class="baseline">
|
|
<tr class="auto">
|
|
<td>Data</td>
|
|
<td><span class="big">Data</span><br>Data</td>
|
|
<td>Data<br><span class="big">Data</span></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>The exact same thing should happen when the given height for the
|
|
row is too small:</p>
|
|
|
|
<table class="baseline">
|
|
<tr class="small">
|
|
<td>Data</td>
|
|
<td><span class="big">Data</span><br>Data</td>
|
|
<td>Data<br><span class="big">Data</span></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>Padding should also be able to increase the height (here the
|
|
first cell has 20px padding-top and the second has 20px of padding-bottom):</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<td style="padding-top: 20px;">Data</td>
|
|
<td style="padding-bottom: 20px">Data</td>
|
|
<td>Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr class="small">
|
|
<td style="padding-top: 20px;">Data</td>
|
|
<td style="padding-bottom: 20px">Data</td>
|
|
<td>Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>These two tables should be 200px tall, because of a height on the table
|
|
row. The second one should have its second and third cell's contents
|
|
offset from the middle by 10px (bottom, then top):</p>
|
|
|
|
<table class="baseline">
|
|
<tr class="big">
|
|
<td>Data</td>
|
|
<td><span class="big">Data</span><br>Data</td>
|
|
<td>Data<br><span class="big">Data</span></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="middle">
|
|
<tr class="big">
|
|
<td style="padding-top: 20px;">Data</td>
|
|
<td style="padding-bottom: 20px">Data</td>
|
|
<td>Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>The behavior of percentage heights on table-row or table-row-group
|
|
is undefined. However, I think they should be ignored, so these tables
|
|
should look normal:</p>
|
|
|
|
<table>
|
|
<tr style="height: 200%"><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr style="height: 40%"><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<table>
|
|
<thead style="height: 40%">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</thead>
|
|
<tfoot style="height: 40%">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</tfoot>
|
|
<tbody style="height: 40%">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table>
|
|
<thead style="height: 150%">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</thead>
|
|
<tfoot style="height: 150%">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</tfoot>
|
|
<tbody style="height: 150%">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>The following table should look normal, since very small heights
|
|
get ignored:</p>
|
|
|
|
<table class="cellsmall">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<p>So should this one, for auto cell heights:</p>
|
|
|
|
<table class="cellauto">
|
|
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
|
|
</table>
|
|
|
|
<p>These tables should look the same - all cells should be 100px tall
|
|
with the text at the top of the cells:</p>
|
|
|
|
<table class="baseline">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 100px">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="middle">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 100px">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="top">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 60px">Data</td>
|
|
<td style="height: 20px">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="baseline">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 60px">Data</td>
|
|
<td style="height: 20px">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>In these four tables, the text should be 20px lower each cell, but should
|
|
otherwise look like the above three tables:</p>
|
|
|
|
<table class="top">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 60px; padding: 20px 0;">Data</td>
|
|
<td style="height: 20px; padding: 40px 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="top">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 60px; padding: 20px 0 0 0;">Data</td>
|
|
<td style="height: 20px; padding: 40px 0 0 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="middle">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 60px; padding: 20px 0;">Data</td>
|
|
<td style="height: 20px; padding: 40px 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="middle">
|
|
<tr>
|
|
<td style="height: 100px">Data</td>
|
|
<td style="height: 60px;">Data</td>
|
|
<td style="height: 20px;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>These should have the text 40px from the top in every cell:</p>
|
|
|
|
<table class="baseline">
|
|
<tr>
|
|
<td style="height: 60px">Data</td>
|
|
<td style="padding: 20px 0;">Data</td>
|
|
<td style="padding: 40px 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="baseline">
|
|
<tr>
|
|
<td style="height: 37px">Data</td>
|
|
<td style="height: 53px; padding: 20px 0 0 0;">Data</td>
|
|
<td style="height: 60px; padding: 40px 0 0 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="middle">
|
|
<tr>
|
|
<td style="height: 20px">Data</td>
|
|
<td style="height: 20px; padding: 20px 0;">Data</td>
|
|
<td style="height: 20px; padding: 40px 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="bottom">
|
|
<tr>
|
|
<td style="height: 60px">Data</td>
|
|
<td style="height: 40px; padding: 20px 0;">Data</td>
|
|
<td style="height: 20px; padding: 40px 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="bottom">
|
|
<tr>
|
|
<td style="height: 60px">Data</td>
|
|
<td style="height: 40px; padding: 0 0 20px 0;">Data</td>
|
|
<td style="height: 20px; padding: 0 0 40px 0;">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<p>In each of the following tables, three of the cells should have
|
|
the same baseline of the first line, and the three so marked should be
|
|
aligned top, middle, and bottom:</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<td class="baselinea">Data</td>
|
|
<td class="baselineb big">Data</td>
|
|
<td class="baselinec biggest">Data</td>
|
|
<td class="top">Top</td>
|
|
<td class="middle">Middle</td>
|
|
<td class="bottom">Bottom</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<td class="top">Top</td>
|
|
<td class="middle">Middle</td>
|
|
<td class="bottom">Bottom</td>
|
|
<td class="baselined biggest">Data</td>
|
|
<td class="baselinee">Data</td>
|
|
<td class="baselinef big">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<td class="baselineg biggest">Data</td>
|
|
<td class="top">Top</td>
|
|
<td class="middle">Middle</td>
|
|
<td class="baselinea">Data</td>
|
|
<td class="bottom">Bottom</td>
|
|
<td class="baselineb big">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<td class="top">Top</td>
|
|
<td class="baselinec">Data</td>
|
|
<td class="baselinee big">Data</td>
|
|
<td class="middle">Middle</td>
|
|
<td class="bottom">Bottom</td>
|
|
<td class="baselined biggest">Data</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<td class="top">Top</td>
|
|
<td class="baselineg big">Data</td>
|
|
<td class="bottom">Bottom</td>
|
|
<td class="baselinef">Data</td>
|
|
<td class="baselinea biggest">Data</td>
|
|
<td class="middle">Middle</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>
|