enlace en celda de tabla

[chefnelone]

Hola a todos

Me gustaria saber como hago para que al hacer click sobre celda de una tabla me destine a otra pagina.
O sea que toda la celda sea clickeable y no solo el texto que está dentro de la celda

<td align="left" valign="middle" background="Images/cuerpo1_barr_lat.gif">&nbsp;&nbsp;<span id="t1_1_11" class="ArialBold12">Portfolio</span></td>f
gracias

[JavierB]

Hola chefnelone

Código:

<td onclick = "location='tupagina.html'"...

Saludos,

[chefnelone]

gracias javier
me funciona... pero a medias. No aparece la mano( que indica que se pueda hacer click) y no se porque tengo que hacer 2 clicks para que funcione.
YO sabia que con dreamweaver se podian crear un area que para hacer click en cualquier lugar de pagina. No me acuerdo si es <div> y en las busquedas no se como buscarlo

[braulito]

Para que aparezca la mano:

Código:

td.link {
 cursor: pointer;
}

Código HTML:

<td clas="link" onclick="location='tupagina.html'" ...

Lo malo de todo esto es que el código está totalmente desordenado...

[fer10]

por que no metes un link como bloque es mas accesible y da mejores resultados que poner una td con javascript. y sin mencioanar sus posteriores mejoras..

[chefnelone]

me explicarias como es esto del link como un bloque

[Rafael]

dentro de tu tabla pon tal cual un a.

<td>
<a href="otro.htm" style="display: block; width: 120px; height: 60px; background-color: red;">
</td>

[fer10]

css:

.link{
width:100px;
height:100px;
}
.link a{
display:block;
height:100px;
background-color:#C0C0C0;
}
.link a:hover{background-color:#E0E0E0;}

html

Código HTML:

<table>
<tr>
	<td  class="link" ><a href="#">td1</a></td>
	<td>td12</td>
</tr>
<tr>
	<td>td3</td>
	<td>td4</td>
</tr>
</table> 

[chefnelone]

gracias fer.
lo hecho tal cual y funciona bien ....pero el texto me queda alineado arriba (TOP) verticalmente.
he probado de todo pero no lo puedo CENTRAR.

<td class="link" width="121" height="41" align="center" valign="middle" background="Images/Boton.gif"><a href="#">Estimates</a></td>-

.link{
width:121px;
height:41px;
}
.link a{
display:block;
width:121px;
height:41px;
}

[Rafael]

Aunque no sea Fer, y despreciaste mi opción :(
.link a{
display:block;
padding: 10px 20px;
}
Juega con eso.

[fer10]

jejej Rafael no me avia dado cuenta que ya avias puesto repuesta, a la mejor cuando hacia el documento pusiste tu el post... =(


effecitamente como dice Rafael usa paddings para acomodarlo..

lo que pasa es que tu estas poniendo la alineacion a la celda(td) pero ya a hora el link es tipo bloque, y el link mide lo que mide la celda de ancho y alto. entonces peudes alinearlo necesitas darle padding espacios dentro del objeto.

utlisa 4 valores para que entiendas mejor:
padding: 10px 20px 10px 20px;
el primero es top,right,bottom,left hacia las manellitas del reloj.

si pones 3
padding: 10px 20px 10px;
el primero es top, right &left , bottom

si pones 2:
padding: 10px 20px;
top & bottom , left & right

si pones 1:
aplica para todos igual.


nota: recuerda que existe un error al modelado de cajas con los paddings en ie "hack box model"
http://www.google.com.mx/search?hs=q...a=lr%3Dlang_es
el primer enlace te puede servir
http://www.torresburriel.com/box-model-hack.html

[chefnelone]

gracias ya voy a probar.

..y perdona rafael, no quise herir tus sentimientos . . (tomo los codigo con los que mi siento mas familiarizado...o sea que los entienda)

[AlZuwaga]

para alinear el texto dentro de "la caja"... ¿no conviene usar text-align (para el alineamiento horizontal) y un line-height con la mitad del alto de "la caja" (para el vertical)?

[fer10]

line-height no sirve si tiene mas de 2 lineas ya que ese solo es el tamaño de la linea..

pero igual y funciona depende lo que tengas dentro de ella si solo tienes una linea =).

[AlZuwaga]

Es cierto, había olvidado que sólo sirve cuando es sólo una línea. Además me confundí al decir que debe ser de la mitad del tamaño, debe ser del mismo alto.

[Rafael]

No estoy herido para nada. Al contrario, me obliga a poner explicaciones más claras.

Y si Fer, coincidimos varias veces a la hora que entramos al foro :).
Al Zuwaga, bien por proponer alternativas, así todos exploramos.

[anthemfor182]

Yo lo haría asi:

<td align="left" valign="middle"
background="Images/cuerpo1_barr_lat.gif"
style='cursor: pointer' onclick='window.location="url"'
>&nbsp;&nbsp;
<span id="t1_1_11" class="ArialBold12">Portfolio</span>
</td>

Espero sirva

[Rafael]

Respetable, aunque no veo necesidad de poner un gif, y usar javaScript en este caso.

[chefnelone]

lo he solucionado (o emparchado ) poniendo todo poniendo <a ...> una tabla completa</a>

Parece que con una tabla completa es mas facil que con una celda.

Seguro que no es la mejor solucion pero me funcionó

gracias

[fer10]

un elemento en linea y dentro un bloque..

yo tampoco creo que sea una buena solucion..

[Clandes]

Lo ideal es hacer un display: block; con css en <TD> y dentro de la celda hacer un <A...>&nbps;</a> (o algo asi).

Teniendo A el ancho y alto de la celda (tb por css)

[Rafael]

Un td ya es un bloque en cierto modo. No.

Lo que comenta Fer y lo que comento yo, no creo que sea encontrar artificios que pueden funcionar, pero no son correctos.

Un a de bloque dentro del td y ya.