Tabela comparativa para site
Escreva as colunas e as linhas. Use sim e não (ou s e n) para virar ✓ e ✗; qualquer outro texto aparece como está.
Como usarCompare planos e produtos lado a lado
Tabela comparativa para site: para que serve
Uma tabela comparativa ajuda o cliente a decidir entre planos, produtos ou serviços sem precisar perguntar. Escreva as colunas e as linhas, usando sim e não para virar ✓ e ✗, e escolha uma coluna para destacar com borda e selo.
No celular a tabela rola para o lado com a primeira coluna fixa. O HTML usa table com th e scope e um texto escondido de Sim e Não junto dos símbolos, para o leitor de tela ler cada célula com o cabeçalho certo.
Como usar
- Escreva as colunas separadas por barra.
- Escreva cada linha com o valor de cada coluna.
- Escolha o destaque e copie o código.
Quando usar
- Comparar planos de um serviço.
- Comparar modelos de produto.
- Mostrar diferenças para a concorrência.
Perguntas frequentes
Como fica no celular?
A tabela rola para o lado dentro de uma caixa, e a primeira coluna, com o nome de cada item, fica fixa enquanto se rola. Assim a pessoa nunca perde de vista o que está comparando.
Os símbolos ✓ e ✗ são acessíveis?
Cada símbolo vem com um texto escondido (Sim ou Não) para o leitor de tela, e a tabela usa th com scope nas linhas e colunas, então cada célula é anunciada com o cabeçalho certo.
Para que serve a coluna em destaque?
Para chamar a atenção para a opção que você recomenda, com uma borda e um selo. Use em uma coluna só; destacar várias anula o efeito.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.