HTML5 Mestre dos Mestres • Aula Suprema 21

Linhas, Colunas e Células

Linhas, colunas e células formam a geometria lógica dos dados tabulares. O Mestre pensa em registros, categorias e valores antes de escrever qualquer tag.

Ir para o Desafio Mestre Aula 20 Voltar ao Módulo

NARRAÇÃO MESTRE

Narrador Mestre

Ouça a aula, revise blocos e estude com foco.

Voz Velocidade Tom

Pronto para narrar. As vozes disponíveis dependem do navegador e do sistema.

Abertura de impacto

Tabela não é desenho: é geometria de dados

Uma tabela profissional é um grid de inteligência. Cada linha representa um registro, cada coluna representa uma categoria lógica e cada célula representa um valor específico na intersecção entre registro e categoria.

Promessa da aula:

Você vai dominar a lógica de tr, td, th, colspan e rowspan para criar tabelas complexas sem quebrar semântica, acessibilidade e organização.

Geometria básica

tr, td e th

tr: representa uma linha física da tabela.
td: representa uma célula de dado, ou seja, um valor.
th: representa uma célula de cabeçalho, ou seja, contexto.

<table>
  <tr>
    <th scope="col">Nome</th>
    <th scope="col">Nota</th>
    <th scope="col">Cidade</th>
  </tr>
  <tr>
    <th scope="row">João Silva</th>
    <td>9.5</td>
    <td>São Paulo</td>
  </tr>
</table>

No HTML, a coluna não é escrita como uma “linha vertical” de código. Ela nasce da consistência: a primeira célula de cada linha forma a primeira coluna, a segunda célula forma a segunda coluna, e assim por diante.

Erro fatal:

Colocar td fora de tr, criar tr fora de table ou fazer linhas com quantidade irregular de células sem mesclagem planejada.

Mesclagem

colspan e rowspan

colspan expande uma célula na horizontal. rowspan expande uma célula na vertical. A mesclagem é poderosa, mas exige planejamento para não destruir a leitura.

colspan

<tr>
  <th colspan="4">Relatório Financeiro Anual</th>
</tr>

<tr>
  <td colspan="3">Venda Total Bruta</td>
  <td>R$ 15.000,00</td>
</tr>

rowspan

<tr>
  <th rowspan="2">Segunda-feira</th>
  <td>08:00 - HTML5</td>
</tr>
<tr>
  <td>10:00 - CSS3</td>
</tr>

Exemplo visual: Agenda Mestre com colspan e rowspan
Período	Horário	Atividade	Status	Evidência
Manhã	08:00	HTML5	Concluído	Mapa de dados
Manhã	10:00	Tabelas	Concluído	Relatório técnico
Tarde	14:00	Revisão geral de dados tabulares		Checklist
Total de blocos estudados				3

Regra Mestre:

Se você usar rowspan="2", a linha de baixo precisa ter uma célula a menos naquela coluna, porque o espaço já está ocupado pela célula de cima.

Boas práticas

Modelagem profissional de dados tabulares

Planeje as colunas antes de escrever o HTML.
Trate cada tr como um registro completo.
Use td para valores e th para contexto.
Use scope="col" em cabeçalhos de coluna.
Use scope="row" em cabeçalhos de linha.
Mantenha consistência entre as linhas.
Use colspan e rowspan apenas quando houver necessidade real.
Teste tabelas mescladas com atenção no navegador.
Evite mesclagens que prejudiquem acessibilidade.

Desafio Mestre

Mapa de Dados com Linhas, Colunas e Células

Missão: criar o arquivo mapa-dados-tabela.html demonstrando domínio de geometria lógica em tabelas HTML.

Requisitos obrigatórios

Doctype HTML5.
html lang="pt-BR".
Head completo com charset, viewport, title e meta description.
Body com header, main e footer.
H1 com “Mapa de Dados com Linhas, Colunas e Células”.
Section introdutória explicando linhas, colunas e células.
Uma tabela com caption.
thead com pelo menos 5 cabeçalhos usando th scope="col".
tbody com pelo menos 6 linhas de dados.
Pelo menos uma célula com th scope="row".
Pelo menos uma célula usando colspan corretamente.
Pelo menos uma célula usando rowspan corretamente.
tfoot com uma linha de resumo.
Explicação clara da diferença entre tr, td e th.
Explicação clara da diferença entre colspan e rowspan.
Lista com pelo menos 5 boas práticas para organizar linhas, colunas e células.
Footer com nome do aluno, ano e link para voltar ao topo.

Erros que reprovam:

td fora de tr.
tr fora de table.
Usar tabela para layout.
Mesclagem que quebra a leitura.
Ausência de th e scope em tabela complexa.
Linhas com quantidade inconsistente de células sem justificativa.

Quiz com gabarito

15 perguntas para provar domínio

O que significa tr? Table Row, linha da tabela.
Função do td? Criar células de dados.
Função do th? Criar células de cabeçalho/contexto.
Existe tag específica para coluna de dados? Não; colunas surgem pela consistência das células.
O que pode entrar dentro de td? Textos, links, imagens, listas e até outras tabelas.
Para que serve colspan? Mesclar células horizontalmente.
Para que serve rowspan? Mesclar células verticalmente.
Como th ajuda acessibilidade? Fornece rótulos e contexto aos dados.
Quando usar scope="col"? Quando o cabeçalho rotula uma coluna.
Quando usar scope="row"? Quando o cabeçalho rotula uma linha.
Perigo de errar o número de células? Quebra alinhamento e leitura.
Se usar rowspan="2", o que fazer na linha debaixo? Omitir a célula já ocupada.
Tag que dá título à tabela? caption.
Quando usar th em vez de td? Quando a célula dá contexto ao dado.
Por que não usar tabela para layout? Porque compromete semântica e acessibilidade.

GitHub

Registre seu mapa de dados

git status
git add .
git commit -m "aula-21: cria mapa de dados com linhas colunas e celulas"
git push

git status: verifica arquivos modificados.
git add .: prepara todos os arquivos para versionamento.
git commit: registra seu domínio da geometria de tabelas.
git push: publica a evidência no GitHub.

Resumo Mestre

Linhas são registros. Células são valores. Colunas são disciplina.

A tabela é um grid lógico. O domínio de tr, td, th, colspan e rowspan permite representar dados complexos sem destruir semântica, acessibilidade e clareza.

Nota final: 10/10 Supremo.

Esta aula está no nível Mestre dos Mestres porque transforma tags de tabela em arquitetura de informação: registros, categorias, valores e expansão nos eixos horizontal e vertical.

Voltar ao Módulo HTML5 Voltar ao Topo