HTML Academy · Aula

table, tr, td e th

Criar tabelas básicas com linhas, células de dados e células de cabeçalho.

table, tr, td e th é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Tabelas HTML

As tabelas exibem dados em linhas e colunas. Use-as para dados tabulares — não para o layout da página.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Os elementos table, tr e td

Elementos essenciais das tabelas:

<table> — o contêiner da tabela
<tr> — uma linha da tabela
<td> — uma célula de dados da tabela
<th> — uma célula de cabeçalho da tabela (em negrito e centralizada por padrão)

th versus td

Use <th> para células de cabeçalho — elas têm significado semântico:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Estrutura básica de uma tabela

Uma tabela mínima, mas completa:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Bordas de tabelas com CSS

Por padrão, os navegadores exibem tabelas sem bordas. Adicione-as com CSS:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Tabelas não servem para layout

Na década de 1990, as tabelas eram usadas para o layout das páginas. Essa prática está ultrapassada e é prejudicial:

Os leitores de tela interpretam tabelas como dados — tabelas de layout confundem os usuários
As tabelas são pouco flexíveis em telas pequenas
CSS Grid e Flexbox substituíram todas as necessidades de layout
Use <table> somente para dados realmente tabulares

Tabelas responsivas

As tabelas transbordam em telas pequenas. Envolva-as para permitir a rolagem horizontal:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Células vazias

Trate as células vazias de forma deliberada:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Prévia de thead e tbody

As tabelas devem usar <thead> e <tbody> para separar as linhas de cabeçalho das linhas de dados — isso será abordado na próxima lição:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col e colgroup para estilizar colunas

Aplique estilos a colunas inteiras com <colgroup> e <col>:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Listras alternadas com CSS

Alterne as cores das linhas para facilitar a leitura:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Verificação rápida

Qual é a diferença entre td e th em uma tabela?

Resumo: table, tr, td e th

Fundamentos das tabelas:

<table> — contêiner da tabela
<tr> — linha da tabela
<td> — célula de dados
<th> — célula de cabeçalho (semântica e em negrito por padrão)
Use border-collapse: collapse para obter bordas uniformes
As tabelas servem apenas para dados — não para o layout da página

Perguntas Frequentes

A aula “table, tr, td e th” é grátis?

Sim — o texto completo de “table, tr, td e th” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “table, tr, td e th”?

Criar tabelas básicas com linhas, células de dados e células de cabeçalho. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “table, tr, td e th”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para HTML Academy