Aprenda tabelas HTML do básico às técnicas avançadas. Domine elementos table, tr, td, th, acessibilidade, design responsivo e quando usar tabelas adequadamente.
Entender quando usar tabelas é crucial para criar sites semânticos e acessíveis.
Perfeitas para dados tabulares:
Exemplo de uso apropriado de tabela:
<!-- Bom: Exibindo dados estruturados -->
<table>
<caption>Relatório de Vendas Trimestrais 2024</caption>
<thead>
<tr>
<th>Trimestre</th>
<th>Receita</th>
<th>Crescimento</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1</td>
<td>R$ 125.000</td>
<td>+15%</td>
</tr>
<tr>
<td>Q2</td>
<td>R$ 143.750</td>
<td>+18%</td>
</tr>
</tbody>
</table>
Evite tabelas para:
Exemplo de uso inadequado de tabela:
<!-- Errado: Usar tabela para layout -->
<table>
<tr>
<td>
<nav>Navegação aqui</nav>
</td>
<td>
<main>Conteúdo principal aqui</main>
</td>
<td>
<aside>Barra lateral aqui</aside>
</td>
</tr>
</table>
<!-- Correto: Use CSS Grid ou Flexbox -->
<div class="layout">
<nav>Navegação aqui</nav>
<main>Conteúdo principal aqui</main>
<aside>Barra lateral aqui</aside>
</div>
<table>, <tr>, <td>, <th>Entender os elementos fundamentais de tabela é essencial para criar tabelas bem estruturadas.
<table>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
<th>Cabeçalho 3</th>
</tr>
<tr>
<td>Dado 1</td>
<td>Dado 2</td>
<td>Dado 3</td>
</tr>
<tr>
<td>Dado 4</td>
<td>Dado 5</td>
<td>Dado 6</td>
</tr>
</table>
<table> - O elemento contêiner para toda a tabela
<tr> - Elemento de linha da tabela
<th> - Célula de cabeçalho da tabela (automaticamente negrito e centralizado)
<td> - Célula de dados da tabela
<table>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>Estoque</th>
<th>Avaliação</th>
</tr>
<tr>
<td>Laptop Pro</td>
<td>R$ 1.299</td>
<td>15</td>
<td>4,8/5</td>
</tr>
<tr>
<td>Mouse Sem Fio</td>
<td>R$ 29</td>
<td>87</td>
<td>4,5/5</td>
</tr>
<tr>
<td>Hub USB-C</td>
<td>R$ 79</td>
<td>23</td>
<td>4,2/5</td>
</tr>
</table>
Atributo Scope:
<table>
<tr>
<th scope="col">Nome</th>
<th scope="col">Idade</th>
<th scope="col">Cidade</th>
</tr>
<tr>
<th scope="row">João Silva</th>
<td>28</td>
<td>São Paulo</td>
</tr>
<tr>
<th scope="row">Maria Santos</th>
<td>34</td>
<td>Rio de Janeiro</td>
</tr>
</table>
Legendas e resumos melhoram a acessibilidade da tabela e fornecem contexto para os usuários.
O elemento <caption> fornece um título ou descrição para a tabela:
<table>
<caption>Métricas de Performance dos Funcionários - Q3 2024</caption>
<tr>
<th>Funcionário</th>
<th>Vendas</th>
<th>Avaliação do Cliente</th>
<th>Metas Atingidas</th>
</tr>
<tr>
<td>Sara Silva</td>
<td>R$ 45.000</td>
<td>4,9/5</td>
<td>105%</td>
</tr>
<tr>
<td>Miguel Santos</td>
<td>R$ 38.500</td>
<td>4,7/5</td>
<td>98%</td>
</tr>
</table>
caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
color: #333;
}
/* Posicionamento da legenda */
caption {
caption-side: top; /* Padrão */
/* caption-side: bottom; */
}
Nota: O atributo summary está obsoleto no HTML5. Use <caption> ou texto circundante em vez disso:
<!-- Forma antiga (obsoleta) -->
<table summary="Esta tabela mostra dados de vendas trimestrais">
<!-- Nova forma -->
<table>
<caption>
Dados de Vendas Trimestrais
<p>Esta tabela exibe valores de receita e percentuais de crescimento para cada trimestre de 2024</p>
</caption>
<!-- conteúdo da tabela -->
</table>
A mesclagem de células permite criar layouts de tabela mais complexos fazendo células se estenderem por múltiplas colunas ou linhas.
<table>
<tr>
<th colspan="3">Relatório de Vendas 2024</th>
</tr>
<tr>
<th>Trimestre</th>
<th>Receita</th>
<th>Crescimento</th>
</tr>
<tr>
<td>Q1</td>
<td>R$ 100.000</td>
<td>+10%</td>
</tr>
<tr>
<td>Q2</td>
<td>R$ 120.000</td>
<td>+20%</td>
</tr>
<tr>
<td colspan="2">Receita Total</td>
<td>R$ 220.000</td>
</tr>
</table>
<table>
<tr>
<th>Departamento</th>
<th>Funcionário</th>
<th>Cargo</th>
<th>Salário</th>
</tr>
<tr>
<td rowspan="3">Engenharia</td>
<td>João Silva</td>
<td>Desenvolvedor Sênior</td>
<td>R$ 95.000</td>
</tr>
<tr>
<td>Sara Santos</td>
<td>Desenvolvedora Frontend</td>
<td>R$ 75.000</td>
</tr>
<tr>
<td>Miguel Oliveira</td>
<td>Engenheiro DevOps</td>
<td>R$ 85.000</td>
</tr>
<tr>
<td rowspan="2">Marketing</td>
<td>Lisa Costa</td>
<td>Gerente de Marketing</td>
<td>R$ 70.000</td>
</tr>
<tr>
<td>Tom Pereira</td>
<td>Criador de Conteúdo</td>
<td>R$ 55.000</td>
</tr>
</table>
<table>
<tr>
<th colspan="4">Dashboard de Performance da Empresa</th>
</tr>
<tr>
<th rowspan="2">Métricas</th>
<th colspan="3">Trimestres</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
<tr>
<td>Receita</td>
<td>R$ 150K</td>
<td>R$ 175K</td>
<td>R$ 200K</td>
</tr>
<tr>
<td>Lucro</td>
<td>R$ 45K</td>
<td>R$ 52K</td>
<td>R$ 65K</td>
</tr>
</table>
Para tabelas complexas, use elementos semânticos para melhorar estrutura e acessibilidade.
<thead>, <tbody>, <tfoot><table>
<caption>Resumo Financeiro Anual</caption>
<thead>
<tr>
<th scope="col">Categoria</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Receita</th>
<td>R$ 125.000</td>
<td>R$ 143.750</td>
<td>R$ 165.313</td>
<td>R$ 190.110</td>
<td>R$ 624.173</td>
</tr>
<tr>
<th scope="row">Despesas</th>
<td>R$ 87.500</td>
<td>R$ 100.625</td>
<td>R$ 115.719</td>
<td>R$ 133.077</td>
<td>R$ 436.921</td>
</tr>
<tr>
<th scope="row">Lucro</th>
<td>R$ 37.500</td>
<td>R$ 43.125</td>
<td>R$ 49.594</td>
<td>R$ 57.033</td>
<td>R$ 187.252</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Margem de Lucro</th>
<td>30%</td>
<td>30%</td>
<td>30%</td>
<td>30%</td>
<td>30%</td>
</tr>
</tfoot>
</table>
<colgroup> e <col><table>
<caption>Comparação de Produtos</caption>
<colgroup>
<col>
<col span="2" class="price-columns">
<col class="rating-column">
</colgroup>
<thead>
<tr>
<th>Produto</th>
<th>Preço Normal</th>
<th>Preço Promocional</th>
<th>Avaliação</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>R$ 999</td>
<td>R$ 799</td>
<td>4,5/5</td>
</tr>
<tr>
<td>Tablet</td>
<td>R$ 599</td>
<td>R$ 499</td>
<td>4,2/5</td>
</tr>
</tbody>
</table>
.price-columns {
background-color: #f0f8ff;
}
.rating-column {
background-color: #fff8dc;
text-align: center;
}
Tornar tabelas acessíveis garante que todos os usuários possam entender e navegar seus dados efetivamente.
1. Use Cabeçalhos de Tabela Adequadamente:
<table>
<tr>
<th scope="col">Nome</th>
<th scope="col">Departamento</th>
<th scope="col">Salário</th>
</tr>
<tr>
<th scope="row">João Silva</th>
<td>Engenharia</td>
<td>R$ 75.000</td>
</tr>
</table>
2. Forneça Legendas Claras:
<table>
<caption>
Informações de Salário dos Funcionários
<span class="sr-only">
Esta tabela contém nomes de funcionários, departamentos e informações salariais
</span>
</caption>
<!-- conteúdo da tabela -->
</table>
3. Use Rótulos ARIA Quando Necessário:
<table aria-label="Detalhamento do orçamento mensal">
<tr>
<th id="category">Categoria</th>
<th id="budgeted">Orçado</th>
<th id="actual">Real</th>
<th id="difference">Diferença</th>
</tr>
<tr>
<td headers="category">Moradia</td>
<td headers="budgeted">R$ 1.200</td>
<td headers="actual">R$ 1.150</td>
<td headers="difference">-R$ 50</td>
</tr>
</table>
Para tabelas com múltiplos níveis de cabeçalhos:
<table>
<caption>Dados de Vendas por Região e Trimestre</caption>
<thead>
<tr>
<th rowspan="2" id="region">Região</th>
<th colspan="4" id="quarters">Trimestres 2024</th>
</tr>
<tr>
<th id="q1" headers="quarters">Q1</th>
<th id="q2" headers="quarters">Q2</th>
<th id="q3" headers="quarters">Q3</th>
<th id="q4" headers="quarters">Q4</th>
</tr>
</thead>
<tbody>
<tr>
<th id="north" headers="region">Norte</th>
<td headers="north q1">R$ 125K</td>
<td headers="north q2">R$ 143K</td>
<td headers="north q3">R$ 165K</td>
<td headers="north q4">R$ 190K</td>
</tr>
<tr>
<th id="south" headers="region">Sul</th>
<td headers="south q1">R$ 98K</td>
<td headers="south q2">R$ 112K</td>
<td headers="south q3">R$ 128K</td>
<td headers="south q4">R$ 145K</td>
</tr>
</tbody>
</table>
/* Texto apenas para leitores de tela */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Pular navegação da tabela */
.skip-table {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-table:focus {
position: static;
width: auto;
height: auto;
}
Transforme tabelas HTML básicas em exibições de dados visualmente atraentes e profissionais.
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
font-weight: 600;
color: #333;
text-transform: uppercase;
font-size: 0.9em;
letter-spacing: 0.5px;
}
tr:hover {
background-color: #f5f5f5;
}
/* Cores alternadas de linhas */
tr:nth-child(even) {
background-color: #f9f9f9;
}
.modern-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-width: 400px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.modern-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.modern-table th,
.modern-table td {
padding: 12px 15px;
}
.modern-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.modern-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.modern-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.modern-table tbody tr:hover {
background-color: #f1f1f1;
transform: scale(1.02);
transition: all 0.3s ease;
}
.responsive-table {
width: 100%;
border-collapse: collapse;
}
@media screen and (max-width: 768px) {
.responsive-table {
border: 0;
}
.responsive-table caption {
font-size: 1.3em;
}
.responsive-table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.responsive-table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: 10px;
}
.responsive-table td {
border: none;
border-bottom: 1px solid #eee;
display: block;
font-size: 0.8em;
text-align: right;
padding-left: 50%;
position: relative;
}
.responsive-table td:before {
content: attr(data-label);
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
text-align: left;
}
}
<table class="responsive-table">
<thead>
<tr>
<th>Nome</th>
<th>Posição</th>
<th>Escritório</th>
<th>Salário</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Nome">João Silva</td>
<td data-label="Posição">Desenvolvedor</td>
<td data-label="Escritório">São Paulo</td>
<td data-label="Salário">R$ 75.000</td>
</tr>
</tbody>
</table>
.action-table {
width: 100%;
border-collapse: collapse;
}
.action-table th,
.action-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.action-buttons {
display: flex;
gap: 8px;
}
.btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.8em;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s;
}
.btn-edit {
background-color: #007bff;
color: white;
}
.btn-edit:hover {
background-color: #0056b3;
}
.btn-delete {
background-color: #dc3545;
color: white;
}
.btn-delete:hover {
background-color: #c82333;
}
<table class="action-table">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>João Silva</td>
<td>joao@exemplo.com</td>
<td>
<div class="action-buttons">
<a href="#" class="btn btn-edit">Editar</a>
<button class="btn btn-delete">Excluir</button>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Errado: Tabela para layout de página -->
<table>
<tr>
<td>Cabeçalho</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Barra lateral</td>
<td>Conteúdo</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Correto: CSS Grid para layout -->
<div class="page-layout">
<header>Cabeçalho</header>
<aside>Barra lateral</aside>
<main>Conteúdo</main>
</div>
<!-- Errado: Sem cabeçalhos -->
<table>
<tr>
<td>Nome</td>
<td>Idade</td>
<td>Cidade</td>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>SP</td>
</tr>
</table>
<!-- Correto: Cabeçalhos adequados -->
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>SP</td>
</tr>
</table>
<!-- Errado: Colunas inconsistentes -->
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>Célula extra</td> <!-- Isso quebra a estrutura -->
</tr>
</table>
<!-- Correto: Estrutura consistente -->
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Observações</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>Novo funcionário</td>
</tr>
</table>
<!-- Errado: Sem consideração mobile -->
<table style="width: 1200px;">
<!-- Tabela muito larga com muitas colunas -->
</table>
<!-- Correto: Abordagem responsiva -->
<div class="table-container">
<table class="responsive-table">
<!-- Tabela com design mobile-friendly -->
</table>
</div>
<table class="sortable-table">
<thead>
<tr>
<th data-sort="string">Nome <span class="sort-arrow">↕</span></th>
<th data-sort="number">Idade <span class="sort-arrow">↕</span></th>
<th data-sort="number">Salário <span class="sort-arrow">↕</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>João Silva</td>
<td>28</td>
<td>75000</td>
</tr>
<tr>
<td>Maria Santos</td>
<td>34</td>
<td>85000</td>
</tr>
</tbody>
</table>
<div class="table-controls">
<input type="text" id="table-filter" placeholder="Filtrar tabela...">
</div>
<table class="filterable-table">
<thead>
<tr>
<th>Produto</th>
<th>Categoria</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>Eletrônicos</td>
<td>R$ 999</td>
</tr>
<tr>
<td>Cadeira de Escritório</td>
<td>Móveis</td>
<td>R$ 299</td>
</tr>
</tbody>
</table>
<table class="expandable-table">
<thead>
<tr>
<th></th>
<th>ID do Pedido</th>
<th>Cliente</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="expandable-row">
<td><button class="expand-btn">+</button></td>
<td>#12345</td>
<td>João Silva</td>
<td>R$ 299,99</td>
</tr>
<tr class="detail-row" style="display: none;">
<td colspan="4">
<div class="order-details">
<p><strong>Itens:</strong> Laptop, Mouse, Teclado</p>
<p><strong>Envio:</strong> Entrega Expressa</p>
<p><strong>Status:</strong> Processando</p>
</div>
</td>
</tr>
</tbody>
</table>
Tabelas HTML são ferramentas poderosas para apresentar dados estruturados quando usadas corretamente. Ao entender marcação adequada de tabelas, requisitos de acessibilidade e técnicas de design responsivo, você pode criar tabelas que são funcionais e amigáveis ao usuário em todos os dispositivos e tecnologias assistivas.
Lembre-se de que tabelas devem melhorar a compreensão de dados, não complicá-la. Foque em estrutura clara, cabeçalhos significativos e design acessível para criar tabelas que sirvam efetivamente a todos os seus usuários.
Comece a implementar essas técnicas de tabela em seus projetos, e você criará apresentações de dados mais profissionais, acessíveis e amigáveis ao usuário que funcionam lindamente em todas as plataformas e dispositivos.
Continue lendo com estes artigos relacionados
Domine imagens HTML com este guia abrangente cobrindo a tag img, texto alternativo, formatos de arquivo, imagens responsivas, srcset e otimização de performance web.
Domine listas HTML com este guia completo cobrindo elementos ul, ol e dl, técnicas de aninhamento, estilização com CSS e melhores práticas de acessibilidade.
Aprenda a criar formulários HTML interativos com tipos de entrada, rótulos, botões e validação básica. Domine a acessibilidade e melhores práticas de formulários.
Descubra o poder dos elementos HTML semânticos como header, footer, article e section. Aprenda como a marcação semântica melhora SEO, acessibilidade e manutenibilidade do código.