Htmly
Código & Validação

Gerador de Tabela HTML

Crie tabelas HTML responsivas visualmente. Edite como planilha e copie o código HTML e CSS pronto.

0 usos
3
3
#d1d5db
Editor
Coluna 1Coluna 2Coluna 3
Preview
Coluna 1Coluna 2Coluna 3
HTML gerado
<div style="overflow-x: auto;">
  <table style="width: 100%; border-collapse: collapse; border: 1px solid #d1d5db;">
    <thead>
      <tr style="background-color: #f3f4f6;">
        <th style="padding: 8px 16px; text-align: left; font-weight: 600; border: 1px solid #d1d5db;">Coluna 1</th>
        <th style="padding: 8px 16px; text-align: left; font-weight: 600; border: 1px solid #d1d5db;">Coluna 2</th>
        <th style="padding: 8px 16px; text-align: left; font-weight: 600; border: 1px solid #d1d5db;">Coluna 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding: 8px 16px; border: 1px solid #d1d5db;"></td>
        <td style="padding: 8px 16px; border: 1px solid #d1d5db;"></td>
        <td style="padding: 8px 16px; border: 1px solid #d1d5db;"></td>
      </tr>
      <tr>
        <td style="padding: 8px 16px; border: 1px solid #d1d5db;"></td>
        <td style="padding: 8px 16px; border: 1px solid #d1d5db;"></td>
        <td style="padding: 8px 16px; border: 1px solid #d1d5db;"></td>
      </tr>
    </tbody>
  </table>
</div>

Como usar o Gerador de Tabela HTML

  1. 1

    Defina o tamanho da tabela

    Use os controles de linhas e colunas para definir as dimensões da tabela. Você pode ter de 2 a 20 linhas e de 2 a 10 colunas.

  2. 2

    Edite as células

    Clique em qualquer célula para editar o conteúdo. A primeira linha funciona como cabeçalho (th) com texto em negrito.

  3. 3

    Copie o HTML gerado

    Escolha entre HTML com estilos inline ou classes Tailwind CSS e clique em "Copiar HTML" para usar no seu projeto.

Como criar tabelas HTML responsivas?

Tabelas HTML são essenciais para exibir dados estruturados em páginas web, como preços, comparações, horários e estatísticas. Uma tabela bem construída usa a tag <table> com <thead> para o cabeçalho e <tbody> para o corpo dos dados.

Para tornar uma tabela responsiva, a técnica mais comum é envolver a tabela em um container com overflow-x: auto. Isso permite que o usuário role horizontalmente em telas pequenas sem quebrar o layout da página.

Além da responsividade, é importante considerar acessibilidade: use <th> para células de cabeçalho (não apenas negrito), adicione scope="col" nos cabeçalhos e considere usar caption para descrever o conteúdo da tabela. Tabelas listradas (zebra striping) melhoram a legibilidade alternando cores de fundo entre linhas pares e ímpares. Esta ferramenta gera tabelas HTML semanticamente corretas, com todas essas boas práticas aplicadas automaticamente.

Perguntas frequentes

Posso usar a tabela gerada em qualquer site?
Sim! O HTML gerado é padrão e funciona em qualquer site, CMS (WordPress, Wix, etc.), email marketing ou aplicação web. Basta copiar e colar o código.
Qual a diferença entre estilos inline e Tailwind CSS?
Estilos inline (style="...") funcionam em qualquer lugar, inclusive em emails. Classes Tailwind CSS são mais limpas e reutilizáveis, mas exigem que o Tailwind esteja configurado no seu projeto.
Como deixar a tabela responsiva em celulares?
Ative a opção "Tabela responsiva" para envolver a tabela em um div com overflow-x: auto. Isso permite rolagem horizontal em telas pequenas sem quebrar o layout.
Esta ferramenta é gratuita?
Sim, o Gerador de Tabela HTML é 100% gratuito, sem limite de uso e sem necessidade de cadastro. Todo o processamento acontece no seu navegador.

Publique seu site HTML em 30 segundos

Publicar agora