Validación HTML: The “valign” attribute on the “td” element is obsolete. Use CSS instead.

Acerca de este problema de CSS

The valign attribute was part of earlier HTML specifications (HTML 4.01 and XHTML 1.0) and accepted values like top, middle, bottom, and baseline to control how content was vertically positioned within a table cell. In HTML5, this attribute is obsolete because the specification separates content structure from presentation. All visual styling should be handled through CSS.

This matters for several reasons. First, using obsolete attributes triggers W3C validation errors, which can indicate broader code quality issues. Second, browsers may eventually drop support for legacy presentational attributes, potentially breaking your layout. Third, CSS provides far more flexibility and maintainability — you can style entire tables or groups of cells with a single rule instead of repeating valign on every <td>.

The valign attribute was also valid on <th>, <tr>, <thead>, <tbody>, and <tfoot> elements, and it is obsolete on all of them. The fix is the same: use the CSS vertical-align property.

To fix this issue, remove the valign attribute from your <td> elements and apply the equivalent CSS vertical-align property. The CSS property accepts the same familiar values: top, middle, bottom, and baseline.

Examples

❌ Incorrect: using the obsolete `valign` attribute

<table>
  <tr>
    <td valign="top">Top-aligned content</td>
    <td valign="middle">Middle-aligned content</td>
    <td valign="bottom">Bottom-aligned content</td>
  </tr>
</table>

✅ Fixed: using inline CSS

<table>
  <tr>
    <td style="vertical-align: top;">Top-aligned content</td>
    <td style="vertical-align: middle;">Middle-aligned content</td>
    <td style="vertical-align: bottom;">Bottom-aligned content</td>
  </tr>
</table>

✅ Fixed: using a class-based approach (recommended)

For better maintainability, define reusable CSS classes instead of repeating inline styles:

<style>
  .valign-top { vertical-align: top; }
  .valign-middle { vertical-align: middle; }
  .valign-bottom { vertical-align: bottom; }
</style>

<table>
  <tr>
    <td class="valign-top">Top-aligned content</td>
    <td class="valign-middle">Middle-aligned content</td>
    <td class="valign-bottom">Bottom-aligned content</td>
  </tr>
</table>

✅ Fixed: applying a default to all cells in a table

If every cell in a table should share the same vertical alignment, target them with a single CSS rule:

<style>
  .data-table td,
  .data-table th {
    vertical-align: top;
  }
</style>

<table class="data-table">
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Item A</td>
    <td>A longer description that may<br>span multiple lines</td>
  </tr>
</table>

This approach is the most maintainable — you set the alignment once and it applies consistently to every cell, without needing to modify individual <td> or <th> elements.