Tabela sem Table, só com CSS
Publicado por Flavio dos Santos em 09/01/2017
[ Hits: 4.509 ]
<!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]
Vídeo aula da planilha eletrônica Gnumeric
lsof - Pequeno guia de referência
Como instalar programas Deb no Ubuntu :: Vídeo-aula
Acessando AP Wireless Zinwell G200 via Putty
Utilizando o Wiimote no Linux? Yes Wiican!
Nenhum comentário foi encontrado.
Subindo o Zabbix e Grafana no Podman com Pod
Habilitar a aceleração por hardware AMD AMF no OBS
Roubando bits (parte 2): como resolver questões rapidamente sem calculadora
Usando Linux para operar plataformas de análise gráfica na Bovespa (B3)
URGENTE: pacote com versão maliciosa do ctx em Python estava presente no PyPI
Instalando Google Chrome no Ubuntu 22.04 LTS
Bodhi Linux: melhor distro Linux para Atom N455
Não consigo fazer Update Ubuntun 22.04 (1)
Impressora compartilhada por um servidor Windows não funciona no Ubunt... (0)
Como pular linha no terminal linux sem executar comando (2)
Não consigo espelhar meu monitor em um Projetor Multimídia - UBUNTU 22... (0)