Verificação HTML: O atributo "valign" no elemento "td" está obsoleto. Use CSS em vez disso.

Sobre este problema de CSS

O atributo valign fazia parte das especificações HTML anteriores (HTML 4.01 e XHTML 1.0) e aceitava valores como top, middle, bottom e baseline para controlar como o conteúdo era posicionado verticalmente dentro de uma célula da tabela. No HTML5, este atributo está obsoleto porque a especificação separa a estrutura do conteúdo da apresentação. Todo o estilo visual deve ser gerido através de CSS.

Isto é importante por várias razões. Primeiro, usar atributos obsoletos desencadeia erros de validação W3C, que podem indicar problemas mais amplos de qualidade do código. Segundo, os browsers podem eventualmente deixar de suportar atributos de apresentação legados, potencialmente quebrando o seu layout. Terceiro, CSS oferece muito mais flexibilidade e manutenibilidade — você pode estilizar tabelas inteiras ou grupos de células com uma única regra em vez de repetir valign em cada <td>.

O atributo valign também era válido nos elementos <th>, <tr>, <thead>, <tbody> e <tfoot>, e está obsoleto em todos eles. A correção é a mesma: use a propriedade CSS vertical-align.

Para corrigir este problema, remova o atributo valign dos seus elementos <td> e aplique a propriedade CSS vertical-align equivalente. A propriedade CSS aceita os mesmos valores familiares: top, middle, bottom e baseline.

Exemplos

❌ Incorreto: usar o atributo `valign` obsoleto

<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>

✅ Corrigido: usar CSS inline

<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>

✅ Corrigido: usar uma abordagem baseada em classes (recomendado)

Para melhor manutenibilidade, defina classes CSS reutilizáveis em vez de repetir estilos inline:

<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>

✅ Corrigido: aplicar um padrão a todas as células numa tabela

Se cada célula numa tabela deve partilhar o mesmo alinhamento vertical, direcione-as com uma única regra CSS:

<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>

Esta abordagem é a mais fácil de manter — você define o alinhamento uma vez e aplica-se consistentemente a cada célula, sem precisar de modificar elementos <td> ou <th> individuais.