Criar uma tabela HTML com CSS

Ajuste tamanho, cores e realce: a prévia e o código HTML/CSS para copiar atualizam na hora.

Funciona localmente no seu navegador

Como gerar uma tabela HTML com o CSS

Escolha o número de colunas e linhas, um tema de cores e o efeito ao passar o cursor: a prévia e o código HTML/CSS para copiar são atualizados na hora.

A tabela é gerada no navegador: nada é enviado, a prévia e o código são a mesma marcação e o código copiado não traz marca d'água nem link externo.

  1. Defina Colunas (1–50) e Linhas (1–100). A contagem de linhas inclui a linha de cabeçalho: 7 linhas geram um cabeçalho e seis linhas de células.
  2. Escolha o estilo: Azul, Verde, Cinza, Laranja, Marrom, Preto ou Sem cor. Ao escolher Sem cor, o design muda automaticamente para Sem estilo.
  3. Escolha o design: linhas alternadas, cabeçalho colorido com linhas brancas, ou sem estilo.
  4. Decida se as células mostram texto de exemplo (Linha:1 Célula:1) ou ficam vazias, e se as linhas devem ser realçadas ao passar o cursor.
  5. Clique em Copiar HTML para enviar o código à área de transferência e cole-o na sua página.

A marcação gerada, seus limites e o realce ao passar o cursor

O que o código gerado contém

A caixa traz um bloco <style> seguido da tabela: um <table class="tftable" border="1"> com a linha de cabeçalho em <thead> e as linhas de células em <tbody>. O CSS afeta apenas essa classe, então duas tabelas geradas aqui podem ficar na mesma página sem ids únicos.

A prévia abaixo usa exatamente a mesma marcação: o que você vê é o que o código copiado produz. Os textos de exemplo (Cabeçalho 1, Linha:1 Célula:1) são escritos no idioma da página, e o resultado não traz marca d'água nem links externos.

Limites de tamanho e valores inválidos

As colunas vão de 1 a 50 e as linhas de 1 a 100. Enquanto um campo estiver vazio ou fora desse intervalo, a linha de status acima do código explica o intervalo e a tabela na tela mantém o último tamanho válido em vez de ficar vazia.

Ao sair do campo, o valor é ajustado ao limite mais próximo: 999 vira 50 e um campo vazio volta ao último valor válido. Letras são descartadas durante a digitação, então 12abc vira 12.

Realce de linhas, cores e cópia

O realce de linhas é gerado como regra CSS (table.tftable tbody tr:hover) em vez de script, então a tabela colada não precisa de JavaScript nem de um id próprio. As cores vêm de seis paletas fixas; o design Sem estilo deixa apenas o atributo border.

Copiar HTML copia o conteúdo atual da caixa. O código vai somente para a área de transferência: a página não envia as suas configurações a nenhum servidor.

Ferramentas recentes: