114 lines
3.9 KiB
HTML
114 lines
3.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
|
|
|
<!-- ***** BEGIN LICENSE BLOCK *****
|
|
Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
|
|
|
The contents of this file are subject to the Mozilla 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/MPL/
|
|
|
|
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 Original Code is mozilla.org Code.
|
|
|
|
The Initial Developer of the Original Code is
|
|
Netscape Communications Corporation.
|
|
Portions created by the Initial Developer are Copyright (C) 1998-1999
|
|
the Initial Developer. All Rights Reserved.
|
|
|
|
Contributor(s):
|
|
|
|
Alternatively, the contents of this file may be used under the terms of
|
|
either of the GNU General Public License Version 2 or later (the "GPL"),
|
|
or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
|
in which case the provisions of the GPL or the LGPL are applicable instead
|
|
of those above. If you wish to allow use of your version of this file only
|
|
under the terms of either the GPL or the LGPL, and not to allow others to
|
|
use your version of this file under the terms of the MPL, indicate your
|
|
decision by deleting the provisions above and replace them with the notice
|
|
and other provisions required by the GPL or the LGPL. If you do not delete
|
|
the provisions above, a recipient may use your version of this file under
|
|
the terms of any one of the MPL, the GPL or the LGPL.
|
|
|
|
***** END LICENSE BLOCK ***** -->
|
|
|
|
<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>In each of the following tables the cells with 'Data' should all have the same baseline:</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>
|
|
|
|
</body></html>
|