Cómo hacer que las celdas de tabla HTML sean elementos interactivos

Por kevin lee
Los clic permiten que los seres humanos y las computadoras se comuniquen. Haz clic en un botón o un enlace y tu computadora responderá.
Hemera Technologies/AbleStock.com/Getty Images

Los clic permiten que los seres humanos y las computadoras se comuniquen. Haz clic en un botón o un enlace y tu computadora responderá. Las tablas HTML que aparecen en páginas web a menudo consisten en datos estáticos ante los visitantes del sitio en un formato tabular. Si alguien hace clic en la celda de una tabla, a veces no sucede nada. Al añadir una función corta de JavaScript a tu página, puedes convertir cualquier celda de la tabla en un enlace interactivo que te envíe a otro sitio web o que realice otra acción

Paso 1

Inicia el editor HTML o el Bloc de notas y abre un documento HTML.

Paso 2

Pega el código que se muestra a continuación al documento:

Celda normal Celda normal
Haz clic aquí para visitar la Casa Blanca Haz clic para ejecutar una función JavaScript

Este código crea una tabla que contiene dos filas y dos columnas. Las etiquetas "td" definen la celda de la tabla. Cualquier cosa entre esas celdas se convierte en parte de ella. Observa las dos etiquetas de anclaje que aparecen en las dos últimas celdas. Los puntos de atributo "href" del primer anclaje a la página web de la Casa Blanca. La siguiente etiqueta de anclaje añade un evento "onclick" al mismo. Este evento llama función de alerta de JavaScript.

Paso 3

Guarda el documento HTML y ábrelo en cualquier navegador. Aparecerá la tabla. Mueve el cursor del ratón sobre las celdas de la tabla. El cursor cambia a un puntero cuando lo mueves sobre las últimas dos celdas de la tabla.

Paso 4

Haz clic en el enlace "Haz clic aquí para visitar la Casa Blanca". El explorador irá al sitio de la Casa Blanca. Haz clic en el enlace "Haz clic para ejecutar una función JavaScript". La función de alerta funciona y muestra un cuadro de mensaje emergente.