En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.
1. Introducción
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.
La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas.
Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una práctica recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automáticas. Para maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.
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íxeleses 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 el porcentaje de la página o del elmento 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.
En Resumen: podemos indicar una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.
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.
4. Formato de tabla
Las propiedades de la tabla se especifican a través de su inspector de propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.
A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la celda.
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.
La parte superior del inspector de propiedades nos permite alternar entre las propiedades HTML, que en este caso sirven para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir los estilos.
La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (que es preferible definir con CSS), la alineación del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.) (en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc..
5. Cambiar tamaño de tabla y celdas
Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An(anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura.
Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la ventana.
No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.
6. Añadir y eliminar filas y columnas.
Existen varias formas de añadir y eliminar filas y columnas a una tabla.
Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menúModificar. En ambos casos aparece la opción Tabla.
Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.
La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.
También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán.
Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla.
También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr).
7. Anidar, dividir y combinar celdas
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.
Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto.
Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el título de la tabla, normalmente más ancho. En este caso habría que combinar todas las celdas de la primera fila en una sola.
Mientras que dividir celdas consiste en partir en dos una celda.
Una de las formas de dividir y combinar celdas es a través del inspector de propiedades.
Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón 
del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del menú Modificar.
Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya combinación pueda dar como resultado otra celda, es decir, que su combinación de como resultado un rectángulo. No podemos combinarlas para formar una "L". Por ejemplo, en la siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda. del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del menú Modificar.| 1 | 2 |
| 3 | 4 |
Para dividir una celda hay que pulsar sobre el botón 
del inspector de propiedades, o sobre la opción Dividir celda de la opción Tabla.
No hay comentarios:
Publicar un comentario