Pular para o conteúdo

Tabela sem Table, só com CSS

Dica publicada em Javascript / CSS3
Flavio dos Santos acharnobairro
Hits: 8.373 Categoria: Javascript Subcategoria: CSS3
  • Indicar
  • Impressora
  • Denunciar
O Viva o Linux depende da receita de anúncios para se manter. Ative os cookies aqui para nos patrocinar.
Não conseguimos carregar os anúncios. Se usa bloqueador, considere liberar o Viva o Linux para nos patrocinar.

Tabela sem Table, só com CSS

Usar CSS nos dá maior controle de tamanhos, formatos, curvas, margens, fontes, cores etc mas tem limitações em se fazer tabelas.

Não sou programador, leio e aprendo com as pessoas de boa vontade que contribuem com ideias e explicações. Junto instruções e tento resolver problemas para meu site www.acharnobairro.com.br, quando está funcionando certo, coloco no ar.

Resolvi fazer uma tabela só com CSS, juntei instruções, testei no IE8, Firefox, Chromium (versão 25.0.1364.160 Ubuntu 10.04 (25.0.1364.160-0ubuntu0.10.04.1)).

Coloquei todas as instruções no mesmo arquivo para facilitar para os "aprendizes" (como eu) e para os mais avançados, podem colocar o CSS em arquivo externo.

Não é uma programação perfeita, pode ser melhorada e refeita de várias outras formas... Quem puder melhora-la e me ajudar a implementar para meu site, agradeço.

Copie e cole em editor preferencial, rode e .... bom uso.
Linux: Tabela sem Table, só com CSS
Tabela sem Table, só com CSS - código fonte:




Tabela só com CSS









Tabela sem TABLE, só com CSS.

O Viva o Linux depende da receita de anúncios para se manter. Ative os cookies aqui para nos patrocinar.
Não conseguimos carregar os anúncios. Se usa bloqueador, considere liberar o Viva o Linux para nos patrocinar.

 


 





  

    

coluna 1


    

  

Linha 1


  


  

  

coluna 2


  


  

    

coluna 3


  


  

  

    

linha 2

   Acrescentando mais linhas

   a ponto de expandir a célula da coluna 1,

   ela passa a ser referencia de tamanho para as colunas da direita.
  


  

  

    

linha 2

   As linhas

   das molduras

   acompanham

   o tamanho da célula.

  


  



  

Linha 2

   A quantidade de linhas nas outras colunas

   deve ser igual a da primeira coluna

   para que todas as células tenham

   o mesmo tamanho.
  


  

  
  
  
  

  

Linha 3


  

  
  

  


linha 4


  


  
  
  

    

linha 5


  




 




O Viva o Linux depende da receita de anúncios para se manter. Ative os cookies aqui para nos patrocinar.
Não conseguimos carregar os anúncios. Se usa bloqueador, considere liberar o Viva o Linux para nos patrocinar.

Tabela sem Table, só com CSS

Laptop sem wi-fi no roteador SAGEMCOM da Vivo Fibra [Resolvido]

PHPMailer - Validação de campos, e-mail e domínio para formulário de contato e envio

Como personalizar as fontes do teu site com CSS3

Pingendo - Crie um layout para o teu site em 5 minutos!

Tamanho das Fontes

Usando o VLC Mozilla Plugin em página HTML

Atualizando conteúdo dinamicamente com jQuery

Nenhum comentário foi encontrado.

Contribuir com comentário

Entre na sua conta para comentar.