Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

seixas

Tabela com Divs

Mensagens Recomendadas

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>
 

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

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

  • Voto 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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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).

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.