Como criar e estruturar tabelas em HTML
Bem-vindo(a) ao post no blog.
Vamos entender como funcionam os principais elementos de uma tabela e como separar corretamente cabeçalho, corpo e rodapé, garantindo uma estrutura clara e fácil de manter.
As tabelas são muito utilizadas para exibir dados de forma estruturada, como listas, relatórios e informações organizadas em linhas e colunas.
🧱 1. A estrutura básica de uma tabela
As tabelas são construídas com a tag <table>, que contém linhas (<tr>) e células (<td>).
Cada célula pode conter texto, imagens ou até outros elementos HTML.
💡 Exemplo básico:
<table border="1">
<tr>
<td>Nome</td>
<td>Idade</td>
<td>Cidade</td>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>Rio de Janeiro</td>
</tr>
</table>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🔎 Elementos usados:
<table> → Define a tabela.
<tr> → Representa uma linha (Table Row).
<td> → Representa uma célula comum (Table Data).
🧩 Cabeçalhos de tabela (<th>)
Para dar mais significado às colunas, usamos <th> (Table Header),
que indica que a célula é um título de coluna ou linha.
💡 Exemplo:
<table border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>São Paulo</td>
</tr>
</table>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
Também ajudam na acessibilidade (informam o significado da célula aos leitores de tela).
⚙️ Separando Cabeçalho, Corpo e Rodapé da Tabela
Tabelas complexas podem ter três partes principais:
Tag Função
<thead> → Cabeçalho (títulos das colunas)
<tbody> → Corpo (conteúdo principal da tabela)
<tfoot> → Rodapé (dados de resumo ou totais)
💡 Exemplo completo:
<table border="1">
<thead>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mouse</td>
<td>R$ 50,00</td>
<td>10</td>
</tr>
<tr>
<td>Teclado</td>
<td>R$ 120,00</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total de Itens</td>
<td>15</td>
</tr>
</tfoot>
</table>
🔎 Veja como fica no VScode
Observe o uso do colspan="2", que mescla duas células horizontalmente.
🧩 Mesclagem de Células (colspan e rowspan)
👉 colspan
Usado para mesclar colunas.
<td colspan="2">Célula mesclada em duas colunas</td>
👉 rowspan
Usado para mesclar linhas.
<td rowspan="3">Célula ocupando três linhas</td>
💡 Exemplo combinado:
<table border="1">
<tr>
<th>Nome</th>
<th colspan="2">Contato</th>
</tr>
<tr>
<td>João</td>
<td>E-mail</td>
<td>Telefone</td>
</tr>
</table>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🧭 Adicionando títulos e legendas (<caption>)
Para deixar a tabela mais descritiva, você pode definir um título usando <caption>.
💡 Exemplo:
<table border="1">
<caption>Relatório de Vendas</caption>
<thead>
<tr>
<th>Produto</th>
<th>Valor Unitário</th>
<th>Unidades Vendidas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>R$ 2500</td>
<td>3</td>
</tr>
<tr>
<td>Monitor</td>
<td>R$ 800</td>
<td>5</td>
</tr>
</tbody>
</table>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
O <caption> aparece acima da tabela por padrão.
É importante para acessibilidade e SEO.
🧠 Tornando tabelas mais acessíveis
Para tabelas grandes, use o atributo scope nas células <th>,
indicando se o cabeçalho se refere a colunas ou linhas:
<th scope="col">Produto</th>
<th scope="col">Preço</th>
...
<th scope="row">Laptop</th>
Também é boa prática usar o atributo id e headers para conectar dados e títulos em tabelas complexas.
💡 Exemplo:
<table border="1">
<thead>
<tr>
<th id="produto">Produto</th>
<th id="quantidade">Quantidade</th>
<th id="preco">Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="produto">Mouse</td>
<td headers="quantidade">10</td>
<td headers="preco">R$ 50</td>
</tr>
</tbody>
</table>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🎨 Estilização básica de tabelas com CSS
O HTML define a estrutura; o CSS cuida da aparência.
Exemplo simples para tornar a tabela legível e agradável:
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #999;
padding: 10px;
text-align: center;
}
th {
background-color: #f3f3f3;
}
caption {
caption-side: top;
font-weight: bold;
margin-bottom: 10px;
}
</style>
💡Atenção:
A tag <style></style> é para usar o CSS junto com o Html, se você separou os arquivos um para Html e outro para o CSS remova a tag <style>
🧾 Exemplo completo — Tabela profissional (Html junto com CSS)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Tabela de Cursos</title>
<style>
table {
width: 70%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #aaa;
padding: 10px;
text-align: center;
}
thead {
background-color: #f4f4f4;
}
tfoot td {
font-weight: bold;
background-color: #fafafa;
}
caption {
caption-side: top;
font-weight: bold;
padding: 8px;
text-transform: uppercase;
}
</style>
</head>
<body>
<table>
<caption>Tabela de Cursos e Preços - 2024</caption>
<thead>
<tr>
<th>Curso</th>
<th>Categoria</th>
<th>Carga Horária</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML e CSS</td>
<td>Desenvolvimento Web</td>
<td>40h</td>
<td>R$ 199,00</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Front-End</td>
<td>60h</td>
<td>R$ 299,00</td>
</tr>
<tr>
<td>Python</td>
<td>Back-End</td>
<td>80h</td>
<td>R$ 399,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total de Cursos</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
🔎 Veja como fica o resultado no Live Server
✅ Boas práticas no uso de tabelas
1. Use tabelas apenas para dados, e não para layout.
2. Sempre inclua <th> e <caption> para acessibilidade.
3. Evite tabelas muito largas — use CSS e responsividade.
4. Agrupe conteúdo grande usando <thead>, <tbody> e <tfoot>.
5. Teste em dispositivos móveis (tabelas grandes podem precisar de rolagem horizontal).
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💻 Exercício
Crie um arquivo chamado tabela_dados.html contendo:
1. Uma tabela com título (caption): Relatório de Funcionários
2. Use <thead>, <tbody>, <tfoot> e formatação com CSS.
3. Adicione colunas: Nome, Cargo, Departamento, Salário.
4. Inclua três funcionários e um total de salários no rodapé.
5. Use pelo menos um colspan e um rowspan.
✅ Desafio Extra
Adicione uma coluna com foto de perfil (usando <img>) dentro das células.
Comentários
Postar um comentário