Foros del Web » Creando para Internet » HTML »

Enlazar una celda de una tabla

Estas en el tema de Enlazar una celda de una tabla en el foro de HTML en Foros del Web. Tengo una tabla. En cada celda hay texto, y quiero que cada celda vaya enlazada a otra dirección. Pero la cuestión es que no quiero ...
  #1 (permalink)  
Antiguo 02/09/2010, 10:53
 
Fecha de Ingreso: agosto-2010
Mensajes: 56
Antigüedad: 7 años, 3 meses
Puntos: 0
Pregunta Enlazar una celda de una tabla

Tengo una tabla. En cada celda hay texto, y quiero que cada celda vaya enlazada a otra dirección. Pero la cuestión es que no quiero que el enlace sea el texto de dentro de la celda, sino la propia celda, de modo que al hacer click dentro aunque no sea sobre el texto me redireccione al destino en cuestión.

He pensado en hacerlo con un gestor de eventos "click" en JavaScript porque el caso es que así funciona, pero el problema es que hecho de esta forma cuando el cursor entra en la celda nada le indica al usuario que se encuentra en un enlace: ni cambia el cursor, ni aparece la ruta de destino en la barra de estado, en fin...

¿Alguna forma de conseguirlo utilizando sólo HTML y CSS?

¡Gracias!
  #2 (permalink)  
Antiguo 02/09/2010, 11:24
 
Fecha de Ingreso: abril-2008
Mensajes: 40
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Enlazar una celda de una tabla

Buenas dersir,

Esto es lo que pides, HTML y CSS:

Código HTML:
<table border=1>
<tr>
<td><a href="www.tuweb.com"><div style="background-color:red; height:100px; width:102px;">Texto 1</div></a></td>
<td><a href="www.tuweb.com"><div style="background-color:yellow; height:100px; width:102px;">Texto 2</div></a></td>
<td><a href="www.tuweb.com"><div style="background-color:green; height:100px; width:102px;">Texto 3</div></a></td>
</tr>		
</table> 

Un saludo.
  #3 (permalink)  
Antiguo 02/09/2010, 11:37
 
Fecha de Ingreso: agosto-2010
Mensajes: 56
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Enlazar una celda de una tabla

¡Gracias! La única pega que me encuentro ahora es que el texto sale en la parte superior de la celda, en lugar de salir en el centro vertical. Como la celda es de 100 x 100 píxeles, el texto tiene que estar centrado tanto horizontal como verticalmente. ¿Alguna sugerencia?
  #4 (permalink)  
Antiguo 02/09/2010, 13:04
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Enlazar una celda de una tabla

dersir:

Utilizando javascript puede que te resulte más practico

<td class="link" onclick="window.location='URL' ">texto</td>

y darle un poco de color con css para que resalten los links


td.link{
color: #000;
}

td.link:hover {
color: blue;
}

podrias hacerlo sobre el background-color en lugar del color.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 02/09/2010, 18:19
 
Fecha de Ingreso: agosto-2010
Mensajes: 56
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Enlazar una celda de una tabla

Lo intenté con JavaScript pero el problema es que cuando el vínculo se genera a través de un evento "click" en lugar de un <a> el cursor no cambia al situarse sobre él ni tampoco se indica la dirección del enlace en la barra de estado del navegador, con lo cual nada indica al usuario que debe hacer click en ese lugar.

Seguiré probando, ¡un saludo!
  #6 (permalink)  
Antiguo 02/09/2010, 18:32
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Enlazar una celda de una tabla

dersir:

En primer lugar el evento "click" no existe, se denomina "onclick", tal cual te lo puse en mi ejemplo
Por lo de la "manito" en el cursor, basta con que en el CSS agregues
cursor: pointer;
en cuanto a la barra de estado, se soluciona con
onmouseover="self.status='lo que quieras'; return true;"

yo me limité a responder a tu post original, te recomiendo que en lugar de seguir pidiendo ayuda empieces a leerte algún manual básico de los temas involucrados.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 02/09/2010, 18:46
 
Fecha de Ingreso: agosto-2010
Mensajes: 56
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Enlazar una celda de una tabla

Perdón, dije "click" en lugar de "onclick" porque yo hago el JavaScript basado en el estándar de la W3C, que dice que todas las funciones deben ir en el archivo .js y que los receptores de eventos se crean de la forma (por ejemplo):

document.getElementById("objeto").addEventListener ("click", funcion_que_sea, false);

Y en este caso sí que es "click", pero sabía lo que querías decirme ;) De todas formas muchas gracias con lo del cursor y la barra de estado, creo que eso justo me va a solucionar el problema.

¡Saludos!
  #8 (permalink)  
Antiguo 02/09/2010, 18:56
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Enlazar una celda de una tabla

De acuerdo pero fijate, y es tan solo un ejemplo


<!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>Documento sin t&iacute;tulo</title>

<script type="text/javascript">
var win= null;
function VentanaCentrada(pagina,w,h,nombre){
var winleft = (screen.width-w)/2;
var wintop = (screen.height-h)/2;
caracteristicas='height='+h+',width='+w+',top='+wi ntop+',left='+winleft+',scrollbars=no,toolbar=no'
win=window.open(pagina,nombre,caracteristicas)
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}
</script>
</head>
<body>
<a href="http://google.com/" onclick="VentanaCentrada('http://google.com/','710','548','Popupuno');return false;" > Abrir Popup </a>
</body>
</html>


ese código valida perfectamente para la W3C y no tiene ningún .js externo
asi que debes ser muy preciso con lo que dices

Cita:
que dice que todas las funciones deben ir en el archivo .js
Eso es sólo una recomendación, y se aplica a un Doctype específico

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 02/09/2010, 19:30
 
Fecha de Ingreso: agosto-2010
Mensajes: 56
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Enlazar una celda de una tabla

Quizás estoy equivocado, yo decía eso porque es lo que me ha parecido entender en http://www.dhtmlya.com.ar. Prestaré más atención a lo que lea en adelante ;)
  #10 (permalink)  
Antiguo 02/09/2010, 22:30
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Enlazar una celda de una tabla

Si, las páginas de *ya tienen muy buenas guias, más de una vez las he visitado.
A lo que me refiero es que debemos ser muy precisos en nuestros enunciados ya que estamos trabajando sobre lenguajes que no admiten ambigüedades, se que a veces uno tiene muy en claro un concepto en la cabeza, pero a la hora de tratar de explicarlo con palabras no es lo mismo, y terminamos generando confusiones o dando por cierto argumentos que no lo son.

Te pongo un ejemplo, vos decís
Cita:
tampoco se indica la dirección del enlace en la barra de estado del navegador, con lo cual nada indica al usuario que debe hacer click en ese lugar
Analicemos, ¿Sabés cuantos no tienen idea de que en la barra del navegador a veces se ve la url de un link? y digo a veces porque alguien podría usar un link clasico con <a> pero a su vez forzar un mensaje en la barra de estado con javascript. Justamente para hacer una referencia visual de lo que contiene o acciona un elemento existe un atributo (que es comun a la mayoria de los tags), llamado title.

Siempre tené en cuenta que todo esto lo desarrollaron personas que de seguro saben mas que vos, que yo y que la mayoria de quienes posteamos en este foro, y nada es arbitrario. Hay mucho que leer, y perdé cuidado que a mi también me pasa, que en el vértigo por encontrar una solución urgente a algo, no leemos lo suficiente.

Espero no haberme puesto muy pesado, y de seguro ya nos cruzaremos en algún otro post.

Un saludo
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: celda, enlace, link, vinculo, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:10.