Tabela sem Table, só com CSS
Publicado por Flavio dos Santos em 09/01/2017
[ Hits: 5.260 ]
<!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]
Instalando o Xen facilmente no Debian Squeeze
Enviando alertas de e-mail pelo Zabbix usando Gmail, CentOS e Postfix
Instalando MySQL 8 no CentOS 7
Nenhum coment�rio foi encontrado.
Conciliando o uso da ZRAM e SWAP em disco na sua máquina
Servidor de Backup com Ubuntu Server 24.04 LTS, RAID e Duplicati (Dell PowerEdge T420)
Visualizar câmeras IP ONVIF no Linux sem necessidade de instalar aplicativos
Realizar overclock no Miyoo Mini (plus ou normal)
Otimização de memória para máquinas modestas
Google Crhome não abre desde que eu atualizei pelo "program... (13)
Dúvidas sobre a originalidade de conteúdos online (6)
Monitoramento pfsense com zabbix (0)
como instalar o amdgpu no linux manjaro no linux, pelo o repo e comand... (4)