• 
• 1. SitePoint
  2. Reference
  3. CSS
  4. Typographical Properties
  5. vertical-align
  6. CSS Live Demo: vertical-align (this page)
• See also: All Live Demos

CSS Live Demo: vertical-align

Type your CSS here: (any properties allowed except expression, behavior and @import) td, th { vertical-align:top; } table { width:50%; } td, th { font-family:sans-serif; text-align:left; padding:2px 5px; }

Type your HTML here: (any tags allowed except script, iframe, frame, object, img and embed) <table cellpadding="0" cellspacing="0" border="1" summary="This table has two columns, listing each property value and its meaning"> <thead> <tr> <th id="val">Value</th> <th id="means">Means</th> </tr> </thead> <tbody> <tr> <td headers="val">baseline</td> <td headers="means">aligns the baseline of the cell with the baseline of the first row it spans</td> </tr> <tr> <td headers="val">bottom</td> <td headers="means">aligns the bottom of the cell box with the bottom of the last row it spans</td> </tr> <tr> <td headers="val">middle</td> <td headers="means">aligns the center of the cell with the center of the row it spans</td> </tr> <tr> <td headers="val">top</td> <td headers="means">aligns the top of the cell box with the top of the first row it spans</td> </tr> </tbody> </table>

Show me!

Your results appear here: