Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

seixas

Tabela com Divs

Recommended Posts

seixas

Boas, alguém me sabe dizer como faço para fazer a tabela 2 na imagem. O codigo da 1 esta em baixo, apenas me falta modificar a 2 linha a 2,3,4 colunas .. e fazer isto apenas com divs,

Agradeço qualquer ajuda .

http://img547.imageshack.us/img547/1720/askp.png

The code (1)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>table using divs</title>
<style type="text/css">
.div-table{display:table; border:1px solid #003399;}
.div-table-caption{display:table-caption; background:#009999;text-align: center;}
.div-table-row{display:table-row;}
.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;text-align: center;}
.div-table-coln{float: left;}

</style>
</head>
<body>
<div class="div-table">

<div class="div-table-caption">TITLE</div>
<div class="div-table-row">

<div class="div-table-col">aaaaa</div>
<div class="div-table-col">Sbbbbb</div>
<div class="div-table-col">ccccc</div>
<div class="div-table-col">ffffffff</div>

</div>

<div class="div-table-row">
<div class="div-table-col">asdadadasasad</div>


<div class="div-table-col">
<div class="div-table-col">a</div>
<div class="div-table-col">b</div>
<div class="div-table-col">c</div>
<div class="div-table-col">d</div>
</div>


<div class="div-table-col">
<div class="div-table-col">a</div>
<div class="div-table-col">b</div>
<div class="div-table-col">c</div>
<div class="div-table-col">d</div>

</div>

<div class="div-table-col">
<div class="div-table-col">a</div>
<div class="div-table-col">b</div>
<div class="div-table-col">c</div>
<div class="div-table-col">d</div>
</div>

</div>

</div>

</body>
</html>
 

Share this post


Link to post
Share on other sites
mjamado

Porquê com div se são dados tabulares? É tudo vontade de ser mais papista que o papa?

  • Vote 1

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
malleus

De facto...tabelas são óptimas para apresentar dados de forma...tabular, para quê complicar?

De qualquer modo...pelo que vejo bastará retirar o padding das células onde tens a,b,c,d (uma classe com padding:0px; aplicado a essas células em particular por exemplo).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.