Dados
Tabela de dados
Data table
Organiza informações comparáveis em linhas e colunas.
| Pedido | Status | Total |
|---|---|---|
| #1024 | Pago | R$ 149 |
| #1023 | Em análise | R$ 89 |
| #1022 | Pago | R$ 210 |
Exemplo didático · Representação visual do padrão
Quando usar
Comparar registros estruturados como produtos, pedidos e relatórios.
Cuidados e acessibilidade
Associe cabeçalhos às células e ofereça uma estratégia para telas estreitas.
Partes e comportamento
Título da tabela, cabeçalhos, linhas e células associadas.
Não confunda
Não use tabela para compor o layout da página; reserve-a para relações entre dados.
Exemplo de código
<table>
<caption>Pedidos recentes</caption>
<thead><tr><th scope="col">Pedido</th><th scope="col">Total</th></tr></thead>
<tbody><tr><th scope="row">1024</th><td>R$ 149,00</td></tr></tbody>
</table>Trecho didático. Integre e teste no contexto do seu projeto.