Tabela sem Table com CSS
Fiz esta tabela sem usar Table (do html), só com css, mas não é prática para preencher as células, usável para poucas informações, elas não se auto-ajustam (height 100px). Testei no IE8 (xp), FF e Chrome (ubuntu 10). Quem puder melhora-la ... é uma idéia inicial.
<html>
<head>
<title>Tabela só com CSS</title>margin-left: auto;
margin-right: auto;
}body {
overflow:auto;
text-align: center;
}
#tabela {
width: 906px;
overflow: hidden;
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 {
width: 200px;
height: 100px;
position: relative;
float: left;
border-top: 0px solid #339900;
border-right: 2px solid #339900;
border-bottom: 2px solid #339900;
border-left: 0px solid #339900;
overflow: auto;
}
#l1c2 {
width: 350px;
height: 100px;
position: relative;
float: left;
border-top: 0px solid #339900;
border-right: 2px solid #339900;
border-bottom: 2px solid #339900;
border-left: 0px solid #339900;
overflow: auto;
}.margem { margin: 30px; }
.limpa {clear: both;}
</style>
</head>
<body>
<br>
<p> Tabela sem TABLE, só com CSS.</p>
<div id="tabela">
<div id="l1c1">
<p style="text-align: center;"><b><br>
coluna 1</b></p>
<br>
</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>
<div id="l1c2">
<p class="margem"> <b> Coluna 2 </b></p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 3 </b></p>
</div>
<span class="limpa"></span>
<div id="l1c1"> <br>
<p class="margem">linha 4</p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 2 </b></p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 3 </b></p>
</div>
<span class="limpa"></span>
<div id="l1c1">
<p class="margem">linha 5</p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 2 </b></p>
</div>
<div id="l1c2">
<p class="margem"> <b> Coluna 3 </b></p>
</div>
<span class="limpa"></span>
<p align="center"><br>
Todas as tabelas estão com as pontas nas bordas. <br>
<br>A tabela CSS está centrada na página do navegador IE8,
Firefox e no Chrome. <br>
</p>
</div>
</body>
</html>Discussão (2)
Carregando comentários...