Tablas
Qué es una tabla
En HTML tenemos la posibilidad de presentar información estructurada gracias a la posibilidad de crear tablas. Básicamente, una tabla es una estructura compuesta por Filas y Columnas en las que en cada celda resultante podemos incluir cualquier tipo de información. Aprovechando este tipo de estructura podemos presentar de una manera muy ordenada información variada, como calendarios de actividades, datos de una hoja de cálculos, estadísticas, etc..
Si no ha visto anteriormente una tabla, observe el siguiente ejemplo:
Como verá, en la estructura anterior tenemos una tabla compuesta de 3 columnas y 3 filas, de manera que se definen 9 celdas en las que presentar la información. Este tipo de estructura le resultará familiar si ha trabajado anteriormente con hojas de cálculo o con bases de datos, ya que este tipo de aplicaciones suelen presentar la información de esta manera.
La marca HTML que define una tabla es <TABLE> </TABLE>. Esta directiva marca el comienzo y el final de una tabla. Dentro de esta marca, definiremos las distintas filas con la marca <TR> </TR> y dentro de cada fila, insertaremos las columnas que queramos con la marca <TD> </TD>, o <TH> </TH> si queremos que la celda en cuestión sea una cabecera.
Definir tablas en HTML es un proceso muy tedioso y matemático. Cuando se define una fila, esta puede tener las columnas que queramos, teniendo en cuenta que el resto de las filas automáticamente tendrá el mismo número de columnas. Es decir, no puede existir una tabla que tenga 3 columnas en una fila y 2 columnas en otra.
Por otro lado, a la hora de definir una tabla hay que tener en cuenta que el ancho máximo de una celda en la misma columna, marca el ancho de las demás celdas en la misma columna, como es lógico pensar. De igual forma, la altura máxima de una celda, marca la altura de las demás celdas de la misma fila. Esto es así, porque las divisiones entre filas y columnas ha de ser regular para mantener el aspecto de tabla.
Para dar mayor flexibilidad a la composición de tablas, existe la posibilidad de "unir" dos o más celdas colindantes entre si, pasando a formar una sola. A continuación tenemos un ejemplo de una tabla en la que se han unido algunas celdas entre sí:
Observe como al unir entre si dos columnas o dos filas, la celda resultante adopta el tamaño necesario para mantener la estructura de tabla con respecto a las demás celdas. Por tanto, si unimos dos celdas de distintas columnas entre si, el ancho de esta celda será el equivalente al ancho de las dos columnas. De igual forma, si unimos dos celdas de distintas filas entre sí, el alto de esta celda resultantes será el equivalente al alto de las dos filas. Puede que aparente ser algo complicado, pero en realidad es bastante lógico: En todo momento la estructura de la tabla ha de mantenerse teniendo en cuenta que la división entre filas y columnas ha de ser regular o lo que es lo mismo, todas las celdas de la misma columna han de tener el mismo ancho y todas las celdas de la misma fila han de tener el mismo alto.
Para unir dos celdas de distintas filas entre sí se utiliza la marca HTML <ROWSPAN>. Para unir dos celdas de distintas columnas entre sí se utiliza la marca <COLSPAN>. El caso más simple de unión entre celdas es aquel en el que se unen dos celdas, aunque podemos unir entre sí tantas celdas como queramos e incluso unir celdas de distintas columnas y filas entre sí, siempre y cuando estas celdas sean colindantes.
Una vez hemos definido una tabla, podemos ajustar varios factores de su aspecto visual. En primer lugar podemos ajustar el grosor del Borde. Como hemos visto en las tablas mostradas anteriormente, las distintas celdas y columnas se definen gracias a una línea que marca la separación entre las distintas celdas, así como los bordes de la tabla. Este borde puede tener un grosor variable, ajustado por el diseñador en el parámetro HTML, de la marca <TABLE>, BORDER.
Otra de las opciones que se pueden ajustar es la separación entre celdas. Podemos hacer que las celdas estén más o menos separadas entre sí con el parámetro HTML CELLSPACING.
Podemos también ajustar los márgenes internos de una celda, usando el parámetro CELLPADDING. Con este parámetro marcamos la distancia entre los bordes de una celda y su contenido.
En cualquiera de las tres opciones anteriores podemos ajustar el valor "0". Ajustando los valores del borde a "0", hacemos que este sea invisible. Ajustando los valores de CELLSPACING o de CELLPADING a "0", hacemos que la distancia entre celdas o los márgenes interiores de estas sea nula.
Definiendo una tabla en Dreamweaver
Todo el tedioso proceso de planificación y definición de una tabla en HTML se ve extremamente simplificado en Dreamweaver. Lo único que en principio necesitamos saber es el número de columnas y de filas que queremos para nuestra tabla, así como el ancho que tendrá esta. El ancho puede venir dado por pixeles o por porcentajes de la ventana. En este último caso, el ancho de la tabla será variable en función al tamaño que la ventana del navegador tenga en cada momento.
Para insertar una tabla en Dreamweaver:
- Posicione el cursor en el punto del documento en el que quiere insertar la tabla.
- Con el cursor posicionado en el punto en que quiere insertar la tabla, seleccione menú Insert > Table.
En la imagen superior tenemos el aspecto de la ventana en la que podremos definir la tabla que queremos insertar. Veamos los parámetros que podemos ajustar:
- Rows: En este campo insertamos el número de filas que queremos para nuestra tabla.
- Columns: En este campo insertamos el número de columnas que deseamos para nuestra tabla.
- Width: en este campo podemos definir el ancho que deseamos para la tabla que estamos definiendo. El ancho, como dijimos anteriormente, se puede definir en pixels o en términos porcentuales. Podemos elegir el tipo de medida que vamos a introducir haciendo uso de la lista desplegable que hay junto a este campo. Una vez elegida el tipo de medida, podemos introducir el valor deseado en el campo de texto.
- Border: En este campo introducimos el valor para el borde de la tabla. Si insertamos el valor 0, la tabla no tendrá borde visible.
- Cell Padding: En este campo introducimos la cantidad que deseamos para los márgenes interiores de las celdas de la tabla.
- Cell Spacing: En este campo introducimos la cantidad deseada para la separación entre celdas de la tabla.
Una vez definida la tabla adecuadamente, podemos hacer click en "OK" y la tabla aparecerá en el punto en el que habíamos escogido con el cursor.
Si lo deseamos, podemos insertar una tabla haciendo uso de la paleta Objects > Common > Table, en lugar de utilizar la opción disponible en el menú Insert.
Modificando una tabla
Una vez creada la tabla, podemos cambiar las propiedades establecidas inicialmente, bien para insertar más filas, o más columnas, cambiar el Cell Spacing o ajustar las dimensiones de la tabla a un nuevo tamaño.
Para ello, utilizaremos las opciones disponibles en el menú Modify > Table:
En este menú tenemos gran parte de las distintas opciones que tenemos para modificar una tabla en Dreamweaver. Algunas de estas opciones permiten modificar parámetros generales de una tabla, otras están orientadas a modificar opciones de una o varias celdas seleccionada, sin afectar al resto. Por ello, dependiendo de si tenemos seleccionada la tabla entera o parte de ella, algunas opciones aparecerán disponibles y otras no.
Veamos para que sirven cada una de las opciones:
- Select Table: Si tenemos el cursor posicionado en cualquier celda del interior de una tabla, podemos utilizar este comando para seleccionar la tabla entera. También podemos seleccionar la tabla entera haciendo click sobre el "tag" HTML "TABLE" que aparece en la parte inferior izquierda de la ventana del documento.
- Merge Cells: Si seleccionamos varias celdas colindantes entre si, podemos utilizar esta opción para unir estas celdas entre sí para crear una única celda con la suma de todas ellas. Dreamweaver añadirá por nosotros los parámetros COLSPAN y/o ROWSPAN necesarios para realizar esta unión.
| TRUCO: Para seleccionar una o varias celdas de una tabla, basta con pulsar el botón izquierdo del ratón y sin soltarlo, arrastrar por las celdas que queremos seleccionar. A medida que vayamos seleccionando distintas celdas, estas irán apareciendo con un borde negrita, indicativo de que han sido seleccionadas.
Otra manera de seleccionar distintas celdas es posicionar el cursor en una de las celdas, en este momento esta sería la celda seleccionada. A continuación, haciendo Mayúsculas + Click en otra celda, sumaremos esta a la selección actual.
Finalmente, podemos escoger una celda haciendo click sobre el "tag" HTML <TD> que aparece en la parte inferior izquierda de la ventana. O podemos hacer click sobre el "tag" <TR>, en cuyo caso seleccionaremos la fila entera. |
- Split Cell: Cuando hemos unidos varias celdas entre sí, o si deseamos dividir una celda en otras más pequeÒas, podemos utilizar esta opción para hacerlo. Primeramente seleccionamos la celda que queremos dividir. Una vez seleccionada la celda, utilizamos esta opción que nos dará paso a la siguiente ventana:
En esta ventana, escogemos si queremos dividir la celda seleccionada en Filas (Rows) o en Columnas (Columns). Una vez decidida esta cuestión, decidimos en cuantas Filas o Columnas queremos dividir la celda. Una vez hechos los ajustes, haremos click en "OK" y Dreamweaver ajustará los parámetros HTML necesarios para realizar la división.
- Insert Row: Con este parámetro podemos insertar una nueva fila en la tabla. La fila se insertará inmediatamente por encima de la fila que se encuentre seleccionada.
- Insert Column: con este parámetro podemos insertar una nueva columna en la tabla. La columna se insertará a la izquierda de la columna que se encuentre seleccionada.
- Insert Rows or Columns: con esta opción podemos insertar varias Filas o Columnas a la tabla de una sola vez. Al seleccionar esta opción nos aparece una ventana similar a la siguiente:
En esta ventana, primeramente decidimos si queremos insertar Filas (Rows) o Columnas (Columns). Después escogemos el número de Filas o Columnas que queremos insertar. Por último, tenemos la opción de indicar donde se insertarán las filas o columnas: Antes o Después de la Fila/Columna seleccionada.
- Delete Row: con esta opción eliminamos la fila seleccionada y todos sus contenidos de la tabla seleccionada.
- Delete Column: con esta opción eliminamos la columna seleccionada y todos sus contenidos de la tabla seleccionada.
- Increase Row Span: Realiza una suma de la celda actual con la celda de la fila inferior.
- Increase Column Span: realiza una suma de la celda actual con la celda de la columna posterior.
- Decrease Row Span: cuando dos celdas de distintas filas hubieran sido sumadas, podemos utilizar esta opción para restar una de las celdas de la suma actual.
- Decrease Column Span: cuando dos celdas de distintas columnas hubieran sido sumadas, podemos utilizar esta opción para restar una de las celdas de la suma actual.
- Clear Cell Heights: En una tabla, podemos definir un alto y un ancho para cada una de las celdas, como veremos posteriormente. Con esta opción podemos eliminar todos los "altos" que hubieran sido definidos para las celdas de una tabla.
- Clear Cell Widths: De manera similar a la anterior, podemos utilizar esta opción para eliminar los "anchos" que hubieran sido definidos manualmente para las celdas de una tabla.
- Convert Widths to Pixels: con esta opción podemos hacer que los anchos de las celdas de una tabla se ajusten individualmente a pixels. Al hacer esto, todas las celdas de la tabla tendrán su propio ancho definido en pixels.
- Convert Widths to Percent: con esta opción podemos hacer que los anchos de las celdas de una tabla se ajusten individualmente a porcentajes sobre el ancho de la tabla. Al hacer esto, todas las celdas de la tabla tendrán su propio ancho definido en porcentaje del ancho total de la tabla.
Ajustar las propiedades de una tabla en la paleta Propiedades
Cuando seleccionamos una tabla en el documento, la paleta Propiedades muestra una serie de herramientas que permiten modificar distintos aspectos de la tabla seleccionada. Veamos cuales son estos controles:
- Table name: En este campo podemos poner un nombre a la tabla seleccionada. Esta opción puede ser útil para identificar la tabla en cuestión, de manera que pueda ser referenciada en algunos procesos de HTML Dinámico o en algunos lenguajes de "scripting".
- Anchos y Altos: Estos cuatro controles son los equivalentes a: Clear Cell Heights, Clear Cell Widths, Convert Widths to Pixels y Convert Widths to Percent. Por este orden de izquierda a derecha y de arriba a abajo.
- Rows: En este campo se muestra el número de filas de la tabla actual. Podemos modificar este valor para añadir o restar filas a la tabla actual.
- Cols: En este campo se muestra el número de columnas de la tabla actual. Podemos modificar este valor para añadir o restar columnas a la tabla actual.
- W: En este campo se muestra el ancho de la tabla seleccionada. La medida puede venir dada en pixels o en términos porcentuales. de la ventana del navegador, según sea el tipo de medida escogido en la lista desplegable junto a este campo. Podemos modificar el ancho de la tabla modificando este valor.
| NOTA: El ancho de una tabla será automáticamente modificado si fuera necesario para mostrar todos los contenidos de la tabla. Dicho de otra manera, el ancho de una tabla no puede ser inferior al ancho de los contenidos de una tabla. |
- H: En este campo se muestra el alto de la tabla seleccionada. La medida puede venir dada en pixels o en términos porcentuales. de la ventana del navegador, según sea el tipo de medida escogido en la lista desplegable junto a este campo. Podemos modificar el alto de la tabla modificando este valor.
| NOTA: Al igual que con el ancho de una tabla, la altura nunca podrá ser inferior a la altura de los elementos contenidos en la tabla. Si dejamos este campo vacío, la altura de la tabla se irá ajustando según la altura de los distintos elementos que se vayan añadiendo en cada fila. |
- CellPad: En este campo podemos ajustar o reajustar los márgenes que deseamos para las celdas de una tabla.
- CellSpace: En este campo podemos ajustar o reajustar el espacio que deseamos que haya entre las distintas celdas de una tabla.
- Align: En esta lista desplegable podemos ajustar la alineación que deseamos para nuestra tabla dentro del documento. Esta alineación puede ser, al igual que con el texto, izquierda, centrada o derecha.
- Border: En este campo ajustamos o reajustamos el ancho del borde de la tabla.
- VSpace: En este campo ajustamos el espacio vertical que guardaran como distancia los elementos que rodean a la tabla.
- HSpace: En este campo ajustamos el espacio horizontal que guardaran como distancia los elementos que rodean a la tabla.
- Light Brdr: El borde de una tabla, así como las líneas que separan las distintas celdas de una tabla simulan un pequeño relieve, con un lado iluminado y otro en sombra. Por defecto, tanto el lado iluminado como el lado en sombra muestran unos colores. Podemos utilizar este control para escoger el color que deseamos para el lado iluminado del borde de una tabla.
- Dark Brdr: Este parámetro permite ajustar el color de la "sombra" para el borde de una tabla.
- Bg: Una tabla puede tener definida una imagen de fondo, distinta de la imagen de fondo del documento. En este campo podemos añadir la URL de la imagen que servirá de fondo para la tabla. Al igual que en otras ocasiones, podemos utilizar el "punto de mira"¨o la "carpeta" que hay junto a este campo para seleccionar el fichero que deseamos como fondo y que Dreamweaver calcule automáticamente la URL de este fichero.
- Bg: En este campo podemos ajustar el color de fondo para la tabla. Este color de fondo es exclusivo para la tabla y no tiene porque ser coincidente con el color de fondo del documento.
- Brdr: cuando la tabla tiene definido un borde, podemos usar este parámetro para ajustar un color para el borde de la tabla que no sea el que se usa por defecto.
| NOTA: El comportamiento de los ajustes de color del borde de una tabla, los colores de fondo o la utilización de imágenes de fondo, no es el mismo en todos los navegadores. Antes de decidirnos por un ajuste o por otro, conviene comprobar la visualización de estos ajustes al menos en los dos navegadores mayoritarios: Netscape y Explorer. |
Ajustar las propiedades de las celdas de una tabla, usando la paleta Propiedades
Cuando tenemos seleccionada una de las celdas de una tabla, la paleta Propiedades presenta una serie de controles que permiten ajustar y modificar distintos aspectos relacionados con las celdas de una tabla.
En la imagen superior se observa el aspecto de la paleta Propiedades cuando el cursor esta posicionado en una de las celdas de una tabla. La parte superior de la paleta Propiedades (en oscuro), permite ajustar parámetros relacionados con el contenido de la celda. Así, si la celda contuviera texto, aparecerían los parámetros relacionados con la edición de texto, que ya conocemos.
En la parte inferior aparecen los controles relacionados con la celda de la tabla. Veamos para que sirven cada uno de estos controles:
- "Merge" y "Split": estos dos controles gráficos son los equivalentes a "Merge Cells" (Unir celdas) y a "Split Cell" (dividir celdas), respectivamente.
- Horz: En esta lista desplegable podemos elegir cual será la alineación horizontal para los elementos contenidos en la celda seleccionada. Podemos escoger entre alineación Izquierda, centrada y derecha.
- Vert: En esta lista desplegable podemos ajustar la alineación vertical para los elementos contenidos dentro de la celda seleccionada. Podemos escoger entre: Top (superior), Middle (centro), Bottom (Inferior) o Baseline, que ajusta la alineación a una imaginaria línea base, para que todas las celdas muestren sus contenidos, especialmente cuando se trata de textos, alineados a la misma altura y no haya "saltos de alineación" entre los textos de distintas celdas de la misma tabla.
- W: Este campo permite ajustar o reajustar el ancho de la celda seleccionada. El ancho se puede ajustar en pixels, o en términos porcentuales. del ancho de la tabla, en cuyo caso hay que incluir el símbolo "%" al final de la cantidad en cuestión.
- H: Permite ajustar o reajustar el alto de la celda seleccionada. El alto se puede ajustar en pixels, no siendo recomendable utilizar términos porcentuales. en esta medida, ya que esta opción no es correctamente interpretada por prácticamente ningún navegador.
- Bg: Cada celda de una tabla puede tener su propia imagen de fondo, independiente del resto de las celdas de la tabla. Podemos incluir la URL del fichero que deseamos como fondo en este campo, o podemos utilizar el "punto de mira" o la "carpeta" contiguas para elegir el fichero y que Dreamweaver calcule la URL automáticamente.
- Bg: En este campo podemos definir el color que deseamos para la celda seleccionada. Podemos escoger uno de los colores que aparecen en la paleta desplegable o introducir manualmente el nombre de este color en el campo de texto.
- Brdr: En este parámetro podemos ajustar el color del borde que define exclusivamente esta celda, sin afectar al resto de los bordes de la tabla.
- No Wrap: Por defecto, cuando introducimos texto, o cualquier otro elemento, en una celda de una tabla, al llegar a los límites de anchura definidos para la celda, el texto es forzado a saltar de línea. De esta manera, el contenido de la celda es forzado a ajustarse al tamaño definido para esta, siempre que esto es posible. Cuando el contenido de una celda es indivisible, como en el caso de una imagen, lógicamente no hay manera de forzar el ajuste al tamaño especificado para la celda. De todas formas, podemos desactivar esta opción de ajuste activando esta "checkbox".
- Header: Activando esta "checkbox", indicamos que el contenido de la celda seleccionada no es un contenido normal, sino que es una celda "cabecera" o también llamada "TITULAR". En ese caso, la celda no se define con la marca HTML <TD>, sino con la marca <TH>. Es común definir las celdas de la primera fila como cabeceras, aunque nada impide definir cualquier otra celda de cualquier otra fila como tal. Al definir una celda como cabecera, el contenido se mostrará resaltado con respecto al resto de las celdas.
| NOTA: al igual que ocurría con los ajustes generales de la tabla que afectaban al color del borde, imágenes o colores de fondo, las opciones equivalentes que se pueden ajustar para una celda de una tabla tampoco están igualmente soportadas por los distintos navegadores. Conviene previsualizar el resultado de los ajustes en los dos navegadores mayoritarios antes de decidirse por unos ajustes u otros. |
| TRUCO: Muchos de los ajustes relacionados con las tablas y las celdas de las tablas son accesibles también a través del menú contextual que aparece en Dreamweaver cuando se hace Click Derecho (PC) o CTRL + Click (Mac), sobre un elemento en el documento.
Este menú contextual, al igual que la paleta de Propiedades, muestra opciones relacionadas con el elemento con el que se esta trabajando y puede resultar más cómodo para trabajar que el buscar opciones por los distintos menús de Dreamweaver. |
En ocasiones, cuando ajustamos distintos valores en una tabla o en la celda de las tablas, los cambios introducidos no se visualizan inmediatamente. Para forzar a Dreamweaver que los cambios introducidos en el HTML se visualicen en el modo de edición visual del documento, podemos usar Commands > Apply Source Formatting.
Si después de haber utilizado este comando, la tabla no se reajusta, es porque alguno de los elementos de la tabla o de sus contenidos no permite el reajuste seleccionado. Esto es bastante común cuando, por ejemplo, ajustamos una tabla para que tenga un ancho determinado y uno de sus contenidos tiene un ancho mayor que el ancho ajustado para la tabla. En ese caso, el ancho del elemento marcará el ancho de la tabla. Algo similar puede ocurrir con el alto de las celdas de una fila.
En otras ocasiones, cuando trabajamos con tablas complejas, en la que se han definido distintas uniones y divisiones entre celdas, la inserción/supresión de una línea o columna puede tener resultados inesperados. Hay que tener en cuenta en esos casos que una celda mezclada ha de ser equivalente al "ancho" o "alto" de las celdas de las otras filas o columnas para mantener la estructura regular de una tabla. En esos casos, conviene analizar detenidamente cuales son las uniones/divisiones que se han hecho en la tabla, para saber cuales son las Filas y Columnas que definen la estructura básica de la tabla.
Ordenando los contenidos de una tabla
En Dreamweaver podemos ordenar automáticamente los contenidos de una tabla, basándonos en el contenido de una columna, siempre y cuando los contenidos de esa columna contengan elementos que puedan ser ordenados por un criterio ordenador común. Los criterios que se pueden utilizar para ordenar los contenidos de una tabla son: Alfabético y Numérico.
Para ordenar una tabla en Dreamweaver, utilizaremos menú Commands > Sort Table...
En la imagen superior vemos el aspecto que muestra la ventana en la que podemos establecer los criterios de ordenación de una tabla. Veamos para que sirve cada uno de los parámetros:
- Sort By: En este campo podemos escoger la columna en la que nos basaremos para ordenar la tabla.
- Order: En este campo escogemos el criterio ordenador que utilizaremos para ordenar la tabla, basándonos en los contenidos de la columna seleccionada. Este criterio puede ser Alfabético y Numérico. Hemos de tener en cuenta que el criterio ordenador se ha de corresponder con el contenido de las celdas de la columna. Así, si tratamos de ordenar una columna por el criterio numérico, y el contenido de esa columna fuera textual, tendríamos un malfuncionamiento de esta función, como es lógico.
Junto a la lista desplegable "Order", tenemos una segunda lista desplegable en la que podemos escoger el orden "ascendente" o "descendente" para la ordenación seleccionada.
Tenemos un segundo bloque de controles, prácticamente igual al primero, encabezados por la frase "Then By:" (Después por), que nos permiten ajustar un segundo criterio ordenador basado en el contenido de otra columna. De esta manera podemos ajustar la ordenación de una tabla por un doble criterio.
- Sort Includes First Row: activando esta opción, incluimos el contenido de la primera fila en la ordenación. En las ocasiones en las que el contenido de la primera fila es por ejemplo una cabecera, tal vez no quiera incluir esta fila en la ordenación. Activando esta opción, incluye el contenido de la primera fila en la ordenación.
- Keep TR Attributes wirh sorted Row: En una tabla, usted puede haber hecho algunos ajustes individuales a algunas de las celdas de la tabla, tales como color de fondo, etc..., al reordenar la tabla, estos ajustes pueden "viajar" con el contenido de la celda a su nueva posición, o pueden permanecer en la celda actual aunque su contenido haya cambiado. Por defecto, los ajustes individuales de cada celda no "viajan" con el contenido a la nueva posición en la tabla. Activando esta opción, se fuerza a que los ajustes individuales si "viajen" con el contenido en la ordenación.
Una vez haya hecho los ajustes de la ordenación, puede hacer click en "Apply" para aplicar la ordenación a la tabla, y previsualizar los resultados. Si esta conforme con estos resultados, puede hacer click en "OK".
| TRUCO: En Dreamweaver 3.0, usted puede copiar parte de los contenidos de una tabla, y pegarlos en otra tabla existente en Dreamweaver. Lo único que debe tener en cuenta es que la cantidad de celdas y filas copiadas en la tabla de origen deben de existir en la tabla de destino. En otras palabras, si usted copia al portapapeles el contenido de 6 filas y 6 columnas, en la tabla de destino debe seleccionar 6 filas y 6 columnas donde pegar el contenido. En caso contrario, Dreamweaver le avisará de que no hay coincidencia entre el contenido a pegar y el espacio en la tabla seleccionada.
Si el espacio en la tabla destino se corresponde con el número de filas y columnas copiadas en el portapapeles, podrá pegar el contenido en la tabla destino y Dreamweaver respetará la distribución de los contenidos en las filas y columnas que ocupaban en la tabla origen. |
Formateando una tabla
En Dreamweaver 3.0 se ha añadido una funcionalidad para formatear visualmente una tabla, de manera clara y productiva. Utilizando esta opción es muy fácil y rápido dar una apariencia estética más trabajada a una tabla, sin tener que ajustar individualmente las distintas celdas de una tabla.
Para realizar este formateado, seleccionamos menú Commands > Format Table...
En la imagen superior observamos el aspecto de la ventana que aparece al seleccionar este comando. En esta ventana tenemos varios ajustes que nos permiten modificar el aspecto visual y formal de la tabla seleccionada, de una manera global. Veamos cuales son las distintas posibilidades que tenemos:
A continuación tenemos una serie de ajustes que nos permiten personalizar aún más el formato de una tabla.
- Row Colors: En este primer grupo de controles, podemos ajustar los colores de fondo que deseamos para las filas de la tabla, a excepción de la primera.
- First: En este campo definimos el color de fondo primario que deseamos para la alternancia de colores en las distintas filas.
- Second: En este campo definimos el color de fondo secundario que utilizaremos para la alternancia de colores en las distintas filas.
- Alternate: En esta lista desplegable podemos escoger la alternancia que deseamos entre el color primario y el color secundario, para las distintas filas de la tabla. Así, podemos escoger para que el color primario y secundario se alternen en cada fila, cada dos filas, cada 3 filas, cada 4 filas o que no se alternen, en cuyo caso todas las filas tendrán como color de fondo el color primario.
- Top Row: En este grupo de controles, ajustamos los valores para las celdas de la primera fila de la tabla.
- Align: En esta lista desplegable escogemos la alineación que tendrán los elementos de las celdas de la primera fila. Podemos escoger entre alineación izquierda, central, derecha o ninguna.
- Text Style: En esta lista desplegable podemos escoger un estilo para el texto de las celdas de la primera fila. Así, podemos escoger entre Regular (Normal), Bold (Negrita), Italic (Itálica) o Bold Italic (Negrita e Itálica).
- BgColor: En este campo podemos introducir el color de fondo que deseamos para las celdas de la primera fila.
- Text Color: En este campo podemos introducir el color que deseamos para el texto de las celdas de la primera fila.
- Left Col: En este grupo podemos ajustar los valores correspondientes a la primera columna de la izquierda.
- Align: La alineación deseada para los contenidos de las celdas de la primera columna. Esta puede ser izquierda, centrada, derecha o ninguna.
- Text Style: En este campo podemos ajustar el estilo de texto que queremos para los contenidos de las celdas de la primera columna. Podemos escoger entre Regular (Normal), Bold (Negrita), Italic (Itálica) o Bold Italic (Negrita e Itálica).
- Border: En este campo ajustamos el grosor del borde que deseamos para la tabla.
- Options: por defecto, los ajustes de formato seleccionados en esta ventana se aplican a las marcas HTML <TR>, que es la marca que define una fila entera dentro de una tabla. Activando esta opción, forzamos a Dreamweaver a que las opciones de formateo se apliquen directamente a cada celda. No es recomendable activar esta opción, ya que inserta un mayor número de argumentos HTML y aumenta el tamaño del documento.
Una vez hemos definido el formato que deseamos para la tabla, podemos hacer click en "Apply" para aplicar el formato a la tabla y previsualizar los resultados. Si el resultado es el que deseamos, podemos hacer click en "OK".
Insertando datos desde un fichero de datos delimitado
Es bastante común que algunos programas de bases de datos y hojas de cálculos, permitan exportar los contenidos de una base de datos a un fichero delimitado. Esta delimitación puede venir dada por comas, o por tabulaciones, o por cualquier otro símbolo estándar.
En Dreamweaver 3.0 se ha añadido la posibilidad de insertar los datos de un fichero delimitado o tabulado directamente sobre un documento HTML. Dreamweaver importa estos datos y genera una tabla ordenada con ellos.
Al importar los datos de un fichero tabulado, Dreamweaver detectará cada uno de los campos que componen la base de datos. Cada uno de los campos de la base de datos ocuparán una columna de la tabla. Cada uno de los distintos registros de la base de datos ocupará una nueva fila en la tabla resultante.
Para realizar esta importación:
- Posicionamos el cursor en el punto donde queremos insertar los datos dentro del documento. No es necesario que definamos ninguna tabla. Este proceso se hará automáticamente cuando importemos los datos.
- Una vez seleccionado el punto donde queremos insertar los datos, podemos utilizar menú Insert > Tabular Data o bien, utilizar la paleta Objects > Common > Tabular Data.
En la imagen superior, se observa el aspecto de la ventana en la que podemos ajustar las opciones para la importación de datos desde un fichero tabulado.
- Data File: En este campo incluiremos la URL del fichero tabulado que contiene los datos. Lo más cómodo es localizar y seleccionar el fichero navegando por nuestro disco duro, haciendo uso del botón "Browse...".
- Delimiter: En esta lista desplegable debemos escoger el carácter con el que se ha delimitado los datos en el fichero. Estos caracteres pueden ser: Tab (Tabulador), Comma (Coma), Semicolon (Punto y coma), Colon (dos puntos) u Other (Otro), en cuyo caso podremos introducir el carácter delimitador en el campo que aparecerá junto a esta lista desplegable.
- Table Width: En este apartado definimos el ancho de la tabla. Las opciones disponibles son:
- Fit to Data: Ajusta el ancho de la tabla a los valores de los datos importados.
- Set: En este campo podemos establecer un ancho, bien en pixels, bien en términos porcentuales., para la tabla resultante.
- Cell Padding: En este campo ajustamos el valor de los márgenes interiores de cada celda de la tabla resultante.
- Cell Spacing: En este campo ajustamos el valor del espacio que separará unas celdas de otras en la tabla resultante.
- Format Rop Row: En esta lista desplegable podemos escoger un formato para la primera fila de la tabla resultante. Así, podemos escoger que el texto tenga uno de los siguientes formatos: Bold (negrita), Italic (Itálica), Bold Italic ( Negrita e Itálica) o No Formatting (Ningún formato).
- Border: En este campo introducimos el valor para el ancho del borde de la tabla resultante.
Una vez hayamos introducido los ajustes necesarios, podemos hacer click en "OK" y en el punto donde habíamos seleccionado, aparecerá una tabla que contendrá los datos que hubiera en el fichero de datos tabulados, convenientemente distribuidos en filas y columnas.
| TRUCO: Una vez importados los datos de un fichero tabulado y presentados en la tabla correspondiente de Dreamweaver, esta tabla y todo su contenido pasa a ser un elemento más del documento. La tabla puede ser formateada y ordenada de la misma manera que cualquier otra tabla. |
Utilizando tablas para diseñar
Las tablas fueron creadas para presentar información ordenada en Filas y Columnas, tal y como hemos visto hasta ahora. Sin embargo, gracias a la flexibilidad y el control que permiten para distribuir la información, los diseñadores vieron rápidamente en ellas una similitud con las "retículas" utilizadas en el diseño y maquetación de publicaciones impresas, como revistas, periódicos, folletos o libros. En este tipo de publicaciones, se diseñaba una "retícula maestra" en la que se dividía la página en columnas para definir las distintas zonas para distribuir la información.
Esta similitud de las tablas con las "retículas" de diseño tradicionales, junto con el relativo control que ofrecen para el posicionamiento de elementos en un documento HTML, hicieron de esta herramienta la única opción posible al alcance de los diseñadores para "maquetar" el contenido de un documento HTML. Al menos así era hasta la aparición del HTML dinámico, que veremos posteriormente en este curso.
Por tanto, todo lo visto hasta ahora sobre las tablas, puede ser utilizado para distribuir y diseñar el contenido de un documento de manera que su presentación estética este más cuidada.
A continuación listamos algunas de las opciones para las que puede utilizar las tablas:
- Distribución de textos e imágenes en distintas columnas
- Creación de márgenes y espacios en blanco dentro de un documento HTML
- Mayor control para el posicionamiento de imágenes con respecto al resto de los elementos de una página
- Destacar contenidos usando los ajustes de fondo para las celdas de una tabla
- Establecer un ancho máximo para los contenidos de la página, con independencia del tamaño de la ventana del navegador.
En fin, en este pequeño apartado pretendemos incitar al uso de las tablas en la creación de "rejillas" para la maquetación de documentos HTML, a pesar de que esta no sea la utilidad para la que fueron creadas las tablas en HTML. Los ejemplos citados arriba son solo parte de los usos "añadidos" que la creación de tablas puede tener dentro de un documento. Si observa cualquier revista o periódico, observará como todos los contenidos están distribuidos dentro de una "rejilla", con mayor o menor flexibilidad, que consiguen ordenar jerárquica y estéticamente la información presentada. Todos esos conceptos de diseño tradicional, son fácilmente transpolables al diseño web gracias a las tablas. Utilícelas como las herramientas útiles que son.
Arriba tenemos un ejemplo del uso de las tablas para diseñar y maquetar documentos HTML. Como se puede observar, el parecido de la composición con tablas con respecto a los medios impresos tradicionales es bastante grande. Este tipo de composiciones en HTML no serían posibles sin las tablas.
Tutoriales
