|
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 el
porcentaje
que va a ocupar la tabla dentro de la página 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).
Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.
Espacio entre celdas indica la distancia entre las celdas de la tabla.
También se puede establecer si se quiere un encabezado
para la tabla 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 alinear texto indicamos dónde queremos alinear el título con respecto a la tabla.
En Resumen: indicamos
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.
|
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
|
COLUMNA
|
||||
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 cursor previamente dentro de la celda deseada.
Seleccionar
elementos de una tabla
|
|
Existen
varias formas de seleccionar una tabla.
Una de ellas es a través del menú Modificar estando el cursor 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
tabla pulsando con el ratón sobre el borde que la rodea, o pulsando
sobre la etiqueta <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. Junto a los anchos se encuentran unos menús
desplegables (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 cursor en la tabla y no te aparece esa zona verde puedes activar su visualización seleccionando la opción Anchos de tablas del menú Tabla o también desplegando de la barra de menús, 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 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).
 Cuando
ocurren estas diferencias podemos hacer que en el código (propiedades)
se cambie el ancho por el real, para ello sólo tenemos que seleccionar
la opción Igualar todos los anchos del menú desplegable de encabezado de tabla.
En este menú vemos que también tenemos la opción Seleccionar tabla.
|
|
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 columna.
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.
|
|
Las propiedades de la tabla
se especifican a través de su inspector
de propiedades.
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),
el color de fondo (en Col. Fondo) o de borde de la
tabla (en Col. borde ), o la imagen de fondo (en Im.).
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 en este caso sirve para especificar las propiedades
del texto que se insertará dentro de la celda (o celdas) seleccionada.
La parte inferior sirve para especificar
valores propios de la celda, como puede ser el color
o imagen de fondo diferentes de los especificados para la tabla global (en Fnd),
el color del Borde de la celda, etc.
Dos opciones que posiblemente necesites
utilizar con frecuencia serán Horiz
y Vert, que definen la alineación
del contenido de la celda de forma horizontal y vertical respectivamente.
|
Para practicar puedes realizar el
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)
|
|
|
| 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. 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 recuadro. 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.
|
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.
|
 |
|
|
A la hora de trabajar con
tablas Dreamweaver nos proporciona distintos modos de visualización.
Nosotros hemos trabajado en todo el tema con el modo estándar, y vamos a
seguir
trabajando con él, pero se puede pasar a los otros modos a
través del menú
Ver opción Modo de tabla. Dentro de esta opción
podemos elegir entre Modo estándar, Modo de tablas expandidas, o modo de diseño.
El Modo de diseño se utiliza para dibujar páginas con un diseño
determinado, basándose en tablas.
Utilizando esta vista, las tablas no han de insertarse obligatoriamente
en líneas de texto, como hemos hecho hasta el momento, sino que
es posible insertarlas en cualquier punto de la página, y Dreamweaver
se encargará de rellenar el espacio vacío, para que sea
posible que la tabla aparezca en esa posición.
El Modo de tablas expandidas
añade temporalmente relleno y espaciado de celda a las tablas de un
documento y aumenta los bordes de las tablas para facilitar la edición.
Este modo se puede utilizar para seleccionar elementos de las tablas o
colocar el punto de inserción de forma precisa pero en este modo no
vemos la página como quedará exactamente.
