Gerador de tabelas HTML

Crie tabelas HTML com um editor visual e copie o código instantaneamente.

LinhasColunas Linha de cabeçalho Borda Linhas listradasPreenchimento

Saída HTML

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

Sobre esta ferramenta

O gerador de tabelas HTML permite configurar linhas e colunas, editar células diretamente e obter código HTML de tabela pronto para uso. Você pode configurar visualmente linhas de cabeçalho, bordas, linhas listradas e preenchimento de células.

O HTML gerado segue marcação semântica com estrutura thead e tbody adequada, o que é melhor para acessibilidade e leitores de tela. O código é atualizado em tempo real conforme você edita.

Como usar

Defina o número de linhas e colunas.
Alterne linha de cabeçalho, borda e linhas listradas com caixas de seleção.
Ajuste o valor do preenchimento de célula.
Clique em qualquer célula para digitar seu conteúdo diretamente.
Copie o código em "Saída HTML" e use em seu projeto.

Casos de uso

Ótimo para tabelas de comparação de dados, tabelas de preços, cronogramas, tabelas de especificações de produtos e qualquer informação exibida em formato tabular em uma página web.

Perguntas frequentes

Posso estilizar a tabela sem CSS? — Sim. O HTML gerado inclui atributos border e cellpadding, então o estilo básico é aplicado sem nenhum CSS.
Posso adicionar colspan ou rowspan? — Esta ferramenta gera uma estrutura de tabela básica. Edite o código gerado diretamente para adicionar atributos colspan/rowspan.
Como faço a tabela responsiva? — Envolva a tabela em um div com overflow-x: auto, ou use media queries CSS para permitir rolagem horizontal em telas pequenas.