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

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

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.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de EditorConfig

Monte um .editorconfig com as suas regras de indentação, fim de linha e charset e acrescente a seção correta para cada linguagem do seu repositório: Python, Go, YAML, Makefile e mais.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Ferramenta disponível em outros idiomas