Validación HTML: El atributo "width" en el elemento table (o td) está obsoleto. Usa CSS en su lugar.

Acerca de este problema de CSS

En versiones anteriores de HTML (HTML 4 y XHTML 1.0), el atributo width era una forma estándar de controlar las dimensiones de las tablas y sus celdas. HTML5 marcó este atributo como obsoleto en elementos relacionados con tablas, lo que significa que los navegadores aún pueden renderizarlo, pero ya no es HTML conforme. El validador W3C reportará una advertencia o error cada vez que encuentre este uso.

Esto es importante por varias razones. Primero, usar atributos obsoletos significa que tu marcado no se conforma al estándar vivo de HTML, lo que puede causar fallos de validación que oscurezcan problemas más críticos. Segundo, depender de atributos HTML presentacionales mezcla contenido con presentación, haciendo que tu código sea más difícil de mantener. CSS proporciona mucha más flexibilidad y control — puedes usar unidades relativas, consultas de medios para diseños responsivos, y hojas de estilo centralizadas que se aplican consistentemente en todo tu sitio. Tercero, aunque los navegadores actuales aún soportan el atributo width obsoleto, no se garantiza que las versiones futuras de navegadores lo hagan.

La solución es sencilla: elimina el atributo width y aplica el dimensionamiento equivalente con CSS. Puedes usar estilos en línea para arreglos rápidos, pero generalmente se prefiere un enfoque basado en clases o hoja de estilo externa para el mantenimiento.

Ejemplos

❌ Incorrecto: usando el atributo `width` obsoleto

<table width="600">
  <tr>
    <td width="200">Name</td>
    <td width="400">Description</td>
  </tr>
</table>

Esto desencadena el mensaje del validador: El atributo “width” en el elemento “table” está obsoleto. Usa CSS en su lugar. — y lo mismo para cada <td>.

✅ Corregido: usando CSS en línea

<table style="width: 600px;">
  <tr>
    <td style="width: 200px;">Name</td>
    <td style="width: 400px;">Description</td>
  </tr>
</table>

✅ Mejor: usando clases CSS

<style>
  .data-table {
    width: 100%;
    max-width: 600px;
  }
  .data-table .col-name {
    width: 33%;
  }
  .data-table .col-desc {
    width: 67%;
  }
</style>

<table class="data-table">
  <tr>
    <td class="col-name">Name</td>
    <td class="col-desc">Description</td>
  </tr>
</table>

Usar clases mantiene tu HTML limpio y hace fácil ajustar el dimensionamiento en un lugar. Los anchos basados en porcentajes también se adaptan mejor a diferentes tamaños de pantalla.

❌ Incorrecto: `width` en `<col>` y `<colgroup>`

<table>
  <colgroup width="100">
    <col width="50">
    <col width="50">
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

✅ Corregido: CSS en elementos `<col>`

<table>
  <colgroup>
    <col style="width: 50px;">
    <col style="width: 50px;">
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

❌ Incorrecto: `width` en `<th>`

<table>
  <tr>
    <th width="150">Header</th>
  </tr>
</table>

✅ Corregido

<table>
  <tr>
    <th style="width: 150px;">Header</th>
  </tr>
</table>

Consejos para migrar

Busca en tu código base width= dentro de etiquetas relacionadas con tablas. Una expresión regular como <(table|td|th|col|colgroup)[^>]+width= puede ayudar a localizar todas las instancias.
Convierte valores de píxeles directamente — un atributo width="200" es equivalente a width: 200px en CSS.
Considera el diseño responsivo — esta es una buena oportunidad para cambiar de anchos fijos en píxeles a porcentajes, unidades em, u otros valores flexibles.
Usa table-layout: fixed en el elemento <table> si necesitas que las columnas respeten anchos exactos en lugar de auto-dimensionarse basándose en el contenido.