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.
Introducción
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.
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.
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.
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.
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.
Si tienes el punto de inserción en la tabla y no te aparece esa zona verde puedes activar su visualización seleccionando el menĆŗ Ver → Ayudas visuales → Anchos de tabla. De la misma forma se desactiva su visualización.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado. Si aparecen dos nĆŗmeros, el primer nĆŗmero corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo nĆŗmero es el ancho visual que aparece en la vista de diseƱo; por ejemplo, en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 pĆxeles pero al contener una imagen que necesita mĆ”s espacio, la columna ocuparĆ” realmente 142 pĆxeles (ancho visual de la columna tal como aparece en la pantalla).
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.
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 (en 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.) 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..
Formato CSS
Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS.
Los selectores.
Podemos definir una clase y aplicƔrsela a la tabla desde el panel Propiedades, o si es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.
Pero ¿y si queremos editar las propiedades de las etiquetas que forman la tabla? FijĆ©monos en el aspecto de la barra de estado cuando tenemos el punto de inserción en una celda:
Vemos que con el selector table nos referimos a la tabla completa. Con el selector tr hacemos referencia a las filas y con el selector td hacemos referencia a las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el selector th. Observa que no hay un selector para referenciar a las columnas enteras, aunque sà existe un método empleando etiquetas <col />, es mÔs avanzado y no lo veremos en este curso.
Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda que podemos emplear selectores compuestos. AsĆ para referirnos a las filas de una tabla con la clase miclase, lo haremos con el selector .miclase tr, y emplearemos .miclase td para referirnos sus celdas.
Nota: Si al crear una pÔgina definimos las propiedades del texto empleando las Propiedades de la pÔgina, Dreamweaver crea una regla con el selector body,td,th. Es decir, aplica el mismo estilo a la pÔgina, a las celdas y a los encabezados. Esto harÔ que por ejemplo, si cambiamos la fuente de la tabla, el cambio no se aplique ya que prevalece la generada por Dreamweaver, por ser mÔs concreta. Esto puede entrar muchas veces en conflicto. Para evitarlo, lo mejor es editar el selector dejÔndolo sólo como body. Recuerda que para editar un selector, podemos utilizar el panel Diseñador de CSS.
Propiedades.
Podemos aplicar la mayorĆa de propiedades que ya hemos empleado a las tablas, filas y columnas: fuente, tamaƱo, color, imagen de fondo.
Existen algunas propiedades CSS especĆficas de las tablas, como el borde colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes, asĆ que los veremos mĆ”s adelante.
Un estilo muy útil es el que nos permite centrar la tabla en la pÔgina. Para ello, debemos editar los mÔrgenes izquierdo y derecho (icono Diseño del Diseñador de CSS), estableciendo el valor auto para ambos.
Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo, no tenemos mƔs que crear una clase que, por ejemplo, cambie el color de fondo, y aplicarla a filas alternas.
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.
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)
Anidar, dividir y combinar celdas
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.
A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.
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 dĆ© 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.
1 | 2 |
3 | 4 |
Podemos combinar celdas en vertical y horizontal:
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.
En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el número de éstas.
Adaptar webs a distintas resoluciones
Siempre que se crea una pÔgina web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos tamaños y con distintas resoluciones. Desde las pequeñas pantallas de los portÔtiles de bajo coste, hasta monitores panorÔmicos en alta resolución.
Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en nuestra pƔgina: el diseƱo fijo y el diseƱo elƔstico.
- El diseƱo fijo especifica las medidas en pĆxeles. Por lo que el contenido siempre se mostrarĆ” del mismo tamaƱo, lo que facilita mucho el diseƱo. Por contra, se desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll" horizontal en monitores muy pequeƱos.
- El diseƱo elƔstico especifica las medidas en porcentajes. Esto hace que el contenido se adapte al tamaƱo de la ventana en la que se visualiza, lo que nos permite aprovecharla completamente. Por contra, en diseƱos elaborados, es mƔs complicado hacer que la pƔgina no se descuadre, sobre todo cuando es demasiado ancha o estrecha. Un ejemplo de este diseƱo es la pƔgina de este curso.
Como recordarĆ”s, el tamaƱo de las tablas puede ser definido en pĆxeles o en porcentaje. Cuando el tamaƱo de la tabla sea definido en pĆxeles, la tabla se verĆ” del mismo modo independientemente del tamaƱo de la ventana del navegador. En cambio, cuando el tamaƱo de la tabla sea definido en porcentaje, la tabla se ajustarĆ” al tamaƱo del elemento que la contiene, lo cual implica que el contenido de la tabla se puede descuadrar.
Si modificas el tamaƱo de la ventana, verĆ”s que la tabla es siempre del mismo tamaƱo. Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldrĆa a visualizar la pĆ”gina en un monitor grande con alta resolución), a los lados de la tabla aparecerĆ” un gran espacio vacĆo.
Si modificas el tamaño de la ventana, verÔs que las tablas se ajustan a ella. Usar tablas con tamaño variable tiene también un gran inconveniente, ya que si maximizas la ventana del navegador apreciarÔs claramente cómo el contenido de las tablas se descuadra, quedando demasiado estirado, lo que dificulta su lectura.
En un principio puede parecer mĆ”s conveniente utilizar tablas con tamaƱo fijo, aunque esto implique que aparezca el hueco vacĆo a la derecha, en el caso de los monitores con alta resolución. Pero con un poco de prĆ”ctica a la hora de manejar las tablas, puedes salvar el inconveniente del descuadre de la pĆ”gina y asĆ definir pĆ”ginas con tamaƱo en porcentaje que aprovechen el ancho cuando el monitor de mĆ”s grande.
No solo puede establecerse el tamaƱo de la tabla, tambiƩn es posible establecer el tamaƱo de las celdas.
El tamaƱo de la celda a travƩs del inspector de propiedades estarƔ especificado por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la altura.
Los valores An y Al de una celda siempre estĆ”n en PĆxeles. En la imagen anterior, la celda no tiene una anchura concreta, se ajusta al contenido. Si la queremos exactamente de de 200 pĆxeles, basta con introducir 200px en An.. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An. habrĆa que escribir 25%.
Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qué contiene cada una de ellas (imÔgenes, texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar la pÔgina en monitores de distintos tamaños y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribución del contenido de la tabla no se vea muy afectado por el cambio de tamaño de la ventana del navegador.
No hay comentarios:
Publicar un comentario