Tablas

Tablas

La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas.

Esta característica de las tablas provocó que fueran muy utilizadas para basar en ellas el diseño de una página web. Aún hoy en día es fácil encontrar páginas cuya estructura está basada en una tabla. Sin embargo, gracias al desarrollo de nuevas etiquetas de HTML 5(como <article>, <section>), de capas (<div>) y propiedades CSS, esto no sólo ya no es necesario, sino además no es una práctica recomedable. Las tablas no fueron pensadas para servir como base para el diseño, por lo que no crean una estructura clara y pueden ocasionar problemas al analizar nuestra web con herramientas automáticas, como los bots(robots) que indexan el contenido para los buscadores.

Más adelante veremos cómo maquetar correctamente una página web utilizando las herramientas adecuadas para ello.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.

8.2. Insertar una tabla

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.

En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla.

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica la proporción de la tabla respecto a la página (o del elemento contenedor) y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.

.3. Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.

		imagen y texto			C O L U M N A
		Texto dentro de una celda
		CELDA
FILA

Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el punto de inserción dentro de la celda deseada haciendo clic. El elemento lo insertaremos como hemos visto hasta ahora.

Si queremos insertar elementos ya existentes en la celdas, tenemos que crear primero la tabla vacía, y después seleccionar y arrastrar los elementos a insertar sobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como hacíamos, por ejemplo, con las listas.

 Para practicar puedes realizar el ejercicio paso a paso Crear y rellenar una tabla.

8.4. Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando el punto de inserción en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla.

También es posible seleccionar una pulsando con el ratón sobre el borde exterior que la rodea, o pulsando <table> que aparece en la barra de estado de la ventana de documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna. Al pulsar sobre los anchos, éstos se convierten en botones que despliegan menús (menú de encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten acceder rápidamente a determinados comandos relacionados con la tabla.

En este menú vemos que también tenemos las opciones para Borrar o Igualar los anchos.

Si en una tabla no indicamos los anchos, estos se ajustarán al contenido.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas.

Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que más te gusta. Estas son las formas de selección:

• Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna (zona verde de anchos) esto sólo es válido para seleccionar una columna.
• Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s completamente.
• También puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.
• En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la celda.

Para seleccionar celdas:

• Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón mientras se arrastra sobre las celdas deseadas.
• Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas.