Gerador de tabelas HTML

Como gerar uma tabela HTML

1. Preenche a grelha. Usa Adicionar linha, Adicionar coluna, Remover a última linha e Remover a última coluna, ou os botões × junto a cada linha e coluna. Nova tabela vazia recomeça com uma grelha em branco de 3 × 3.
2. Para reaproveitar dados existentes, cola CSV ou células copiadas do Excel, do LibreOffice ou do Google Sheets em Importar CSV ou dados de uma folha de cálculo, confirma o Separador e clica em Importar. Também podes colar um bloco de células de uma folha de cálculo diretamente numa célula qualquer da grelha.
3. Acrescenta uma Legenda e escolhe se A primeira linha é de cabeçalho e se A primeira coluna é de cabeçalho.
4. Em Estilos, escolhe Sem estilos, Classe CSS ou Estilos inline, e ajusta a Cor do contorno, o Fundo do cabeçalho e as Linhas alternadas se quiseres.
5. Confere a Pré-visualização e depois clica em Copiar HTML ou transfere o código como ficheiro .html.

Marcação de tabelas acessível

Uma tabela só é acessível quando os leitores de ecrã conseguem perceber que células são cabeçalhos e o que descrevem. Esta ferramenta escreve a estrutura recomendada pela norma HTML e pelas técnicas WCAG:

• <caption> dá um nome à tabela. Os leitores de ecrã anunciam-no ao entrar na tabela, e ajuda qualquer leitor a perceber o que está a ver. Mantém-na curta e descritiva.
• <thead> e <tbody> separam a linha de cabeçalho das linhas de dados. Os navegadores podem repetir o <thead> em todas as páginas impressas.
• <th scope="col"> marca cada cabeçalho de coluna e, com A primeira coluna é de cabeçalho, <th scope="row"> marca a primeira célula de cada linha. Quando quem usa um leitor de ecrã passa para uma célula de dados, os cabeçalhos correspondentes podem ser lidos em voz alta, por exemplo «Pro, Preço, $12».

Usa tabelas apenas para dados tabulares, nunca para a disposição (layout) da página. Evita células fundidas sempre que possível: grelhas simples, com uma linha de cabeçalho e, se for preciso, uma coluna de cabeçalho, são as mais fáceis de ler com tecnologias de apoio.

Opções de estilo

• Sem estilos escreve marcação simples que herda os estilos de tabela do teu site. É a melhor escolha para um CMS ou um site com um sistema de design.
• Classe CSS acrescenta class="…" à <table> e mostra um bloco de CSS correspondente para colares na tua folha de estilos. O Nome da classe é limpo para conter só letras, algarismos, hífenes e sublinhados, para ser sempre um seletor válido.
• Estilos inline põe atributos style em todos os elementos. É verboso, mas é o que os emails em HTML precisam, já que muitos clientes de email ignoram os blocos <style>. O botão Transferir acrescenta o CSS num elemento <style> quando usas uma classe.

Só as cores hexadecimais verdadeiras escolhidas nos seletores de cor são escritas no CSS, por isso nada de inesperado pode acabar nos teus estilos.

Escape e segurança

Todas as células são escapadas: <, > e & passam a <, > e &, por isso texto como <b> ou a < b aparece exatamente como foi escrito, em vez de ser interpretado como marcação. As quebras de linha nas células importadas passam a <br>. A pré-visualização é construída apenas a partir desta marcação escapada e passa por um sanitizador que só deixa ficar elementos de tabela, por isso um script colado nunca pode ser executado.