Jump to content

Criar Tabela Personalizada


carvalho2707
 Share

Recommended Posts

Coloca aí o código que já tens.

Não percebi o "mete os elementos de cima para baixo" mas podes fazer com table e com um layout de divs. O segundo é, julgo eu, mais adequado.

"Que inquieto desejo vos tortura, Seres elementares, força obscura? Em volta de que ideia gravitais?" >> Anthero de Quental

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Linuxando.com | ...

Link to comment
Share on other sites

precisas de uma estrutura +- como esta:

<div class="main">
   <div class="left">
    <div class="content">linha 1</content>
    <div class="content">linha 2</content>
    <div class="content">linha 3</content>
    <div class="content">linha 4</content>
    <div class="content">linha 5</content>
   </div>
   <div class="right">imagem</div>
   <div class="bottom">ultima linha</div>
</div>
<!-- o resto é css... -->

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

Amigo, eu não sei as medidas e cores, mas a estrutura está aqui, agora basta editar o CSS.

<div>
 <span class="left_cla">1</span>
 <span class="left_cla">2</span>
 <span class="left_cla">3</span>
 <span class="left_cla">4</span>
 <span class="left_cla">5</span>
 <div class="grand_quad">L</div>
 <span class="right_cl">6</span>
</div>
<style>
.right_cl {
   display: block;
   border: 1px solid blue;
   width: 1177px;
   margin: 0px 4px 4px 4px;
   border-radius: 5px;
   height: 100px;
}
.grand_quad {
   width: 500px;
   height: 490px;
   border: 1px solid rgb(0, 0, 0);
   display: inline-block;
   margin: 4px 0px;
   border-radius: 5px;
}
.left_cla {
   border: 1px solid red;
   display: block;
   width: 50%;
   float: left;
   height: 90px;
   margin: 4px 4px;
   border-radius: 5px;
}
</style>
Link to comment
Share on other sites

Amigo, eu não sei as medidas e cores, mas a estrutura está aqui, agora basta editar o CSS.

isso parece muito bonito, mas queres ver isso a estoirar ?

 <span class="left_cla">
   asd<br />
   asd<br />
   asd<br />
   asd<br />
   asd<br />
   asd<br />
   asd<br />
 </span>

------------------

por incrível que pareça, o que pretendes ainda só é possível fazer com 100% de certeza que não acontecem coisas como o último código apresentado, usando tabelas.

caso contrário (com div's) é quase impossível fazer o alinhamento correcto dos blocos (só com correcções com javascript). isto porque os blocos deverão poder aumentar de altura a bel-prazer (demonstrado no exemplo anterior), e isso é algo que não podes controlar. e sem controlar isso, não podes determinar à partida qual a altura destes para determinar o alinhamento correcto.

esta é a solução que pretendes

<style>
 td { border: 1px solid black; height: 20px; }
</style>
<table style="width: 300px">
 <tr>
   <td></td><td rowspan="5"></td>
 </tr>
 <tr>
   <td></td>
 </tr>
 <tr>
   <td></td>
 </tr>
 <tr>
   <td></td>
 </tr>
 <tr>
   <td></td>
 </tr>
 <tr>
   <td colspan="2"></td>
 </tr>
</table>
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

isso parece muito bonito, mas queres ver isso a estoirar ?

 <span class="left_cla">
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
 </span>

------------------

por incrível que pareça, o que pretendes ainda só é possível fazer com 100% de certeza que não acontecem coisas como o último código apresentado, usando tabelas.

caso contrário (com div's) é quase impossível fazer o alinhamento correcto dos blocos (só com correcções com javascript). isto porque os blocos deverão poder aumentar de altura a bel-prazer (demonstrado no exemplo anterior), e isso é algo que não podes controlar. e sem controlar isso, não podes determinar à partida qual a altura destes para determinar o alinhamento correcto.

esta é a solução que pretendes

<style>
 td { border: 1px solid black; height: 20px; }
</style>
<table style="width: 300px">
 <tr>
<td></td><td rowspan="5"></td>
 </tr>
 <tr>
<td></td>
 </tr>
 <tr>
<td></td>
 </tr>
 <tr>
<td></td>
 </tr>
 <tr>
<td></td>
 </tr>
 <tr>
<td colspan="2"></td>
 </tr>
</table>

quando eu for grande quero ser como tu 😄

Contador de calorias: caloriaspordia.com

Link to comment
Share on other sites

Guest Markito

Mais uma flame-war entretanto, ninguém tirou a dúvida ao rapaz. No entanto tenho uma coisa a dizer, usar tabelas para fazer sites é coisa que já não se usa! Por isso se passou para o html5, porque os divs resolvem o problema perfeitamente.

Link to comment
Share on other sites

Mais uma flame-war entretanto, ninguém tirou a dúvida ao rapaz. No entanto tenho uma coisa a dizer, usar tabelas para fazer sites é coisa que já não se usa! Por isso se passou para o html5, porque os divs resolvem o problema perfeitamente.

1º - foi dada uma solução

2º - ao dizer que podes resolver com div's, apresenta uma solução

isso parece muito bonito, mas queres ver isso a estoirar ?

este código apresenta a razão porque não se pode forçar a altura das células : perda de informação visível

<div>
   <div class='left'>
       Conteudo<br />
       dfg<br />
       dgf
   </div>
   <div class='left'>
       Conteudo
   </div>
   <div class='left'>
       Conteudo
   </div>
   <div class='left'>
       Conteudo
   </div>
   <div class='left'>
       Conteudo
   </div>   
   <div class='right'>
       Conteudo
   </div>
</div>
<div class='footer'>

</div>
Edited by HappyHippyHippo
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

<div class='container'>
   <div class='left'>
       Conteudo<br/>
       dfg<br/>
       dgfssss
   </div>
   <div class='left'>
       Conteudo
   </div>
   <div class='left'>
       Conteudo
       dfg<br/>
       dgf
   </div>
   <div class='left'>
       Conteudo
   </div>
   <div class='left'>
       Conteudo
   </div>   
   <div class='right'>
       Conteudo 1<br />
       Conteudo 2<br />
       Conteudo 3<br />
       Conteudo 4<br />
       Conteudo 5<br />
       Conteudo 6<br />
       Conteudo 7<br />
       Conteudo 8<br />
       Conteudo 9<br />
       Conteudo 10<br />
   </div>
</div>
<div class='footer'>
   FOOTER
</div>
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Guest Markito

Eu não vou apresentar solução alguma, porque não me apetece, neste momento. Mas desde cedo( cedo ao começar a estudar html5) que fui (bem) informado que usar tabelas é coisa que já não se usa. Para fazer sites é completamente antiquado. Mas se quer ficar a programar em html á moda antiga, força.Tenho um colega na turma que começou a fazer o site do projecto dele em tabelas e depressa teve que mudar para div's.

Link to comment
Share on other sites

@HappyHippo tens duas soluções nesse caso. Escondes o overflow na div right ou implementas um scroll nela.

@Markito não acho que seja antiquado. Lá por eu estar apresentar aqui uma solução com as divs não significa que use as tabelas. Muito pelo contrário, utilizo mais as tabelas do que as divs.

Link to comment
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
 Share

×
×
  • Create New...

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.