Tabela sem Table, só com CSS
Publicado por Flavio dos Santos em 09/01/2017
[ Hits: 5.216 ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tabela só com CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- Estilos para IE6 e IE7 --> <!--[if lte IE 7]> <style> #tabela { overflow: auto; background: url(imagens/fundo_colunas.png) repeat-y; /* colunas falsas */ } #menu, #conteudo, #sidebar { float: left; /* como display: table não funciona nestes navegadores, uma alternativa é usar float */ } #l1c1 { width: 660px; /* temos que fixar o tamanho desta coluna, assim como #menu e #sidebar */ } #menu li { display: inline; /* resolve o problema de line-height que acontece em listas no IE6 */ } /* clearfix IE7 */ *:first-child+html .grupo { min-height: 1px; } /* clearfix IE6 */ * html .grupo { height: 1%; } </style> <![endif]--> <style type="text/css"> * { margin: 0; padding: 0; } #tabela { width: 80%; overflow: auto; margin: auto; border: 2px solid #FF0000; -moz-border-radius:5px; /* canto arredondado no Firefox */ -webkit-border-radius:5px; /* canto arredondado no Google Chrome e Safari: -webkit- */ border-radius:5px; /* para quando o W3C valide os comandos CSS3. Funciona no IE9 */ } #l1c1 { /* l= linha 1 c= coluna 1 */ width: 200px; height:auto; position: relative; float: left; border-top: 0px solid #339900; border-right: 2px solid #339900; border-bottom: 2px solid #339900; border-left: 0px solid #339900; } #l1c2 { /* l= linha 1 c= coluna 2 */ width: 350px; height:auto; position: relative; float: left; border-top: 0px solid #339900; border-right: 2px solid #339900; border-bottom: 2px solid #339900; border-left: 0px solid #339900; } .margem { margin: 30px; } /* .limpa {clear: both;} */ </style> </head> <body> <br> <p align="center"> <b>Tabela sem TABLE, só com CSS. </b></p> <p> </p> <p> </p> <div id="tabela"> <div id="l1c1"> <p align="center"><b>coluna 1</b></p> <br> <p align="center">Linha 1</p> </div> <div id="l1c2"> <p align="center"><b>coluna 2</b></p> </div> <div id="l1c2"> <p align="center"><b>coluna 3</b></p> </div> <span class="limpa"></span> <div id="l1c1" > <p class="margem"><b>linha 2</b><br> Acrescentando mais linhas <br> a ponto de expandir a célula da coluna 1, <br> ela passa a ser referencia de tamanho para as colunas da direita. </p> </div> <div id="l1c2" > <p class="margem"><b>linha 2</b><br> As linhas<br> das molduras <br> acompanham <br> o tamanho da célula.<br> </p> </div> <div id="l1c2"> <p class="margem"> <b> Linha 2 </b> <br> A quantidade de linhas nas outras colunas <br> deve ser igual a da primeira coluna <br> para que todas as células tenham <br> o mesmo tamanho. </p> </div> <span class="limpa"></span> <div id="l1c1"> <p class="margem"> <b> Linha 3 </b></p> </div> <span class="limpa"></span> <div id="l1c1"> <br> <p class="margem">linha 4</p> </div> <span class="limpa"></span> <div id="l1c1"> <p class="margem">linha 5</p> </div> </div> <!-- div TABELA --> <p> </p> </body> </html>
PHPMailer - Validação de campos, e-mail e domínio para formulário de contato e envio
Laptop sem wi-fi no roteador SAGEMCOM da Vivo Fibra [Resolvido]
Upgrade de Debian Lenny para Debian Squeeze
BURG: Uma interface para o Grub
Instalando VMware no Ubuntu Gutsy 7.10
Instalação do Ocomon - 2.0-RC6.1 - Helpdesk de suporte e controle de inventário
Nenhum coment�rio foi encontrado.
Aprenda a Gerenciar Permissões de Arquivos no Linux
Como transformar um áudio em vídeo com efeito de forma de onda (wave form)
Como aprovar Pull Requests em seu repositório Github via linha de comando
Visualizar arquivos em formato markdown (ex.: README.md) pelo terminal
Dando - teoricamente - um gás no Gnome-Shell do Arch Linux
Como instalar o Google Cloud CLI no Ubuntu/Debian
Mantenha seu Sistema Leve e Rápido com a Limpeza do APT!
Procurando vídeos de YouTube pelo terminal e assistindo via mpv (2025)
Alguém já testou plataformas de investimento voltadas para a América d... (0)
Zorin OS - Virtual Box não consigo abrir maquinas virtuais (6)
Iinstalar o Scanner Kodak i940 no Linux Mint 19/20? (3)