Softonic

Gerador de Tabelas HTML

Os dados colados, as células e o HTML gerado permanecem neste navegador. As etapas usam o armazenamento de sessão desta aba; os valores não são enviados pelo nossos servidores nem colocados na URL.

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.

Gerador de Paletas de Cores

Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.

Simplificador de Álgebra Booleana

Simplifique expressões booleanas usando mapas de Karnaugh e o algoritmo de Quine-McCluskey. Mostra cada passo de minimização e uma forma final SOP/POS.

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa. Lida com codificações de 7 bits e 8 bits.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Conversor de BBCode para HTML

Converta BBCode (marcação de fórum) para HTML limpo. Lida com tags de formatação, listas, citações, código, imagens, links e tabelas.