Trabalhar com tabelas

Kandalf · 2 de Setembro de 2007

Pessoal tenho uma dúvida muito básica mas não sei como resolver. Arranjei um template e aquilo é tipo uma tabela centrada com 766 de largura e tem lá dentro o conteúdo o que eu quero é colocar do lado de fora da tabela publicidade mais concretamente um banner vertical mas quero que ele fique encostado a tabela do lado direito.

Eu consigo colocar o banner de lado o problema é encosta-lo à tabela não consigo fazer isso.

Se não perceberem o que eu quero eu faço um desenho e meto aqui

OldMan · 2 de Setembro de 2007

Desenho please

Kandalf · 2 de Setembro de 2007

Aqui vai o desenho do que eu quero eu já quase que consegui fazer aquilo mas falta qualquer coisa.

Tipo eu já tenho o fundo e a tabela central com o "site" e quero agora acrescentar ao lado banner como faço isso.

Será que tenho que criar outra tabela? Eu já tentei isso mas não consigo que elas fiquem juntas so consigo colocar uma nova tabela ou tudo a esquerda ou tudo a direita

OldMan · 2 de Setembro de 2007

Deves ter algo deste género:

Código:

<table>
  <tr>
    <td>
*coisas aqui po meio*
    </td>
  </tr>
</table>

agora depende se tens uma célula a envolver o site todo (1), e depois dentro dessa célula tens outra tabela, ou se tens essa tabela de fora dividida (2) (só com o código é que consigo ver).

solução para (1):

Código:

<table>
  <tr>
    <td>
*coisas aqui po meio*
    </td>
    <td>
*banner*
    </td>
  </tr>
</table>

solução para (2):

Código:

<table>
   <tr>
     <td>
 *coisas aqui po meio*
     </td>
    <td rowspan="?">
*banner*
    </td>
   </tr>
 </table>

aquele "?" depende de quantas divisões verticais tem essa tabela.

Kandalf · 2 de Setembro de 2007

Eu estou a utilizar o exemplo 2 acho que era o que se adequava ao que eu tinha.

Mas estou agora com um problema já consegui colocar mais uma coluna na tabela ou seja tinha uma tabela de 766 e aumentei para 866 e fiquei assim com uma coluna livre ao lado sem estragar o que já tinha mas quando coloco lá um banner ele fica a meio da coluna não fica junto a cima como eu queria.

Fica aqui o código é só executar que aparece logo a tabela com o banner eu queria-o chegar para cima.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<TABLE WIDTH=866 BORDER=1 CELLPADDING=0 CELLSPACING=0 align="center" height="100%">
    <TR>
        <TD COLSPAN=2 HEIGHT=114>&nbsp;</TD>
        <TD COLSPAN=4 HEIGHT=114>&nbsp;</TD>
        <TD COLSPAN=4 HEIGHT=114>&nbsp;</TD>
         <TD COLSPAN=5 HEIGHT=114>&nbsp;</TD>
          <TD COLSPAN=7 HEIGHT=114>&nbsp;</TD>
       
       <TD rowspan=5 ><a href="http://www.linkws.com" target="_blank"><img src="http://www.linkws.com/br/images/bannerv_120_240.gif" width="120" height="240" border="0" align="texttop" /></a></TD>
  </TR>
    
    <TR>
        <TD COLSPAN=22 HEIGHT=16>&nbsp;</TD>
    </TR>
    
    <TR>
        <TD COLSPAN=22 HEIGHT=118>&nbsp;</TD>
    </TR>
    
    <TR>
        <TD COLSPAN=4 HEIGHT=37 >&nbsp;</TD>
         <TD COLSPAN=3 HEIGHT=37>&nbsp;</TD>
        <TD COLSPAN=7 HEIGHT=37>&nbsp;</TD>
        <TD COLSPAN=5 HEIGHT=37>&nbsp;</TD>
        <TD COLSPAN=3 HEIGHT=37>&nbsp;</TD>
    </TR>
    
    
    <TR>
      <TD COLSPAN=20 valign="top" height="100%" background="imagem">
        <!--right text-->
            <TABLE WIDTH=584 BORDER=0 CELLPADDING=0 CELLSPACING=0>
                <TR>
                    <TD ROWSPAN=4 background="" WIDTH=175 HEIGHT=394 ALT="" valign="top" style="background-repeat:no-repeat; background-position:top">
        
                    </TD>
                    <TD COLSPAN=3>&nbsp;</TD>
                </TR>
                <TR>
                    <TD>&nbsp;</TD>
                    <TD>&nbsp;</TD>
                    <TD>&nbsp;</TD>
                </TR>
                <TR>
                    <TD>&nbsp;</TD>
                    <TD>&nbsp;</TD>
                    <TD>&nbsp;</TD>
                </TR>
                <TR>
                    <TD COLSPAN=3><p>&nbsp;</p></TD>
                </TR>
            </TABLE>      
      </TD>
      <TD COLSPAN=2  valign="top" height="100%" background="imagem">
        <!--left text--><br>

      <!--left text-->      
      </TD>
    </TR>
    
    
    <TR>
        <TD COLSPAN=4 WIDTH=160 HEIGHT=37 >&nbsp;</TD>
        <TD COLSPAN=3 WIDTH=119 HEIGHT=37>&nbsp;</TD>
        <TD COLSPAN=7 WIDTH=105 HEIGHT=37>&nbsp;</TD>
        <TD COLSPAN=5 WIDTH=191 HEIGHT=37>&nbsp;</TD>
        <TD COLSPAN=3 WIDTH=191 HEIGHT=37>&nbsp;</TD>
    </TR>
    
    <TR>
        <TD COLSPAN=22 background="imagem" HEIGHT=29 ALT="">
        </TD>
    </TR>
    
    
    <TR>
        <TD width="98">
            <IMG SRC="images/spacer.gif" WIDTH=98 HEIGHT=1 ALT=""></TD>
        <TD width="8">
            <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
        <TD width="15">
            <IMG SRC="images/spacer.gif" WIDTH=15 HEIGHT=1 ALT=""></TD>
        <TD width="39">
            <IMG SRC="images/spacer.gif" WIDTH=39 HEIGHT=1 ALT=""></TD>
        <TD width="31">
            <IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
        <TD width="21">
            <IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
        <TD width="67">
            <IMG SRC="images/spacer.gif" WIDTH=67 HEIGHT=1 ALT=""></TD>
        <TD width="15">
            <IMG SRC="images/spacer.gif" WIDTH=15 HEIGHT=1 ALT=""></TD>
        <TD width="36">
            <IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
        <TD width="36">
            <IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
        <TD width="26">
            <IMG SRC="images/spacer.gif" WIDTH=9 HEIGHT=1 ALT=""></TD>
        <TD width="12">
            <IMG SRC="images/spacer.gif" WIDTH=11 HEIGHT=1 ALT=""></TD>
        <TD width="42">
            <IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
        <TD width="8">
            <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
        <TD width="44">
            <IMG SRC="images/spacer.gif" WIDTH=43 HEIGHT=1 ALT=""></TD>
        <TD width="17">
            <IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
        <TD width="9">
            <IMG SRC="images/spacer.gif" WIDTH=9 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=61 HEIGHT=1 ALT=""></TD>
        <TD width="61">
            <IMG SRC="images/spacer.gif" WIDTH=61 HEIGHT=1 ALT=""></TD>
        <TD width="10">
            <IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
        <TD width="44">
            <IMG SRC="images/spacer.gif" WIDTH=44 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=137 HEIGHT=1 ALT=""></TD>
        <TD>
            <img src="images/spacer.gif" width=100 height=1 alt=""></TD>
  </TR>
  
</TABLE>
</body>
</html>

Se alguém me souber dizer como resolver isto agradeço muito

PS: O "spacer.gif" é 1 pixel branco

majo-san · 2 de Setembro de 2007

Tens isto:

Código:

<TD rowspan=5 ><a href="http://www.linkws.com" target="_blank"><img src="http://www.linkws.com/br/images/bannerv_120_240.gif" width="120" height="240" border="0" align="texttop" /></a></TD>

Muda para isto:

Código:

<TD rowspan=5 [B]valign="top"[/B]><a href="http://www.linkws.com" target="_blank"><img src="http://www.linkws.com/br/images/bannerv_120_240.gif" width="120" height="240" border="0" [I]align="texttop" [/I]/></a></TD>

O código a bold (valign="top") é o que precisas de acrescentar. O código a itálico (align="texttop") acho que podes retirar porque não serve para nada. Não testei mas deve funcionar.

Kandalf · 2 de Setembro de 2007

majo-san disse:
Tens isto:

Código:

<TD rowspan=5 ><a href="http://www.linkws.com" target="_blank"><img src="http://www.linkws.com/br/images/bannerv_120_240.gif" width="120" height="240" border="0" align="texttop" /></a></TD>

Muda para isto:

Código:

<TD rowspan=5 [B]valign="top"[/B]><a href="http://www.linkws.com" target="_blank"><img src="http://www.linkws.com/br/images/bannerv_120_240.gif" width="120" height="240" border="0" [I]align="texttop" [/I]/></a></TD>

O código a bold (valign="top") é o que precisas de acrescentar. O código a itálico (align="texttop") acho que podes retirar porque não serve para nada. Não testei mas deve funcionar.

Obrigadão era mesmo isso o meu problema é não saber estes comandos básicos e perco muito tempo a descobrir mas deste-me uma grande ajuda..

OldMan · 2 de Setembro de 2007

Que me lembre não há nenhuma propriedade de "texttop" para o atributo "align".
Não cheguei a experimentar o código, parece que já resolveste.

Tuaregue · 2 de Setembro de 2007

já não se usam tabelas para formatar sites. são as normas. utilizam-se as Div

HecKel · 3 de Setembro de 2007

Tuaregue, neste caso o Kandalf arranjou um template..., não o iria alterar todo só para ficar dentro das normas. Certamente que perderia bastante tempo e só se tivesse bastante experiência é que conseguiria o mesmo efeito.

Ele apenas quer saber como adaptar o template às necessidades dele, mas sim, de facto é uma boa recomendação, aprender a fazer bem para fazer bons trabalhos.

HecKel

majo-san · 3 de Setembro de 2007

Eu já não trabalho com tabelas há anos o.O mas foram outros tantos anos a trabalhar com elas, por isso ainda está retido na memória.
Outra coisa: para o caso de quereres saber, o XHTML não aceita maiúsculas nas tags. Ou pões tudo em minúsculas ou mudas o doctype para HTML. Enfim, os browsers em princípio ignoram os erros e mostram direito, mas é erro.

Kandalf · 3 de Setembro de 2007

Ok isto já vinha em maiúsculas e não tive a mudar até porque não sabia que fazia mal. Também sei que agora usa-se as Div e recentemente andei a fazer outro site e usei div mas este template trazia tabelas e foi uma confusão para entender isto.

Como a minha experiência é muito pouca tenho utilizado templates para me inspirar e depois acabo por modificar quase totalmente mas acho que ainda não estou pronto para fazer um site de raiz consigo desenrascar-me e quando tá mais difícil pergunto o meu maior problema é a parte gráfica porque programação até mando uns toques.

Mas obrigado pelas opiniões e ajudas

Trabalhar com tabelas

Kandalf

Power Member

OldMan

Power Member

Kandalf

Power Member

OldMan

Power Member

Kandalf

Power Member

majo-san

Power Member

Kandalf

Power Member

OldMan

Power Member

Tuaregue

Power Member

HecKel

The WORM

majo-san

Power Member

Kandalf

Power Member