EspañolTabela de preços para site (planos em HTML e CSS)
Escreva os planos no quadro: uma linha com nome e preços, e embaixo os itens. Marque o destaque com * no nome.
Como usarPlanos lado a lado, com o melhor em destaque
Disponível em: 
Tabela de preços para site (planos em HTML e CSS): para que serve
Uma seção de planos bem montada ajuda o visitante a comparar e escolher. Escreva cada plano com nome, preço mensal, preço anual, botão e os itens incluídos (+) e não incluídos (-), e marque o destaque com um asterisco.
O código sai responsivo, com o plano em destaque levemente elevado e com selo, ícones de incluído e não incluído (com texto para leitores de tela) e uma chave mensal/anual feita só com CSS e botões de opção. Ajuste a cor, a moeda e o texto do selo.
Como usar
- Escreva os planos e os itens.
- Marque o plano em destaque e ajuste as cores.
- Copie o código.
Quando usar
- Planos de assinatura.
- Pacotes de serviços.
- Planos de academia ou curso.
Perguntas frequentes
Como escrever os planos?
Cada plano começa com uma linha 'Nome | preço mensal | preço anual | texto do botão | link'. As linhas seguintes, começando com + ou -, são os itens incluídos e não incluídos. Deixe uma linha em branco entre os planos. Coloque * antes do nome do plano que deve ficar em destaque.
Como funciona a chave mensal/anual?
Se você preencher o preço anual, aparece uma chave para o visitante alternar. Ela funciona com CSS e botões de opção, sem JavaScript, e os dois preços ficam no HTML.
Quantos planos mostrar?
Três é o número mais comum: o do meio, em destaque, costuma ser o mais escolhido. Com mais de quatro, a comparação fica difícil; nesse caso, uma tabela comparativa funciona melhor.
É 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.