MATERIAL

DE FORMACIÓN A DISTANCIA

DREAMWEAVER CC

SISTEMA E-LEARNING

ASUNCIÓN – PARAGUAY
AÑO 2020
Servicio Nacional de Promoción Profesional Programa de Capacitación a Distancia

TABLA DE CONTENIDO

7 Diseño de la Página Web. .............................................................................. 3

7.1 . Concepto de Tabla. ............................................................................. 3
7.2 . Creación de tablas. .............................................................................. 3
7.3 . Formato de tablas y celdas. ................................................................. 4
7.4 . Insertar filas y columnas. ..................................................................... 6
7.5 . Eliminar filas y columnas. .................................................................... 6
7.6 . Combinar o dividir celdas. ................................................................... 6
7.7 . Anidar tablas. ....................................................................................... 7
7.8 . Ordenar tablas. .................................................................................... 7

Dreamweaver CC - Sistema e-learning 2

Servicio Nacional de Promoción Profesional Programa de Capacitación a Distancia

UNIDAD 7
DISEÑO DE LA PÁGINA WEB.

7.1 Concepto de Tabla.

Una tabla es la herramienta eficaz para presentar una serie de datos de forma clara y
organizada en una Página Web. También son usadas para el diseño del documento.

Las tablas están compuestas por filas y columnas, y la intersección entre una fila y una
columna es conocida con el nombre de celda.

7.2 Creación de tablas.

Para insertar tablas en el documento, realiza cualquiera de las siguientes opciones:

1. Menú Insertar  Tabla.

2. Metacomando < Ctrl + Alt + T >.

Realizada alguna de las opciones anteriores, se mostrará el cuadro de diálogo Tabla en

donde se habrá de especificar:

 Filas. Determina el número de filas de la tabla.

 Columnas. Especifica el número de columnas de la tabla.
 Ancho de tabla. Establece el ancho de la tabla en pixeles o como porcentaje del
ancho de la ventana del navegador.
 Grosor del borde. Define el ancho en pixeles de los bordes de la tabla.
 Relleno de celda. Detalla el número de pixeles entre el borde y el contenido de
una celda.
 Espacio entre celdas. Especifica el número de pixeles entre celda contiguas de
una tabla.
 Sección Encabezado. Brinda las siguientes opciones de encabezado:
o Ninguno. No permite encabezados de columna o de fila para la tabla.
o Izquierda. Convierte la primera columna de la tabla en una columna para
encabezados, lo que permite introducir un encabezado para cada fila de la
tabla.
o Superior. Convierte la primera fila de la tabla en una fila de encabezados,
lo que permite introducir un encabezado para cada columna de la tabla.
o Ambos. Permite introducir encabezados de columna y de fila de la tabla.

Dreamweaver CC - Sistema e-learning 3

Servicio Nacional de Promoción Profesional Programa de Capacitación a Distancia

 Texto. El título de tabla que se ubica fuera de la misma.

 Resumen. Descripción de la tabla.

7.3 Formato de tablas y celdas.

El formato de las tablas y de las celdas se especifica a través del Inspector de
propiedades. Ambos elementos contienen diferentes atributos

Para dar formato a la tabla, posiciona el puntero del mouse sobre las esquinas de la
tabla y luego haz clic izquierdo.

Dreamweaver CC - Sistema e-learning 4

Servicio Nacional de Promoción Profesional Programa de Capacitación a Distancia

1. Id de tabla. Especifica un ID para la tabla.

2. Filas y Cols. Número de filas y columnas que tendrá la tabla.
3. An. El ancho de la tabla en píxeles o porcentaje.
4. Rell. Celda. Determina el número de píxeles entre el contenido de una celda y
los límites de la misma.
5. Esp. Celda. Número de píxeles entre celdas de tabla contiguas.
6. Alinear. Determina dónde aparecerá la tabla en relación con otros elementos del
mismo párrafo, como por ejemplo texto o imágenes.
7. Borde. Especifica el ancho en píxeles de los bordes de la tabla.
8. Clase. Establece una clase CSS en la tabla.

Para aplicar formato a las celdas, selecciona una celda, renglón o columna y modifica
las propiedades que desees.

1. Combinar celdas. Combina las celdas, filas o columnas seleccionadas para

crear una sola celda.
2. Dividir celda. Divide una celda para crear dos o más celdas.
3. Horiz. Especifica la alineación horizontal del contenido de una celda, fila o
columna.
4. Vert. Especifica la alineación vertical del contenido de una celda, fila o columna.
5. An (Ancho) y Al (Alto). Configura el ancho y alto de las celdas seleccionadas en
píxeles o como porcentaje del ancho o alto total de la tabla.
6. No aj. Impide el ajuste de línea, manteniéndose todo el texto de una celda en una
sola línea. Cuando la opción No aj. está activada, las celdas se adaptarán para
incluir todos los datos a medida que se introducen o pegan en una celda.

Dreamweaver CC - Sistema e-learning 5

Servicio Nacional de Promoción Profesional Programa de Capacitación a Distancia

7. Encabezado. Aplica a la celda seleccionada el formato de celdas de encabezado

de tabla. De forma predeterminada, el contenido de las celdas de encabezado
de la tabla aparecerá en negrita y centrado.
8. Fondo. El color de fondo de una celda, columna o fila elegido mediante el
selector de color.
7.4 Insertar filas y columnas.
Para añadir filas y columnas a la tabla, realiza:

1. Posiciónate en la celda de acuerdo donde quieras insertar la fila o columna.

2. Haz clic en el menú Edición  Tabla  Insertar filas o columnas. O presiona

los Metacomandos:

< Ctrl + M > = Insertar fila.

< Ctrl + Shift + A > = Insertar columna.

3. Si se elige la opción Insertar filas o columnas, se mostrará el cuadro de diálogo

Insertar filas o columnas; donde se habrá de especificar el número o columnas y
el lugar donde se insertarán.

4. Una vez configurada la ventana, pulsa sobre el botón Aceptar.

7.5 Eliminar filas y columnas.

Para eliminar una fila o una columna, haz clic en una celda que desees eliminar y
selecciona el menú Edición  Tabla  Eliminar fila o Eliminar columna, según sea
el caso.

También puedes seleccionar una fila o columna completa y luego dar clic en el menú
Edición  Borrar o presionar la tecla < Supr >.

7.6 Combinar o dividir celdas.

Dreamweaver, incluye herramientas que permiten aumentar o disminuir el número de
filas o columnas que ocupa una celda.

Dreamweaver CC - Sistema e-learning 6

Servicio Nacional de Promoción Profesional Programa de Capacitación a Distancia

Para combinar celdas en una tabla, primero se deben tener seleccionadas las celdas
contiguas a combinar. Luego posicionarse en el menú Edición  Tabla  Combinar
celdas.

Otra opción es desde el botón Combinar celdas del Inspector de propiedades

ampliado.

Para dividir una celda, haz clic en la celda y selecciona el menú Edición  Tabla 
Dividir Celda.

O desde el botón Dividir celdas el Inspector de propiedades ampliado.

En el cuadro de diálogo Dividir celda, especifica cómo deseas dividirla.

7.7 Anidar tablas.

Una tabla anidada es una tabla dentro de una celda o de otra tabla. Asimismo, es
posible modificar el formato a una tabla anidada como se haría en cualquier otra tabla.

Para anidar una tabla en una celda lleva se llevan a cabo los mismos pasos como si
estuviéramos insertando una tabla.

7.8 Ordenar tablas.

El orden de las filas de una tabla poder ser en función del contenido de una sola
columna o en función del contenido de dos columnas.

Nota: No se pueden ordenar tablas que contengan atributos colspan o rowspan, es

decir, tablas con celdas combinadas.

Para ordenar una tabla, realiza:

Selecciona la tabla o haz clic en cualquiera de las celdas.

En el menú Edición  Tabla  Ordenar tabla.

Dreamweaver CC - Sistema e-learning 7

Servicio Nacional de Promoción Profesional Programa de Capacitación a Distancia

Se mostrará el cuadro de diálogo Ordenar tabla, ahí establecerás las siguientes

opciones:

 Ordenar por. Establece los valores de la columna que se utilizarán para ordenar
las filas de la tabla.
 Orden. Determina si la columna debe ordenarse alfabética o numéricamente, y si
el orden será ascendente o descendente.
 Después por / Orden. Configura el orden de una clasificación secundaria en otra
columna.
 Opciones. Permite activar los siguientes aspectos:

o El orden incluye la primera fila. Especifica que la primera fila de la tabla

debe incluirse en la clasificación.
o Ordenar filas de encabezado. Especifica que se ordenen todas las filas
de la sección thead de la tabla (si las hay) siguiendo los mismos criterios
que para las filas del cuerpo.
o Ordenar filas de pie. Especifica que se ordenen todas las filas de la
sección tfoot de la tabla (si las hay) siguiendo los mismos criterios que
para las filas del cuerpo.
o No modificar los colores de fila hasta que haya finalizado la
operación de orden. Especifica que los atributos de fila de la tabla deben
permanecer asociados al mismo contenido después de la ordenación.

Dreamweaver CC - Sistema e-learning 8