tabela Tabela sem Table com CSS

Acharnobairro · Março 17, 2016

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>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
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>

L. Henrique · Março 17, 2016

Isso é uma dúvida ou você quer que melhorem o código por você?

Giovani · Março 17, 2016

@Acharnobairro:

1) você quer que o pessoal melhore o seu código???

2) qual o problema em usar table quando necessário?

Entrar

Arquivado

tabela Tabela sem Table com CSS

Recommended Posts

Acharnobairro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante