Jump to content
carvalho2707

Criar Tabela Personalizada

Recommended Posts

carvalho2707

boas, estou a tentar criar uma página html/php com a descrição de um filme (tipo cartão de visita).

Alguém me consegue ajudar a criar isto?

A única forma que consegui apenas mete os elementos de cima para baixo 😕

cdiUCOR

Share this post


Link to post
Share on other sites
Virneto

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

Share this post


Link to post
Share on other sites
I-NOZex

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

Share this post


Link to post
Share on other sites
D'Leandro™

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>

Share this post


Link to post
Share on other sites
HappyHippyHippo

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

Share this post


Link to post
Share on other sites
D'Leandro™

Basta utilizar as seguintes propriedades css...

height: xx;

min-height: xx;

max-height: xx;

O mesmo vale para width!

Share this post


Link to post
Share on other sites
HappyHippyHippo

Basta utilizar as seguintes propriedades css...

height: xx;

min-height: xx;

max-height: xx;

O mesmo vale para width!

isso não resolve absolutamente nada no que toca ao problema que apresentei ...


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Devexz

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 :D


Contador de calorias: caloriaspordia.com

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
HappyHippyHippo

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

Share this post


Link to post
Share on other sites
bioshock

E onde é que ele disse que vai ter informação que trespasse Y limite? Pode perfeitamente fazer um wrap do conteúdo.

Share this post


Link to post
Share on other sites
HappyHippyHippo

estás a assumir algo que não podes confirmar, logo é uma solução que fica a 50%


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
HappyHippyHippo

<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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
bioshock

@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.

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

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