Tecnología

Inicio

Cómo hacer un Clickable celda de tabla sin borde

Cómo hacer un Clickable celda de tabla sin borde


Las tablas son elementos de páginas web que contienen texto o controles. En algunos sitios Web, CSS se utiliza para controlar los menús de navegación de los usuarios. Puede hacer que las celdas de tabla o filas se puede hacer clic, por lo que los visitantes pueden utilizar estas células para desplazarse a otra ubicación en el Web. Esto es útil si desea rellenar las celdas de tabla con imágenes y colores de fondo y hacer clic una zona más grande que un botón o enlace proporciona. La creación de este efecto se puede hacer utilizando el código HTML.

Instrucciones

1 Crear una nueva tabla. Para este ejemplo, la tabla contendrá sólo una fila con una célula. Para crear una tabla sencilla para comenzar con, utilice el siguiente código:
<Table>
<Tr>

&lt;td>My Clickable Cell&lt;/td>

</ Tr>
</ Table>

2 Retire el borde de la celda. Una tabla se da una frontera de forma predeterminada. La siguiente adición a la "<table>" etiqueta elimina la frontera de la célula:
<Table border = "0">
<Tr>

&lt;td>My Clickable Cell&lt;/td>

</ Tr>
</ Table>

3 Dar la célula de un evento "onmouseover". Este evento se utiliza cuando el visitante pasa el ratón sobre la celda. También cambia el color, por lo que se da una indicación al visitante que la célula se puede hacer clic. También puede utilizar este evento para cambiar el cursor, por lo que los cambios a la mano puede hacer clic, por lo que es más intuitivo para el visitante. El siguiente código hace que estos cambios:
<Table border = "0">
<Tr>

&lt;td onmouseover=&quot;this.style.background='black';this.style.cursor='pointer'&quot;
onmouseout=&quot;this.style.background='white';&quot;>My Clickable Cell&lt;/td>

</ Tr>
</ Table>

4 Agregue el código que navega a una página después de que el usuario hace clic en la celda de tabla. Usted puede utilizar el evento "onclick" para cambiar la ubicación del navegador web en el dominio. El código siguiente muestra cómo utilizar la navegación con una celda de la tabla se puede hacer clic:
<Table border = "0">
<Tr>

&lt;td onmouseover=&quot;this.style.background='black';this.style.cursor='pointer'&quot;
onmouseout=&quot;this.style.background='white';&quot; onclick=&quot;window.location='myPage.htm'&quot;>My Clickable Cell&lt;/td>

</ Tr>
</ Table>