Verificação HTML: O atributo "width" no elemento table (ou td) está obsoleto. Use CSS em vez disso.

Sobre este problema de CSS

Nas versões anteriores do HTML (HTML 4 e XHTML 1.0), o atributo width era uma forma padrão de controlar as dimensões de tabelas e das suas células. O HTML5 marcou este atributo como obsoleto em elementos relacionados com tabelas, o que significa que os navegadores podem ainda renderizá-lo, mas já não é HTML conforme. O validador do W3C reportará um aviso ou erro sempre que encontrar esta utilização.

Isto é importante por várias razões. Primeiro, usar atributos obsoletos significa que a sua marcação não está conforme com o padrão HTML atual, o que pode causar falhas de validação que obscurecem problemas mais críticos. Segundo, depender de atributos HTML de apresentação mistura conteúdo com apresentação, tornando o seu código mais difícil de manter. O CSS oferece muito mais flexibilidade e controlo — você pode usar unidades relativas, media queries para layouts responsivos, e folhas de estilo centralizadas que se aplicam consistentemente em todo o seu site. Terceiro, embora os navegadores atuais ainda suportem o atributo width obsoleto, as versões futuras dos navegadores não têm garantia de o fazer.

A correção é simples: remova o atributo width e aplique o dimensionamento equivalente com CSS. Você pode usar estilos inline para correções rápidas, mas uma abordagem baseada em classes ou folha de estilo externa é geralmente preferível para manutenibilidade.

Exemplos

❌ Incorreto: usar o atributo `width` obsoleto

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

Isto aciona a mensagem do validador: The “width” attribute on the “table” element is obsolete. Use CSS instead. — e o mesmo para cada <td>.

✅ Corrigido: usar CSS inline

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

✅ Melhor: usar classes 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 classes mantém o seu HTML limpo e torna fácil ajustar o dimensionamento num só lugar. Larguras baseadas em percentagens também se adaptam melhor a diferentes tamanhos de ecrã.

❌ Incorreto: `width` em `<col>` e `<colgroup>`

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

✅ Corrigido: CSS em elementos `<col>`

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

❌ Incorreto: `width` em `<th>`

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

✅ Corrigido

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

Dicas para migração

Pesquise no seu código por width= dentro de tags relacionadas com tabelas. Uma regex como <(table|td|th|col|colgroup)[^>]+width= pode ajudar a localizar todas as instâncias.
Converta valores em pixéis diretamente — um atributo width="200" é equivalente a width: 200px em CSS.
Considere design responsivo — esta é uma boa oportunidade para mudar de larguras fixas em pixéis para percentagens, unidades em, ou outros valores flexíveis.
Use table-layout: fixed no elemento <table> se precisar que as colunas respeitem larguras exatas em vez de dimensionamento automático baseado no conteúdo.