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
-
Elimina el atributo
aligndel elemento<td>. -
Aplica la propiedad CSS
text-alignen su lugar, ya sea mediante un atributostyleen 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.