Las tablas permiten organizar contenido en filas y columnas. Pueden insertarse y editarse mediante el menú Insertar > Tabla. Sus propiedades como bordes, relleno y anchos pueden definirse a través del Inspector de Propiedades o CSS. Las tablas pueden anidarse, combinarse o dividirse sus celdas para organizar mejor la información.

1. INTEGRANTES :
ALMA KARLA MORALES
HERRERA
OLGA LILIANA SANCHEZ
JUAREZ
JORGE ALFREDO GÒMEZ GIL

2. Las tablas presentan una serie de datos de
forma clara y organizada dividiéndolos en
filas y columnas además ofrece elementos
para organizar contenidos y repartir el
espacio.

3. Menú insertar, a la opción tabla; se tiene que especificar el
numero de filas y columnas, así como el ancho de la tabla.
El ancho se puede definir por pixeles o porcentaje
• GROSOR DEL BORDE: indica el grosor del borde de la
tabla en pixeles por defecto se le asigna(1).
• RELLENO DE CELDA:(cellpading)indica la distancia
entre el contenido de las celdas y los bordes de estas
• ESPACIO ENTRE CELDAS:(cellspancing) indica la
diferencia entre las celdas de la tabla
También se puede establecer un ENCABEZADO para la
tabla, ya sea para indicar el contenido de filas y columnas.

4. Para insertar texto o imágenes, simplemente hay que
situar el punto de inserción dentro de la celda deseada
haciendo clic.

5. SELECCIONAR ELEMENTOS
DE UNA CELDA
A través del menú MODIFICAR
“estando en punto de inserción de
la tabla", o desplegado “menú
contextual; se pulsa el botón
derecho sobre ella
cuando se selecciona una tabla
dreamweaver muestra una zona
verde, el ancho de la tabla y de
cada columna.
• MENU DE ENCABEZADO DE
TABLA
• MENU DE ENCABEZADO DE
LA COLUMNA.

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

7. 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.
Vemos que con el selector tabla 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

8. 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 (categoría Cuadro),
estableciendo el valor auto para ambos

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

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

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

12. 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).

13. Es posible insertar tablas dentro
de las celdas de otras tablas. A
esto se le llama anidar tablas.
ANIDAR
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.

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

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

16. A la hora de trabajar con tablas Dreamweaver nos
proporciona distintos modos de visualización. A través del
menú Ver opción Modo de tabla. Dentro de esta opción
podemos elegir entre Modo estándar o el Modo de tablas
expandidas.

17. 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 e introducir contenido pero en
este modo no vemos la página como
quedará exactamente

18. 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
DISEÑO FIJO
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.

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

20. 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
No solo puede establecerse el tamaño de la tabla,
también es posible establecer el tamaño de las
celdas