HTML <tr> valignProperty
Example
HTML table with rows that have different vertical alignment:
<table border="1"
style="height:200px">
<tr valign="middle">
<th>Month</th>
<th>Savings</th>
</tr>
<tr valign="bottom">
<td>January</td>
<td>$100</td>
</tr>
</table>
<tr valign="middle">
<th>Month</th>
<th>Savings</th>
</tr>
<tr valign="bottom">
<td>January</td>
<td>$100</td>
</tr>
</table>
Try it Yourself »
Browser Support
The valign attribute is supported in all major browsers.
Definition and Usage
HTML5 does not support the <tr> valign attribute. Please use CSS instead.
The valign attribute specifies the vertical alignment of the content in a table row.
Syntax
<tr valign="top|middle|bottom|baseline">
Property value
| Value | Description |
|---|---|
| top | Align content to the top. |
| middle | Aligns the content to the center (default value). |
| bottom | Align content to the bottom. |
| baseline | Aligns to the baseline. The baseline is an imaginary line. In a line of text, most letters are positioned based on the baseline. The baseline value sets all table data in the row to share the same baseline. The effect of this value is often the same as the bottom value. However, if the font sizes of the text differ, the baseline effect works better. See the illustration below. |
When the font size of the text differs, bottom vs. baseline diagram:
valign="bottom"
valign="baseline"
HTML <tr> Tagother extensions