Tabela sem Table, só com CSS
Publicado por Flavio dos Santos em 09/01/2017
[ Hits: 5.254 ]
<!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>
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
OpenSUSE Education Li-f-e 11.3 - Excelente distribuição para uso educacional, técnico e científico
Convertendo Vídeos de formato .TRP para outros formatos
Criando animações com Giftedmotion
Instalando DOSEMU no Fedora Core
Nenhum coment�rio foi encontrado.
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
Atualizar Debian Online de uma Versão para outra
Dica para encontrar diversos jogos Indies criativos
Instalando Discord no Debian 13
Instalar driver Nvidia no Debian 13
Redimensionando, espelhando, convertendo e rotacionando imagens com script
Software livre - será que eu estou tão errado assim? (17)
Dificuldade com Ocs 2.12.3 no Debian 13 com Apache2 - Can't load ... (4)
paginação dos favoritos não funciona no vivaolinux[BU... (4)