1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Table cells with different 'vertical-align' values</title>
5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#height-layout">
7 <meta name="flags" content="">
8 <meta name="assert" content="A table can have cells with different 'vertical-align' values.">
9 <style type="text/css">
10 table
11 {
12 border-spacing: 0;
13 height: 10em;
14 }
15 tr
16 {
17 vertical-align: top;
18 }
19 td
20 {
21 border: 1px solid black;
22 font-size: 1em;
23 padding: 0;
24 vertical-align: baseline;
25 }
26 #larger
27 {
28 font-size: 3em;
29 }
30 #middle
31 {
32 vertical-align: middle;
33 }
34 #bottom
35 {
36 vertical-align: bottom;
37 }
38 #inherit
39 {
40 vertical-align: inherit;
41 }
42 </style>
43 </head>
44 <body>
45 <p>Test passes if from left-to-right, the bottoms of the first two letters "X" are aligned, the third letter "X" is at the top of its box, the fourth "X" is in the middle of its box, and the fifth "X" is at the bottom of its box.</p>
46 <table>
47 <tr>
48 <td>X</td>
49 <td>
50 <div id="larger">X</div>
51 </td>
52 <td id="inherit">X</td>
53 <td id="middle">X</td>
54 <td id="bottom">X</td>
55 </tr>
56 </table>
57 </body>
58 </html>