| <!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>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> |
