23.01.2025

Como Alinhar Imagens e Texto no Topo em uma Tabela HTML

Resposta Rápida

Se você precisa posicionar texto nas células da tabela na borda superior, a propriedade CSS vertical-align: top; será útil, sendo aplicada aos elementos <td> e <th>:

<td style="vertical-align: top;">Seu texto aqui</td>

Esse alinhamento garante que todo o conteúdo fique pressionado para o topo da célula.

Você também pode externalizar os estilos em um arquivo CSS separado ou dentro de uma tag <style> no cabeçalho do seu documento para melhorar a estrutura geral do seu código:

/* Arquivo CSS externo ou tag <style> no cabeçalho do documento */
td, th {
    vertical-align: top; 
}

Princípios de Funcionamento

O alinhamento vertical determina a posição do conteúdo dentro de uma célula em relação às suas bordas. Neste caso, estamos interessados no valor top da propriedade vertical-align, que desloca o conteúdo para cima.

Estilos Inline vs. CSS Externo

Utilizar estilos inline pode complicar a legibilidade e a manutenção do seu código, especialmente quando você o expande. Portanto, é recomendável gerenciar os estilos utilizando um arquivo CSS externo ou colocá-los dentro de uma tag <style> no cabeçalho do seu documento.

Usando 'div' para Alinhamento

Frequentemente, o elemento <div> dentro das células pode ser uma solução útil, especialmente quando restrições rígidas de tamanho para o conteúdo são necessárias. Aqui, você pode definir um <div> com largura e altura fixas, que servirá como um contêiner onde o conteúdo será alinhado no topo.

<td>
  <div style="height: 100px; vertical-align: top;">
    <!-- Seu texto -->
  </div>
</td>

Combinando Vários Elementos

Para usar texto e elementos de mídia simultaneamente nas células da tabela, vertical-align: top; será uma solução universal. Isso permitirá garantir um alinhamento vertical consistente de todos os elementos.

<td>
  <img src="imagem.png" style="vertical-align: top;" alt="Descrição da imagem">
  Qualquer texto
</td>

Visualização

Um exemplo esquemático demonstrando o alinhamento vertical do conteúdo da célula da tabela no topo:

Como dito, imagine um porco 🐖, uma girafa 🦒 e uma formiga 🐜, em suas pedestais.

O alinhamento vertical no topo pode ser descrito da seguinte forma:

🛠 Células da Tabela HTML 🛠
| 🐖       |
| -------- |
| 🦒       |
| -------- |
| 🐜       |

Ou seja, independentemente do tamanho de cada personagem, todos estão alinhados no topo.

Pontos Chave

• Células Vazias: vertical-align: top; não afeta espaços vazios.
• Alturas Variáveis de Células: Diferenças significativas de altura nas células podem dificultar a percepção do alinhamento no topo.
• Estilo 'valign' Obsoleto: O atributo HTML obsoleto foi substituído por vertical-align.

Exibição em Diferentes Navegadores

Um requisito essencial é que as tabelas tenham uma aparência consistente em diferentes navegadores. Sempre verifique a representação visual em várias plataformas.

Acessibilidade: Abrace as Mudanças

Acessibilidade e legibilidade para leitores de tela são objetivos importantes. Implementar funções ARIA e usar elementos HTML semânticos, alinhamento no topo e formatação clara de tabelas facilitarão o uso para todos os usuários.

Recursos Úteis

1. Tag HTML <td> — Descrição completa da tag td, incluindo seu atributo valign.
2. Estilizando Tabelas em CSS — Dicas e exemplos para estilizar tabelas com CSS.
3. Estilizando tabelas - Aprenda desenvolvimento web | MDN — Recomendações úteis para estilizar tabelas da Mozilla.
4. html - Por que vertical-align: middle não funciona no meu span ou div? - Stack Overflow — Discussão sobre os desafios do alinhamento vertical usando vertical-align.
5. vertical-align - CSS | MDN — Descrição da propriedade CSS vertical-align da Mozilla.
6. Propriedade vertical-align em CSS — Tutorial sobre a propriedade vertical-align em CSS.
7. Tabelas de Dados Responsivas: Uma Lista Abrangente de Soluções — SitePoint — Dicas para criar tabelas responsivas.

Video

Navigation