Softonic

Gerador de Tabelas HTML

Etapa 1 / 4

São aceitos campos CSV entre aspas, tabulações de planilhas, linhas separadas por ponto e vírgula e divisores de tabela Markdown. Máximo: 50 linhas, 20 colunas e 1.000 caracteres por célula.

Dados da tabela
Dados da tabela

Escrever <table>, <thead>, <tbody> e <tr> manualmente para um conjunto de dados de dez linhas é tedioso. Cole dados de tabela separados por tabulação, CSV ou Markdown e este gerador produz HTML bem estruturado com tags semânticas, <caption> opcional, atributos de escopo adequados e uma escolha de listras zebra, bordas ou classes Tailwind, pronto para ser inserido em um artigo ou painel.

Como construir uma tabela HTML

  1. 1

    Cole seus dados

    TSV (copie de uma planilha), CSV ou sintaxe de tabela Markdown são todos analisados corretamente.

  2. 2

    Escolha opções da tabela

    Linha de cabeçalho, legenda, listras zebra, linhas compactas ou espaçosas.

  3. 3

    Escolha o modo de estilo

    HTML simples, estilos inline, classes Bootstrap ou classes Tailwind.

  4. 4

    Copie a marcação

    A saída é HTML válido e semântico, não uma grade `<div>` fingindo ser uma tabela.

Estrutura de tabela semântica

Tabelas construídas com tags apropriadas são acessíveis, amigáveis para leitores de tela e fáceis de estilizar. O gerador produz esta estrutura:

<table>
  <caption>Números de vendas do Q1</caption>
  <thead>
    <tr>
      <th scope="col">Região</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">UE</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Elementos e seus papéis

Elemento Propósito
<caption> Resumo da tabela, lido primeiro por leitores de tela
<thead> Cabeçalhos de coluna, renderizados separadamente do corpo
<tbody> Linhas de dados
<tfoot> Totais, notas de rodapé, colocados na parte inferior independentemente da posição do código
<th scope="col"> Cabeçalho de coluna
<th scope="row"> Cabeçalho de linha (por exemplo, a primeira célula de cada linha)
<td> Célula de dados

Padrões responsivos

  • Rolagem horizontal: envolva a tabela em <div style="overflow-x:auto"> para que visualizações estreitas possam rolar em vez de quebrar o layout.
  • Empilhar em dispositivos móveis: repita cabeçalhos como atributos data-label e inverta linhas para cartões verticais via CSS, bom para conjuntos de dados pequenos.
  • Refluxo com grid: tabelas complexas podem ser reconstruídas com CSS Grid, mas perdem a navegação nativa por teclado; só vale a pena para painéis.

Lista de verificação de acessibilidade

  • Cada <th> tem um atributo scope.
  • Spans complexos usam headers="..." para vincular células de dados a IDs de cabeçalho.
  • Uma legenda resume o propósito da tabela.
  • Não use tabelas para layout visual, use CSS Grid ou Flexbox.

Perguntas frequentes

Sim. Dados da área de transferência da planilha são TSV (separados por tabulação), que o gerador analisa nativamente. Linhas se tornam <tr> e células separadas por tabulação se tornam <td>.

Classes CSS para qualquer coisa que você controle; estilos inline para e-mails (onde folhas de estilo externas são frequentemente bloqueadas). Modos Bootstrap e Tailwind produzem marcação de classe pronta para uso para esses frameworks.

Não automaticamente. Cada valor importado vira uma célula. Depois de copiar o HTML, adicione colspan ou rowspan manualmente e revise as associações dos cabeçalhos, pois células mescladas podem exigir os atributos id e headers.

Sim, atributos scope="col" e scope="row" são adicionados, e uma <caption> é produzida quando você fornece uma. Verifique com um leitor de tela ou a extensão axe DevTools para tabelas complexas.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Ofuscador de JavaScript

Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.

Ferramenta disponível em outros idiomas