Set vertical align for table cells in HTML and CSS

Description

The following code shows how to set vertical align for table cells.

Example


<html>
<head>
<!-- w  w w  .  j  a  v  a2  s  . c  om-->
<style type='text/css'>
table {
font: 16px sans-serif;
border: 1px solid black;
}
td {
border: 1px solid black;
width: 125px;
}
td.baseline {
vertical-align: baseline;
}
td#largefont {
font-size: 60px;
vertical-align: baseline;
}
td#top {
vertical-align: top;
}
td#middle {
vertical-align: middle;
}
td#bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<td class='baseline'>
The contents of this cell
are aligned to the baseline.
</td>
<td class='baseline' id='largefont'>
L
</td>
<td id='top'>
The contents of this cell
are top aligned.
</td>
<td id='middle'>
The contents of this
cell are middle aligned.
</td>
<td id='bottom'>
The contents of this
cell are bottom aligned.
</td>
</tr>
</table>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set vertical align for table cells in HTML and CSS

Home »
  HTML CSS Tutorial »
    Text »
      CSS Text Style

...
Set paragraph line-height to 150% in HTML a...
Compare text-align all possible values in H...
Set text-align to center in HTML and CSS
Set text-align to justify in HTML and CSS
Set text align to justify to paragraph in H...
Set text-align to left in HTML and CSS
Set text-align to right in HTML and CSS
Compare text-decoration in HTML and CSS
Set text-decoration to line-through in HTML...
Set text-decoration to none for visited anc...
Set text-decoration to overline in HTML and...
Set text-decoration to underline in HTML an...
Set text-decoration to underline overline i...
Set text-decoration to underline overline l...
Compare text-transform in HTML and CSS
Set text-transform to capitalize in HTML an...
Set text-transform to lowercase in HTML and...
Set text-transform to uppercase in HTML and...
Compare all vertical-align settings in HTML...
Compare vertical-align possible values in H...
Compare vertical align values in HTML and C...

Set vertical align for table cells in HTML ...