Tabela sem Table, só com CSS
Publicado por Flavio dos Santos em 09/01/2017
[ Hits: 4.915 ]
<!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
Java Virtual Machine e seus conceitos (para iniciantes)
Projeto LINORG-USP: Baixe Linux no Estado de São Paulo
Como desativar o GRUB do Ubuntu
Como fazer um alias para uma placa de rede
Publicação em seu site ou blog através de mensagens SMS
Nenhum comentário foi encontrado.
Crie alias para as tarefas que possuam longas linhas de comando - bash e zsh
Criando um gateway de internet com o Debian
Configuração básica do Conky para mostrar informações sobre a sua máquina no Desktop
Aprenda a criar músicas com Inteligência Artificial usando Suno AI
Entendendo o que é URI, URL, URN e conhecendo as diferenças entre POST e GET
Instalando Navegador Firefox no Debian 12
Bloqueando propagandas no Youtube e outros sites com o uBlocker Origin
Criando um Pen Drive Bootável no Linux
Sistema da Coréia do Norte - Red Star OS (40)
Ajuda com instalação do archlinux no VMbox (0)
Não existe o slackbuild do bash no repositório slackbuild? (4)