Gerador de Tabela HTML

Gere código de tabela HTML online. Defina linhas, colunas, cabeçalho e linhas zebradas, edite as células e copie o código com pré-visualização.

Gerador de Tabela HTML online

Defina o número de linhas e colunas, escolha se quer cabeçalho e linhas zebradas, edite o conteúdo das células (opcional) e copie o código HTML pronto, com pré-visualização ao vivo.

Estrutura de uma tabela HTML

Uma tabela HTML bem estruturada usa as tags semânticas corretas:

<table>
  <thead>
    <tr>
      <th>Coluna 1</th>
      <th>Coluna 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Célula 1-1</td>
      <td>Célula 1-2</td>
    </tr>
  </tbody>
</table>

As tags de tabela

TagFunção
<table>Container da tabela
<thead>Agrupa a linha de cabeçalho
<tbody>Agrupa as linhas de dados
<tr>Uma linha (table row)
<th>Célula de cabeçalho (negrito, centralizada)
<td>Célula de dados (table data)

Linhas zebradas com CSS

O efeito “zebra” (linhas alternadas com cores diferentes) melhora a legibilidade de tabelas grandes. É feito com o seletor :nth-child(even):

table tbody tr:nth-child(even) {
  background: #f9f9f9;
}

Ative a opção “Linhas zebradas” para incluir o CSS automaticamente no código gerado.

Boas práticas de acessibilidade

  • Use <th> para cabeçalhos — leitores de tela anunciam a relação entre cabeçalho e célula.
  • Adicione scope="col" ou scope="row" em tabelas complexas.
  • Use <caption> para descrever o conteúdo da tabela.
  • Evite tabelas para layout — use CSS Grid ou Flexbox para isso.

Perguntas frequentes

Preciso sempre usar thead e tbody?

Não são obrigatórios, mas são recomendados. Eles deixam a estrutura semântica clara, facilitam a estilização com CSS e melhoram a acessibilidade.

Como deixo a tabela responsiva?

Envolva a tabela em um container com overflow-x: auto para permitir rolagem horizontal em telas pequenas, ou use CSS para reorganizar as células em telas estreitas.

O código gerado é seguro para colar no meu site?

Sim. O conteúdo das células que você digita é escapado (caracteres como <, > e & são convertidos em entidades HTML), evitando que markup acidental quebre a tabela.

Posso editar o conteúdo das células?

Sim. Marque a opção “Editar conteúdo das células” para preencher cada célula em uma grade. Sem editar, são gerados placeholders como “Célula 1-1”.

Veja também