Gerador de tabela HTML acessível: CSV para HTML com legenda | We.Inc
Cole um CSV ou comece por uma tabela de preços ou de horários de funcionamento. Receba uma tabela HTML de verdade com legenda, células de cabeçalho e scope, com escape seguro, mais um pequeno bloco de CSS responsivo para copiar.
Cole linhas de uma planilha ou de um CSV, ou comece por um modelo de tabela de preços de serviços ou de horários de funcionamento. Você recebe uma tabela HTML correta, com legenda, células de cabeçalho e atributos scope que os leitores de tela usam, mais um bloco curto de CSS que a mantém legível no celular. Todo valor passa por escape, então um texto colado não consegue quebrar a sua página. Tudo roda no seu navegador. Nada do que você digita vai para a We.Inc ou para qualquer outra pessoa, e tudo some quando você fecha a aba.
Escolha um modelo ou cole suas próprias linhas. Vírgulas, tabulações (de uma planilha) e ponto e vírgula funcionam, e valores entre aspas com vírgulas dentro ficam juntos.
Escolha se a primeira linha tem os títulos das colunas e se a primeira coluna identifica cada linha. Eles viram células th com atributos scope.
Escreva uma legenda. Ela dá nome à tabela para quem usa leitor de tela e aparece acima dela para todos.
Escolha um estilo e veja a prévia em largura de desktop e de celular. Em telas pequenas, tabelas largas rolam para o lado dentro da própria caixa em vez de ficarem espremidas.
Copie o HTML e o CSS, ou baixe os dois em um só arquivo.
Use tabela só para dados com linhas e colunas, como preços ou horários. Para o layout da página, use CSS.
Mantenha os títulos curtos. Eles se repetem em cada anúncio do leitor de tela.
Coloque as unidades no título (Preço, USD) em vez de em cada célula.
Não mescle células se não for necessário. Células mescladas são difíceis de acompanhar com leitor de tela.
Confira sua tabela na largura de celular. Se precisar de mais de uma rolagem lateral, pense em dividi-la.
Perguntas frequentes
O que torna uma tabela HTML acessível?
Uma legenda que dá nome a ela, células de cabeçalho th para os títulos de colunas e linhas, e atributos scope que dizem se um cabeçalho pertence a uma coluna ou a uma linha. Os leitores de tela usam isso para anunciar a qual título cada valor pertence. Este gerador adiciona os três.
Por que não montar a tabela com divs?
Uma grade de divs pode parecer uma tabela, mas as tecnologias assistivas não conseguem saber qual célula pertence a qual título. Um elemento table de verdade carrega esse significado de graça.
Como a tabela responsiva funciona?
A tabela fica em uma caixa que rola para o lado em telas estreitas. A caixa pode receber foco e é identificada pela legenda, então quem usa teclado também consegue rolá-la.
Meus dados passam por escape?
Sim. E comercial, sinais de menor e maior e aspas nas suas células são convertidos em entidades HTML, então uma célula que contém <script> aparece como texto em vez de ser executada.
Posso colar direto do Excel ou do Google Planilhas?
Sim. As células copiadas chegam separadas por tabulações, que a ferramenta detecta automaticamente.
É grátis?
Sim, sem cadastro. Roda no seu navegador.
Tabelas de preços e horários de funcionamento são tabelas
A maioria dos sites de pequenas empresas tem pelo menos duas tabelas: quanto as coisas custam e quando você está aberto. As duas são dados tabulares de verdade, então devem ser marcadas como tabelas, com cada preço ligado ao seu serviço e cada horário ligado ao seu dia.
Os modelos daqui já começam com esses dois formatos. Troque as linhas de exemplo pelas suas antes de publicar; elas são ilustrativas, não preços reais.