Usando Tds E Trs E Tables

mestre fyoda · Maio 4, 2005

eu gostaria de fazer uma pagina assim .

no lado esquerdo e direito menu e no meio o conteudo .

como eu faço isso ?

eu já tenho o menu pronto e so falta saber colocar no lado esquerdo e direito e o meio aonde vai o conteudo .

Norivan Oliveira · Maio 4, 2005

achu que é isso que você quer...

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id=menu>seu menu</td>
    <td id=conteudo>conteúdo</td>
    <td id=direito>lado direito</td>
  </tr>
</table>

mestre fyoda · Maio 4, 2005

você poderia me explicar como que foi feito isso , se não for pedir de mais eu gostaria de um tuto disso .

Norivan Oliveira · Maio 5, 2005

Explicar não é comigo não, mais vou tentar...

TABLE= Tabela por inteiro

Tr= Linhas. São inseridas dentro das TABLE'S (entre <table> e </table>)

Td= Colunas. São inseridas dentro das TR'S (entre <tr> e </tr>). Como saber qual é a da esquerda, meio e direita? simples a primeira TD é a da esquerda a segunda é a do meio e a terceira é a da direita.

Componentes da TAG TABLE

ID= IDENTIFICADOR

WIDHT=LARGURA

HEIGHT=ALTURA

BORDER=BORDA

BORDERCOLOR=COR DA BORDA

BGCOLOR=COR DE FUNDO

BACKGROUND= IMAGEM DE FUNDO

CLASS= DETERMINA SUA CLASSE CSS

STYLE= ESTILO CSS

CELLSPACING=ESPAÇAMENTO ENTRE AS CÉLULAS (TD E TR)

CELLPADDING= ENCHIMENTO DAS CÉLULAS

Componentes das TAGS TR E TD

ID= IDENTIFICADOR

WIDHT=LARGURA

HEIGHT=ALTURA

BORDER=BORDA

BORDERCOLOR=COR DA BORDA

BGCOLOR=COR DE FUNDO

BACKGROUND= IMAGEM DE FUNDO

CLASS= DETERMINA SUA CLASSE CSS

STYLE= ESTILO CSS

mestre fyoda · Maio 5, 2005

você poderia me ajudar a dizer pra que serve esses ids , me de um exemplo por favor .

Norivan Oliveira · Maio 5, 2005

po r exemplo: tu tem um script que vai inserir uma lista de preços numa tabela, numa página com 1 milhão de tabelas - "Como o script vai saber em qual tabela inserir os dados?" - com a ID.

A ID funciona para um Java Script (ou outro) como a CLASS funciona para um style CSS...

EXEMPLO

function esconder_table_mrbam(){

mrbam.style.visibility="hidden"

}

</SCRIPT>

obs: achu q isso aí num vai funcionar não mas é só um ex

mestre fyoda · Maio 5, 2005

deixa ver se eu entendi o id , eu poderia fazer algo assim < input type="text" name="nome" id="teste > < input type="text" name="login" id="login">

function esconder_table_mrbam(){

if(id != 0 ) {

teste.style.visibility="hidden"

}

else {

login.style.visibility="hidden"

}

</SCRIPT>

O de cima é so um exemplo pra ver se entendi . eu não iria presizar digitar document.nomeformulario.nome.value , seria isso ?

to com um probleminha, do lado esquerdo e direito possuo tables e no meio o conteudo , quando eu clico no link abre um conteudo no meio , mas os lados estao indo pra baixo . como que eu faço para quando o usuario clicar no link as tabelas não se movimentarem .

Norivan Oliveira · Maio 5, 2005

manda o código inteiro ou então o link para sua página...

mestre fyoda · Maio 5, 2005

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="fundo/estilo.css" rel="stylesheet" type="text/css">

</head>
<script language="javascript">
<!--
function newWindow(mypage,myname,w,h) {
  if(screen.width){
  var winl = (screen.width-w)/2;
  var wint = (screen.height-h)/2;
  }else{winl = 0;wint =0;}
  if (winl < 0) winl = 0;
  if (wint < 0) wint = 0;
  var settings = 'height=' + h + ',';
  settings += 'width=' + w + ',';
  settings += 'top=' + wint + ',';
  settings += 'left=' + winl + ',';
  settings += 'toolbar=no,location=no,status=no,scrollbars=no,resizable=no';
  win = window.open(mypage,myname,settings);
  win.window.focus();
}

function esconder(){
 document.all.layer_abre.style.visibility = 'hidden';
 }
-->
</script>
<body bgcolor="#F7F7F7">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td id=menu>

<table width="137" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="preto9" style="border: 1px solid #B9C9D6;">
        <tr>   
	<td height="30" background="layout/titm_estudante.gif">&nbsp;</td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0; border-top:1px dotted #BDBEC0;"><img src="layout/seta_peq_vermelha.gif" width="4" height="6"> <a href="index.php?pag=cadastro" class="vermelho9">Cadastre-se</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="index.php" class="preto9">Pagina Principal</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="entrevista.php" class="preto9">Dicas para Entrevista</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="curriculo.php" class="preto9">Dicas para o Curriculo</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="vocacional.php" class="preto9">Orienta&ccedil;&atilde;o Vocacional</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="profissoes.php" class="preto9">Guia de Profiss&otilde;es</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="noticias.php" class="preto9">Not&iacute;cias</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="vestibular.php" class="preto9">Vestibular</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="lazer_cultura.php" class="preto9">Lazer e Cultura</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="links.php" class="preto9">Links Interessantes</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="artigos.php" class="preto9">Artigos Interessantes</a></td>
        </tr>
        <tr>
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> <a href="#" class="preto9">Depoimentos</a></td>
        </tr>
        <tr>
          <td height="22" align="right" style="padding-right:6px;"></td>



</table>

   </td>

   <td id=conteudo>

<table width="400" height="500" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="preto9" style="border: 1px solid #B9C9D6;">
      <td>
        <center><?switch($_GET['pag']){
           case 'cadastro': include "cadastro.php"; break;
             }?>
        <center>
      </td>
</table>

  </td>

    <td id=direito><p align="right">

  <td><table width="141" border="0" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4" class="preto10" style="border: 1px solid #B9C9D6;">
      <tr>
        <td width="108"  style="padding-left:2px;" class="cinza9"><img src="fundo/login.gif" width="100" height="30"></td>
        <td width="31" class="cinza9"><img src="fundo/pessoa_1.gif" width="31" height="31"></td>
      </tr>
      <tr>
        <td height="35" style="padding-left:5px;" class="cinza9" size="1"><center>Acesso ao conteudo restrito.</center></td>
        <td height="35" valign="top"><img src="fundo/pessoa_2.gif" width="31" height="21"></td>
      </tr>
       <form action="loga.php" method="post">
        <tr>
          <td colspan="2" align="right" valign="bottom" style="padding-right:15px">Login:</td>
        </tr>
        <tr align="center">
          <td colspan="2" ><input name="login" type="text" class="caixa" maxlength="11" ></td>
        </tr>
        <tr>
          <td align="right" valign="bottom" colspan="2" style="padding-right:15px; padding-top:5px">Senha:</td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input name="senha" type="password" class="caixa" value="" maxlength="10"></td>
        </tr>
        <tr align="center" >
          <td height="40" colspan="2"><input name="Submit" type="submit" class="botao" value="Entrar"></td>
        </tr>
        <input type="hidden" name="acao" value="2">
        <tr align="center">
          <td colspan="2"><a href="lembrar_senha.php" class="preto9">Esqueceu sua Senha?</a></td>
        </tr>
  </form>
              <tr>
        <td height="20" colspan="2" align="right" style="padding-right:6px;"></td>
      </tr>
    </table></td>
   

</p>
   </td>

 </tr>
</table>

Norivan Oliveira · Maio 5, 2005

peraí estou fazendu um instalação aki já, já eu, testo o código e respondo

Norivan Oliveira · Maio 5, 2005

No meu navegador não deu esse erro, mas de qualquer forma eu corrigi algumas coisas tenta assim

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="fundo/estilo.css" rel="stylesheet" type="text/css">

</head>
<script language="javascript">
<!--
function newWindow(mypage,myname,w,h) {
 if(screen.width){
 var winl = (screen.width-w)/2;
 var wint = (screen.height-h)/2;
 }else{winl = 0;wint =0;}
 if (winl < 0) winl = 0;
 if (wint < 0) wint = 0;
 var settings = 'height=' + h + ',';
 settings += 'width=' + w + ',';
 settings += 'top=' + wint + ',';
 settings += 'left=' + winl + ',';
 settings += 'toolbar=no,location=no,status=no,scrollbars=no,resizable=no';
 win = window.open(mypage,myname,settings);
 win.window.focus();
}

function esconder(){
document.all.layer_abre.style.visibility = 'hidden';
}
-->
</script>
<body bgcolor="#F7F7F7" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="96%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td id=menu width="18%"> 
      <table width="137" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="preto9" style="border: 1px solid #B9C9D6;">
        <tr> 
          <td height="30" background="layout/titm_estudante.gif">&nbsp;</td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0; border-top:1px dotted #BDBEC0;"><img src="layout/seta_peq_vermelha.gif" width="4" height="6"> 
            <a href="index.php?pag=cadastro" class="vermelho9">Cadastre-se</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="index.php" class="preto9">Pagina Principal</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="entrevista.php" class="preto9">Dicas para Entrevista</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="curriculo.php" class="preto9">Dicas para o Curriculo</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="vocacional.php" class="preto9">Orienta&ccedil;&atilde;o Vocacional</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="profissoes.php" class="preto9">Guia de Profiss&otilde;es</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="noticias.php" class="preto9">Not&iacute;cias</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="vestibular.php" class="preto9">Vestibular</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="lazer_cultura.php" class="preto9">Lazer e Cultura</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="links.php" class="preto9">Links Interessantes</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="artigos.php" class="preto9">Artigos Interessantes</a></td>
        </tr>
        <tr> 
          <td style="border-bottom:1px dotted #BDBEC0;"><img src="fundo/seta_peq_azul.gif" width="4" height="6"> 
            <a href="#" class="preto9">Depoimentos</a></td>
        </tr>
        <tr> 
          <td height="22" align="right" style="padding-right:6px;"></td>
      </table>
    </td>
    <td id=conteudo width="62%"> 
      <table width="484" height="500" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="preto9" style="border: 1px solid #B9C9D6;">
        
        <td> 
          <center>
            <?switch($_GET['pag']){
          case 'cadastro': include "cadastro.php"; break;
            }?>
            <center>
            </center>
          </center>
        </td>
      </table>
    </td>
    <td id=direito width="20%"> 
      <table width="158" border="0" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4" class="preto10" style="border: 1px solid #B9C9D6;" align="center">
        <tr> 
          <td width="110"  style="padding-left:2px;" class="cinza9"><img src="fundo/login.gif" width="100" height="30"></td>
          <td width="48" class="cinza9"><img src="fundo/pessoa_1.gif" width="31" height="31"></td>
        </tr>
        <tr> 
          <td height="35" style="padding-left:5px;" class="cinza9" size="1" width="110"> 
            <div align="center">Acesso ao conteudo restrito. </div>
          </td>
          <td height="35" valign="top" width="48"> 
            <div align="center"><img src="fundo/pessoa_2.gif" width="31" height="21"></div>
          </td>
        </tr>
        <form action="loga.php" method="post">
          <tr> 
            <td colspan="2" align="right" valign="bottom" style="padding-right:15px"> 
              <div align="center">Login:</div>
            </td>
          </tr>
          <tr align="center"> 
            <td colspan="2" > 
              <div align="center"> 
                <input name="login" type="text" class="caixa" maxlength="11" >
              </div>
            </td>
          </tr>
          <tr> 
            <td align="right" valign="bottom" colspan="2" style="padding-right:15px; padding-top:5px"> 
              <div align="center">Senha:</div>
            </td>
          </tr>
          <tr> 
            <td colspan="2" align="center"> 
              <div align="center"> 
                <input name="senha" type="password" class="caixa" value="" maxlength="10">
              </div>
            </td>
          </tr>
          <tr align="center" > 
            <td height="40" colspan="2"> 
              <div align="center"> 
                <input name="Submit" type="submit" class="botao" value="Entrar">
              </div>
            </td>
          </tr>
          <input type="hidden" name="acao" value="2">
          <tr align="center"> 
            <td colspan="2"> 
              <div align="center"><a href="lembrar_senha.php" class="preto9">Esqueceu 
                sua Senha?</a></div>
            </td>
          </tr>
        </form>
        <tr> 
          <td height="20" colspan="2" align="right" style="padding-right:6px;"> 
            <div align="center"></div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

mestre fyoda · Maio 6, 2005

valeu pela forcinha .

Entrar

Usando Tds E Trs E Tables

Pergunta

Link para o comentário

Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns