Estrutura básica de uma tabela: table, tr, td e th

Imagine uma planilha do Excel — linhas, colunas e células organizando dados de forma que você consiga comparar, relacionar e entender informações rapidamente. É exatamente isso que a tag <table> faz no HTML.

Tabelas existem para organizar dados tabulares — informações que têm uma relação natural de linhas e colunas. Nesta lição, você vai conhecer as quatro tags fundamentais que formam qualquer tabela HTML.

As quatro tags fundamentais

Construindo uma tabela passo a passo

Passo 1: o contêiner table

<table>
  <!-- linhas e células vão aqui -->
</table>

<table> é o elemento que envolve toda a tabela. Sozinho, ele não exibe nada — precisa de linhas e células para ter conteúdo.

Passo 2: adicionando linhas com tr

<table>
  <tr><!-- primeira linha --></tr>
  <tr><!-- segunda linha --></tr>
  <tr><!-- terceira linha --></tr>
</table>

Cada <tr> representa uma linha horizontal da tabela. Pense nas linhas de uma planilha — cada <tr> é uma delas.

Passo 3: adicionando células com td

<table>
  <tr>
    <td>Ana Silva</td>
    <td>Desenvolvedora Front-end</td>
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Carlos Lima</td>
    <td>Designer UX</td>
    <td>Rio de Janeiro</td>
  </tr>
</table>

Cada <td> dentro de um <tr> é uma célula de dado — uma coluna daquela linha. O navegador renderiza:

Ana Silva    | Desenvolvedora Front-end | São Paulo
Carlos Lima  | Designer UX              | Rio de Janeiro

Passo 4: adicionando cabeçalhos com th

Uma tabela sem cabeçalho é como uma planilha sem os títulos das colunas — você vê os dados mas não sabe o que cada coluna representa:

<table>

  <!-- Linha de cabeçalho com th -->
  <tr>
    <th>Nome</th>
    <th>Cargo</th>
    <th>Cidade</th>
  </tr>

  <!-- Linhas de dados com td -->
  <tr>
    <td>Ana Silva</td>
    <td>Desenvolvedora Front-end</td>
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Carlos Lima</td>
    <td>Designer UX</td>
    <td>Rio de Janeiro</td>
  </tr>
  <tr>
    <td>Bia Santos</td>
    <td>Gerente de Produto</td>
    <td>Belo Horizonte</td>
  </tr>

</table>

O navegador renderiza <th> em negrito e centralizado por padrão — diferenciando visualmente o cabeçalho dos dados:

Nome        | Cargo                    | Cidade
─────────────────────────────────────────────────
Ana Silva   | Desenvolvedora Front-end | São Paulo
Carlos Lima | Designer UX              | Rio de Janeiro
Bia Santos  | Gerente de Produto       | Belo Horizonte

td vs. th: a diferença semântica

A diferença entre <td> e <th> não é apenas visual — é semântica:

<!-- ❌ Usando td para cabeçalhos — funciona visualmente
     mas perde a semântica -->
<tr>
  <td><strong>Nome</strong></td>
  <td><strong>Cargo</strong></td>
</tr>

<!-- ✅ Usando th — semântica correta -->
<tr>
  <th>Nome</th>
  <th>Cargo</th>
</tr>

💡 Um leitor de tela ao chegar em uma célula <td> pode anunciar: "Ana Silva — coluna Nome, linha 2". Isso só é possível porque existe um <th> com o texto "Nome" identificando aquela coluna.

th para cabeçalhos de linha

O <th> não é exclusivo de colunas — ele também pode identificar o cabeçalho de uma linha:

<table>
  <tr>
    <th>Segunda-feira</th>
    <td>Reunião de equipe</td>
    <td>Revisão de código</td>
  </tr>
  <tr>
    <th>Terça-feira</th>
    <td>Desenvolvimento</td>
    <td>Testes</td>
  </tr>
  <tr>
    <th>Quarta-feira</th>
    <td>Deploy</td>
    <td>Documentação</td>
  </tr>
</table>

Neste exemplo, cada dia da semana é o cabeçalho da sua linha de atividades.

A estrutura completa comentada

<table>

  <!-- Linha 1: cabeçalhos das colunas -->
  <tr>
    <th>Linguagem</th>       <!-- cabeçalho da col. 1 -->
    <th>Criada em</th>       <!-- cabeçalho da col. 2 -->
    <th>Paradigma</th>       <!-- cabeçalho da col. 3 -->
    <th>Uso principal</th>   <!-- cabeçalho da col. 4 -->
  </tr>

  <!-- Linha 2: primeiro registro -->
  <tr>
    <td>JavaScript</td>
    <td>1995</td>
    <td>Multi-paradigma</td>
    <td>Web front-end e back-end</td>
  </tr>

  <!-- Linha 3: segundo registro -->
  <tr>
    <td>Python</td>
    <td>1991</td>
    <td>Multi-paradigma</td>
    <td>Ciência de dados e IA</td>
  </tr>

  <!-- Linha 4: terceiro registro -->
  <tr>
    <td>HTML</td>
    <td>1993</td>
    <td>Marcação</td>
    <td>Estrutura de páginas web</td>
  </tr>

  <!-- Linha 5: quarto registro -->
  <tr>
    <td>CSS</td>
    <td>1996</td>
    <td>Folha de estilos</td>
    <td>Aparência de páginas web</td>
  </tr>

</table>

Células vazias

Quando um dado não existe para uma determinada combinação de linha e coluna, use um <td> vazio ou com um traço para manter o alinhamento correto da tabela:

<table>
  <tr>
    <th>Produto</th>
    <th>Preço</th>
    <th>Desconto</th>
    <th>Observação</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>R$ 3.499,00</td>
    <td>10%</td>
    <td>Estoque limitado</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>R$ 89,90</td>
    <td>—</td>      <!-- sem desconto — traço indica ausência -->
    <td></td>       <!-- sem observação — célula vazia -->
  </tr>
</table>

⚠️ Nunca omita um <td> para "pular" uma célula — isso quebra o alinhamento das colunas. Se um dado não existe, a célula ainda deve estar presente — vazia, com traço ou com um texto como "N/A".

Colunas são implícitas

Diferente de planilhas, as colunas em HTML não são declaradas explicitamente. O número de colunas da tabela é determinado pelo <tr> com mais células:

<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>   <!-- 3 colunas definidas pelo cabeçalho -->
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>   <!-- deve ter o mesmo número de células -->
  </tr>
</table>

<!-- ❌ Linhas com número diferente de células
     causam desalinhamento visual -->
<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>    <!-- falta um td — a linha fica desalinhada -->
  </tr>
</table>

O atributo border: história e boas práticas

Você pode encontrar tabelas antigas com o atributo border no HTML:

<!-- ❌ Forma antiga — atributo border no HTML -->
<table border="1">
  ...
</table>

O atributo border foi deprecado no HTML5. A forma correta de adicionar bordas é via CSS:

<!-- ✅ Forma moderna — borda via CSS -->
<style>
  table, th, td {
    border: 1px solid #ccc;
    border-collapse: collapse;
  }
</style>

<table>
  ...
</table>

💡 border-collapse: collapse une as bordas adjacentes das células em uma só linha — sem ela, cada célula tem sua própria borda separada, criando um espaço duplo entre elas.

Tabela completa com CSS básico

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Tabela de linguagens</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 8px 12px;
      text-align: left;
    }

    th {
      background-color: #f0f0f0;
    }

    tr:nth-child(even) {
      background-color: #fafafa;
    }
  </style>
</head>
<body>

  <table>
    <tr>
      <th>Linguagem</th>
      <th>Criada em</th>
      <th>Paradigma</th>
      <th>Uso principal</th>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>1995</td>
      <td>Multi-paradigma</td>
      <td>Web front-end e back-end</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>1991</td>
      <td>Multi-paradigma</td>
      <td>Ciência de dados e IA</td>
    </tr>
    <tr>
      <td>HTML</td>
      <td>1993</td>
      <td>Marcação</td>
      <td>Estrutura de páginas web</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>1996</td>
      <td>Folha de estilos</td>
      <td>Aparência de páginas web</td>
    </tr>
  </table>

</body>
</html>

Resumindo

• <table> → contêiner da tabela inteira
• <tr> → table row — uma linha da tabela
• <td> → table data — célula de dado
• <th> → table header — célula de cabeçalho
• <th> pode ser cabeçalho de coluna ou de linha
• Nunca omita células para "pular" posições — use célula vazia ou com traço
• Colunas são implícitas — o número é determinado pela linha com mais células
• Bordas devem ser definidas com CSS — o atributo border foi deprecado no HTML5
• border-collapse: collapse une bordas adjacentes em uma linha só