Tema: Tablas (DreamWeaver)

1. Tablas
DreamWeaver CS5

2. Las tablas presentan una serie de
datos de forma clara y organizada
dividiéndolas en filas y columnas.
Están formadas por un conjunto de
celdas, distribuidas en filas y
columnas.

3. En DreamWeaver CS5 todos los objetos
de las tablas se alinean por defecto a la
izquierda de las páginas web, pero
gracias a ellas es posible distribuir el
texto en columnas; colocar imágenes a
un lado del texto, y otra serie de cosas
que sin las tablas serían imposibles de
realizar.

4. •Insertar Tabla.
Para insertar una
tablas, se necesita ir
al menú insertar, a la
opción tabla. En la
nueva ventana
habrá que
especificar el numero
de filas y columnas
que tendrá la tabla
así como el ancho
de la tabla.

5. • Ancho: Puede ser definido por píxeles o como porcentaje.
• Grosor del borde: Indica el grosor de la tabla de píxeles, por
defecto se le agrega el numero 1.
• Relleno de celda: (cellpadding) Indica la distancia entre el
contenido de las celdas y los bordes de estas.
• Espacio entre las celdas: (cellspacing) indica la distancias
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.
Nota: Si queremos incluir un título, lo indicamos en texto, el título aparecerá fuera
de la tabla.

6. •Rellenar las celdas
Las celdas son cada uno de los
recuadros que forman una tabla,
resultan de la inserción entre una fila
y una columna.

7. Para 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
haciendo clic.
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.

8. •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.
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.

9. Puede seleccionarse una fila o columna de varias
formas, lo mejor es que pruebes las distintas formas
de hacerlo.
• Utilizando la opción Seleccionar columna de varias formas(zona
verde)
• Manteniendo pulsando y arrastrando el ratón hasta realizarla
selección completa.
• Situando el cursor junto al borde superior izquierdo de la columna
o fila respectivamente.
Selección de 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.

10. • Formato de tabla
Las propiedades de la tabla se especifican a través de
su inspector de propiedades. Se pueden modificar los
valores que se especificaron al insertar la tabla, también, se
pueden indicar otros como el valor alinear, el borde, o los
valores de relleno y espaciado de la celda.

11. La parte superior del inspector nos permite alternar entre las
propiedades HTML, que sirven para especificar las
propiedades del texto que se insertará en la celda (s)
seleccionada, y la propiedad CS5 para definir los estilos. La
inferior sirve para especificar valores propios de la celda,
como color, imagen de fondo (preferiblemente definido
con CS5), la alineación del contenido en horizontal y
vertical, especificar su tamaño…

12. •Formato CSS
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 de este.
•Podemos crear clases u asignarlas a la tabla, a una
fila o a una columna. Recuerda que podemos
emplear selectores compuestos.
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.
• 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, etc.

13. •Añadir y eliminar filas o columnas.
Existen varias formas de añadir y eliminar filas o columnas.
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.

14. Existe otra opción “Insertar filas/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.

15. Para eliminar una fila o una columna, hay que
posicionar el cursor en la fila o columna y elegir la
opción eliminar fila o columna del menú Tabla.
También se puede seleccionar la fila o columna
a borrar y pulsar la tecla de borrado (Del o Supr).

16. •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 se ha 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.
• 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.

17. 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.
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.

18. •Modos de Tablas
Existen otros modos aparte de estándar, a través del
menú ver opción modo tabla. Dentro de esta opción
podemos elegir entre el estándar o el modo de tablas
expandidas.
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, se
puede utilizar para seleccionar elementos de las tablas o
colocar el punto de inserción de forma precisa e introducir
contenido pero en este modo no vemos la página como
quedará exactamente.

19. •Adaptar webs a distintas resoluciones
En la creación de una página web se tiene que tomar en cuenta
que la visitaran usuarios con distintos tamaños y resoluciones en sus
monitores. Existen 2 tendencias principales a la hora de distribuir los
elementos en nuestra página:
• Diseño fijo: Especifica las medidas en píxeles, el
contenido siempre se mostrará del mismo tamaño, lo
que facilita mucho el diseño. En contra, se
desaprovecha mucho espacio en monitores grandes, o
puede aparecer el “scroll” horizontal en monitores
pequeños.
• 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
permite aprovecharla completamente. En 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.

20. El tamaño de las tablas se pueden medir en píxeles y en
porcentaje:
En píxeles, la tabla se verá del mismo modo
independientemente del tamaño de la ventana del
navegador.
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.
No solo puede establecerse el tamaño de la tabla, también es
posible establecer el tamaño de las celdas a través del inspector
de propiedades.

21. Jugando con las medidas de las celdas
de la tabla, y teniendo en cuenta que
contienen imágenes, texto, 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.