Skip to main content
Validación HTML

El atributo “align” en el elemento “td” está obsoleto. Usa CSS en su lugar.

Acerca de este problema HTML

En versiones anteriores de HTML, el atributo align se usaba directamente en <td> (y otros elementos de tabla como <tr> y <th>) para controlar la alineación horizontal del contenido de las celdas. Valores como left, center, right y justify eran comunes. HTML5 hizo este atributo obsoleto en favor de CSS, que proporciona una separación más limpia entre contenido y presentación.

Aunque la mayoría de navegadores aún respetan el atributo align por compatibilidad hacia atrás, depender de él está desaconsejado. Viola los estándares web modernos, mezcla aspectos de presentación en tu marcado y hace que el estilizado sea más difícil de mantener. CSS ofrece mucha más flexibilidad — puedes dirigirte a celdas por clase, usar estilos responsive o cambiar la alineación a través de media queries sin tocar tu HTML.

Cómo solucionarlo

  1. Elimina el atributo align del elemento <td>.
  2. Aplica la propiedad CSS text-align en su lugar, ya sea mediante un atributo style en línea, un bloque <style> o una hoja de estilos externa.

La propiedad CSS text-align acepta los mismos valores que tenía el antiguo atributo: left, center, right y justify.

Para alineación vertical, el atributo obsoleto valign debería reemplazarse de manera similar con la propiedad CSS vertical-align.

Ejemplos

❌ Obsoleto: usando el atributo align

<table>
  <tr>
    <td align="center">Contenido centrado</td>
    <td align="right">Contenido alineado a la derecha</td>
  </tr>
</table>

✅ Solucionado: usando CSS en línea

<table>
  <tr>
    <td style="text-align: center;">Contenido centrado</td>
    <td style="text-align: right;">Contenido alineado a la derecha</td>
  </tr>
</table>

✅ Solucionado: usando una hoja de estilos (recomendado)

Usar clases mantiene tu HTML limpio y hace fácil actualizar estilos en todo tu sitio.

<style>
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
</style>

<table>
  <tr>
    <td class="text-center">Contenido centrado</td>
    <td class="text-right">Contenido alineado a la derecha</td>
  </tr>
</table>

✅ Solucionado: aplicando alineación a toda una columna

Si cada celda en una columna necesita la misma alineación, puedes dirigirte a las celdas por posición en lugar de añadir una clase a cada una.

<style>
  td:nth-child(2) {
    text-align: right;
  }
</style>

<table>
  <tr>
    <td>Artículo</td>
    <td>$9.99</td>
  </tr>
  <tr>
    <td>Otro artículo</td>
    <td>$14.50</td>
  </tr>
</table>

Este mismo enfoque se aplica a elementos <th> y al elemento <tr>, que también tenían un atributo align obsoleto en HTML más antiguo. En todos los casos, reemplaza el atributo con la propiedad CSS text-align.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.