Deprecated in HTML5. Do not use.

Tr Align Is No Longer Valid HTML Code (But You Can Use CSS)

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!

Attribute of
Code Example For Tr In HTML (To Organize Table Rows)
What does Tr Align Is No Longer Valid HTML Code (But You Can Use CSS) do?
Sets the vertical alignment of all content in a table row.

Code Example

<table>
  <tr valign="top" style="height: 80px;">
    <td>First column</td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr valign="middle" style="height: 80px;">
    <td>First column</td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr valign="bottom" style="height: 80px;">
    <td>First column</td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>
First columnSecond columnThird column
First columnSecond columnThird column
First columnSecond columnThird column

Vertical Allignment of Table Data

The valign attribute could be applied to a <tr> element to control the vertical alignment of the contents of every child <td> element. Four attributes could be used with the valign attribute: top, bottom, middle, and baseline. However, support for the baseline value is inconsistent for this deprecated attributed. You can accomplish the same thing by using the vertical-align CSS property. For example, we can duplicate the table in the example above using CSS to replace the valign attribute like this:

<style> .first-row {   vertical-align: top; } .second-row {   vertical-align: middle; } .third-row {   vertical-align: bottom; } .example-table tr {   height: 80px; } </style> <table class="example-table">   <tr class="first-row">     <td>First column</td>     <td>Second column</td>     <td>Third column</td>   </tr>   <tr class="second-row">     <td>First column</td>     <td>Second column</td>     <td>Third column</td>   </tr>   <tr class="third-row">     <td>First column</td>     <td>Second column</td>     <td>Third column</td>   </tr> </table> 

You should also note that this property will only have an effect if the row is tall enough for the text to have somewhere to go. If the height of the row is autofit to the contents of each data cell, align the contents vertically will have no effect.

.first-row{vertical-align: top;}.second-row{vertical-align: middle;}.third-row{vertical-align: bottom;}.example-table tr{height: 80px;}

First columnSecond columnThird column
First columnSecond columnThird column
First columnSecond columnThird column
Adam is a technical writer who specializes in developer documentation and tutorials.