[Resolvido] Descobrir a altura da célula

[mikael 0]

Olá, antes de mais nada peço desculpas se já existem algum tópico referente ao assunto e já aviso que sou iniciante, então posso estar perguntando coisas ridículas :D

 

Tenho duas tabelas em um site. As duas estão na mesma linha. Porém a altura de uma célula da segunda tabela depende da altura da primeira célula.

 

Procurei alguma coisa na internet e tentei solucionar o problema com o seguinte código:

document.getElementById('Celula').height = document.getElementById('Tab1').height

Então, isso não funcionou. Gostaria de saber se é possível descobrir a altura da célula e mudar de acordo com a altura total de uma outra tabela.

 

Desde já agradeço a atenção.

Abraços.

[Thiago Retondar 18]

Tente assim:

 

document.getElementById('Celula').style.height = document.getElementById('Tab1').clientHeight + "px";

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Henrique Barcelos 290]

Assim só funciona se você tiver declarado a altura no CSS.

 

Use jQuery:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif jQuery

 

Faça assim:

 

$(document).ready(function(){
	$("#ID_DA_TABLE tr:nth-child(n) td:nth-child(x)").height(); //onde n é a posição da TR na tabela, começando por 1 e x é a posição da TD na TR, tbm começando por 1
});

[Thiago Retondar 18]

Aqui funcionou sem o style.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[mikael 0]

Agradeço muito a respostas dos colegas, mas ainda não consegui resolver o problema. Segue o mesmo mais detalhado abaixo.

 

<table cellpadding="0" cellspacing="0" border="0" width="700" style="display:inline;"> \\ Primeira tabela, corpo central, ocupa metade da página
	<tr>
		<td background="" width="700" height="15"> \\Célula vazia que contém apenas a o fundo da imagem do cabecalho da tabela
        </td>
    </tr>
    <tr>
         <td background="" width="700"> \\Célula variável de acordo com texto
         </td>
    </tr>
    <tr>
        <td background="" width="700" height="17"> \\Célula vazia que contém apenas a o fundo da imagem do rodape da tabela
     	</td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="200" style="display:inline; vertical-align:top"> \\Segunda tabela na mesma posição de layout da primeira
	<tr>
        <td background="" width="200" height="15">  \\Célula vazia que contém apenas a o fundo da imagem do cabecalho da tabela
        </td>
    </tr>
    <tr>
        <td background="" width="200"> \\Célula variável de acordo com texto
        </td>
    </tr>
    <tr>
        <td background="" width="200" height="17"> \\Célula vazia que contém apenas a o fundo da imagem do rodape da tabela
        </td>
    </tr>
    <tr>
        <td background="" width="200"> \\Célula vazia contendo apenas a imagem, digamos que spacer, pra completar o desenho da template.
        </td>
    </tr>
</table>

Postei o código do corpo do site que estou desenvolvendo para ficar mais fácil. Vai aqui a dúvida:

 

A segunda célula da primeira tabela contém informações de um texto longo.

Já a segunda célula da segunda tabela contém informações de um texto pequeno. Ou seja, as duas células não terão o mesmo tamanho e complicarão o desenho do template. Por isso, foi feita a quarta célula da segunda tabela, já que a terceira a fecha no desenho da template, para completar o desenho da primeira tabela. Só que para saber com exatidão o tamanho da dessa célula preciso do tamanho total da primeira tabela, subtraindo o tamanho total da segunda tabela.

Tentei usei os comandos que vocês me passaram em javascript, adaptei e tentei e não consegui. Estou querendo muito terminar esse desenho para aprendizado.

Tentei descobrir uma maneira de fazer isso em asp, mas não encontrei (ou não soubera procurar =D) e então tentei Javascript, mas sem sucesso.

Peço muito a ajuda de vocês para esse problema.

 

Desde já agradeço a atenção.

[William Bruno 1501]

Cara, se a idéia é fazer o HTML de um site, simplesmente não use tabelas.

 

você deve usar CSS para construir essa estrutura, existe uma técnica chamada: Faux Columns que resolve com CSS puro, esse problema de colunas terem a mesma altura. Mas para isso, a marcação terá que ser melhorada.

 

Procure fazer em Tableless.

[klonder 14]

Para descobrir a altura e posição dos objetos, gosto de usar o offset[...].

Exemplos:

- Altura de um objeto:

var objDiv = document.getElementById("objeto1");

objeto1.offsetHeight;

 

 

Código para exemplo:

<html>
<head>
	<title>Tamanho de um objeto em JavaScript</title>
</head>
<body>
<script type="text/javascript">
function tamanho() {
var objCelula = document.getElementById("tb1_l1");
alert("A altura é de: "+objCelula.offsetHeight+"px");
}
</script>

<table id="tabela" border="1" class="linha">
<tr>
	<td id="tb1_l1" onclick="tamanho();">Esse é o meu texto 1<br>Esse é o meu texto 1<br>Esse é o meu texto 1<br>Esse é o meu texto 1<br>Esse é o meu texto 1<br>Esse é o meu texto 1<br>Esse é o meu texto 1<br><br><br>Clique aqui para ver o tamanho dessa célula!<br><br><br></td>
	<td id="tb1_l2">Texto 2 na linha 2</td>
</tr>
</table>
</body>
</html>

[mikael 0]

Agradeço a todos pela ajuda e depois de ler sobre tableless na Wikipedia:

 

Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C [1], pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares. Para a disposição da página o recomendado seria usar CSS.

Wikipedia

 

Resolvi mudar de estilo de desenvolvimento. Novamente agradeço a todos pois usarei as duas soluções propostas por nosso amigos William Bruno e klonder.

Considero o problema resolvido!

 

Abraços e muito obrigado!