.jpg)
Seja muito bem-vindo à Academy Code Christ!
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
Nesta aula, você vai aprender como criar e estruturar tabelas em HTML de forma organizada e semântica.
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.
🧱 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 1:
<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).
O atributo border é usado apenas para
visualização nos exemplos, mas na prática, a formatação será feita via CSS.
🧩 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 2:
<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
Os <th> são
exibidos em negrito e centralizados por padrão.
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
🔎 Veja como fica o resultado no Live Server
O <tfoot> aparece
visualmente no final, mas pode ser colocado antes do <tbody> no HTML — os navegadores ajustam
automaticamente a exibição.
Observe o uso do colspan="2",
que mescla duas células horizontalmente.
🧩 Mesclagem de Células (colspan e rowspan)
👉 rowspan
Usado para mesclar linhas.
<td rowspan="3">Célula ocupando três linhas</td>
💡 Exemplo:
<table border="1">
<tr>
<th>Categoria</th>
<th>Produto</th>
</tr>
<tr>
<td rowspan="2">Eletrônicos</td>
<td>Teclado</td>
</tr>
<tr>
<td>Mouse</td>
</tr>
</table>
👉 colspan
Usado para mesclar colunas.
<td colspan="2">Célula mesclada em duas colunas</td>
💡
Exemplo:
<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 com
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 - 2026</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.
❓ Perguntas Frequentes (FAQ)
Qual a diferença entre <td> e <th> em tabelas
HTML?
A tag <td> é usada para representar células
comuns da tabela, enquanto <th> define células de cabeçalho. Os
elementos <th> possuem significado semântico, ajudam na acessibilidade e normalmente
aparecem em negrito e centralizados por padrão.
Para que servem <thead>, <tbody> e <tfoot>?
Essas tags ajudam a organizar melhor a estrutura da tabela:
- <thead> → define o cabeçalho da tabela.
- <tbody> → agrupa o conteúdo principal.
- <tfoot> → representa o rodapé, geralmente usado para totais ou resumos.
Essa separação
melhora a organização do código, facilita manutenção e contribui para
acessibilidade e estilização com CSS.
O que fazem os
atributos colspan e rowspan?
Os atributos colspan e rowspan servem para mesclar células em
tabelas HTML.
- colspan → une colunas horizontalmente.
- rowspan → une linhas verticalmente.
Exemplo:
<td
colspan="2">Mesclando duas colunas</td>
<td
rowspan="3">Mesclando três linhas</td>
📚 Continue aprendendo HTML:
Siga para a próxima etapa e continue avançando na sua jornada pelo desenvolvimento web!
🟠 Etapa 01 👉 O que é HTML e como a Web funciona
🟠 Etapa 02 👉 Textos, Parágrafos e Quebras de Linha
🟠 Etapa 03 👉 Listas
🟠 Etapa 04 👉 Imagens, Vídeos e Mídias Incorporadas
🟠 Etapa 05 👉 Links e Navegação no HTML
🟠 Etapa 06 👉 Formulários e Interatividade
🟠 Etapa 07 👉 Estrutura Semântica
🟠 Etapa 08 👉 Você está nessa Aula
🟠 Etapa 09 👉 Layouts e Responsividade (com CSS introdutório)
🟠 Etapa 10 👉 CSS Moderno: Layout no HTML
.png)
.png)
Postar um comentário