How to fix: The valign attribute on the tr element is obsolete. Use CSS instead.

Most Likely Cause and Fix

Your HTML5 markup contains an <tr> element with a valign attribute in the form:

<table border="1" style="height:400px;">
  <tr valign="top">
    <td>Top Foo</td>
  </tr>
  <tr valign="middle">
    <td>Middle Foo</td>
  </tr>
  <tr valign="bottom">
    <td>Bottom Foo</td>
  </tr>
</table>;

This attribute is no longer present in HTML5. Use CSS instead:

<table border="1" style="height:400px;">
  <tr style="vertical-align:top;">
    <td>Top Foo</td>
  </tr>
  <tr style="vertical-align:middle;">
    <td>Middle Foo</td>
  </tr>
  <tr style="vertical-align:bottom;">
    <td>Bottom Foo</td>
  </tr>
</table>

What This Error Means

There are three aspects to a web-based document:

  • Structure: the underlying arrangement of the document and the elements contained within; handled by HTML

  • Presentation: how elements look and where on the page they're placed; handled by CSS.

  • Behaviour: how the elements respond when being interacted with; handled by JavaScript (in general)

The appearance of and placement text and other page elements is a presentational matter and as such is best implemented at the presentational layer and handled by CSS.

HTML5 follows this approach and removes various presentational attributes previously specified on elements in markup in preference of CSS rules that can achieve the equivalent effect.

This error is letting you know that you have presentational markup in your HTML that is no longer valid and that you should instead remove such attributes and apply relevant CSS rules.

How To Fix It

HTML5 no longer allows the valign attribute on an <tr> element:

<table border="1" style="height:400px;">
  <tr valign="top">
    <td>Top Foo</td>
  </tr>
  <tr valign="middle">
    <td>Middle Foo</td>
  </tr>
  <tr valign="bottom">
    <td>Bottom Foo</td>
  </tr>
</table>;

This attribute is no longer present in HTML5. Use CSS instead:

<table border="1" style="height:400px;">
  <tr style="vertical-align:top;">
    <td>Top Foo</td>
  </tr>
  <tr style="vertical-align:middle;">
    <td>Middle Foo</td>
  </tr>
  <tr style="vertical-align:bottom;">
    <td>Bottom Foo</td>
  </tr>
</table>

Discuss, Comment and Improve

Did this help you? Can this page be improved? Let us know!

comments powered by Disqus