PRESENTACIÓN DE CONTENIDOS

(TABLAS)

TABLAS
Las tablas se constituyen como una herramienta muy eficaz parar la presentación de los
datos, establecer el diseño de texto y gráficos en una página HTML.

Ejemplo de una tabla

Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o
más celdas. Aunque las columnas no suelen especificarse explícitamente en el código
HTML. Hoy en día el diseño de muchas páginas Web se basa en tablas, porque facilita y
mejora las opciones de diseño.

Insertar Tabla

Existen 2 formas para la creación de tablas:

La primera es la opción rápida, debe ubicarse en el icono de Tabla que se encuentra en el

Panel de Objetos en las opciones comunes.

La segunda es por medio del Menú Insertar en la Barra de Menú, donde se seleccionará la
opción Tabla. Debe aparecer un cuadro de dialogo como el de la imagen, de esta forma se
puede especificar las opciones deseadas, a continuación se explicaran detalladamente:
Filas: determina el número de filas de la tabla.

Columnas: determina el número de columnas de la tabla.

Ancho de tabla: especifica el ancho de la tabla en píxeles o como porcentaje del ancho de
la ventana del navegador.

Grosor del borde: específica el ancho en píxel es de los bordes de la tabla.

Relleno de celda: especifica el número de píxeles entre el borde y el contenido de una

celda.

Espacio celda: determina el número de píxeles entre celdas contiguas de una tabla.

Encabezado: se establecen cuando el usuario utilice 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.

Texto: proporciona un título de tabla que aparece fuera de la misma.

Alinear texto: especifica el lugar en el que el texto de la tabla aparecerá en relación con la
tabla.

Resumen: ofrece 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.
Selección de una Tabla

Existen varias formas de seleccionar una tabla entera de una sola vez.

• Ubíquese en una celda de la tabla. Seleccione en la Barra de Menú

Modificar > Tabla > Seleccionar tabla.

• Seleccione y haga clic en una celda de la tabla, después de click derecho y

seleccione Tabla, a continuación seleccione Seleccionar tabla.

• Ubíquese en alguna esquina de la tabla y haga clic. Debe aparecer la

siguiente imagen

Selección de Filas y Columnas

Seleccionar una o varias filas y columnas

Se sitúa el puntero sobre el borde izquierdo de una fila o en el borde superior de

una columna. Cuando el puntero se vuelva una flecha de selección, haga clic para
seleccionar una fila o una columna, o sino arrastre para seleccionar varias filas o
varias columnas.

Selección de Celdas

• Si va a seleccionar celdas y son continuas, debe mantener pulsado el

Mouse y se arrastra a la celda deseada.
• Si va a seleccionar una o varias celdas no contiguas, pulse la tecla Control
mientras hace clic en las celdas deseadas.

Propiedades de la Tabla

El Inspector de Propiedades permite modificar los valores que se definieron al

crear la tabla: número de filas y de columnas, ancho, alto, espacio de celda.

Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Además permite realizar alineaciones (Predeterminada, Centro, Izquierda y
Derecha).

Se puede modificar el color con respecto al fondo o al borde de la tabla, también

permite establecer una imagen de fondo.

Adición y Eliminación de Filas y Columnas

Para añadir o eliminar filas y columnas, utilice en la barra de Menú la opción

Modificar > Tabla o el menú de encabezado de columna (para visualizar este
menú debe ubicarse en la tabla y luego dar click derecho)

Nota: Si presiona la tecla Tab en la última celda de una tabla se añadirá

automáticamente otra fila a la tabla.

Para añadir una sola Fila o Columna

1. Haga clic en una celda.

2. Siga uno de estos procedimientos:

• Seleccione en la barra de Menú la opción Modificar > Tabla > Insertar fila
o bien Modificar > Tabla > Insertar columna. Aparecerá una fila encima
del punto de inserción o una columna a la izquierda del punto de inserción.

• Haga clic en el menú del encabezado de columna y, a continuación,

seleccione Tabla > Insertar fila o Tabla > Insertar columna. Aparecerá
una columna a la izquierda o a la derecha del punto de inserción.

Para añadir varias Flas o Columnas

1. Haga clic en una celda.

2. Seleccione Modificar > Tabla > Insertar filas o columnas. Aparece el cuadro
de diálogo Insertar filas o columnas.
3. Elija Filas o Columnas y, a continuación, complete el cuadro de diálogo. Para
más información, haga clic en el botón Ayuda del cuadro de diálogo.
4. Haga clic en Aceptar. Las filas o columnas aparecen en la tabla.

Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Para eliminar una Fila o una Columna

• Haga clic en una celda dentro de la fila o de la columna que desea eliminar
y, a continuación, seleccione Modificar > Tabla > Eliminar fila o Modificar
> Tabla > Eliminar columna.

• Seleccione una fila o columna completa y, a continuación, seleccione en la

barra de menú la opción Edición > Borrar o presione la tecla Supr. Toda
la fila o la columna desaparecerán de la tabla.

Para añadir o eliminar Filas o Columnas utilizando el Inspector de

Propiedades

1. Seleccione toda la tabla

2. En el inspector de propiedades (Ventana > Propiedades), siga uno de estos
procedimientos:

• Aumente o disminuya el valor de Filas para añadir o eliminar filas.

Dreamweaver añade y elimina filas del final de la tabla.
• Aumente o disminuya el valor de Cols para añadir o eliminar columnas.
Dreamweaver añade y elimina columnas de la derecha de la tabla.

Nota: Dreamweaver no advertirá de que las filas o las columnas que desea
eliminar contienen datos.

División y Combinación de Celdas

Utilice el inspector de propiedades o los comandos del menú Modificar > Tabla
para dividir o combinar celdas. Como alternativa a la división y combinación de
celdas, Dreamweaver incluye también herramientas que permiten aumentar o
disminuir el número de filas o columnas que ocupa una celda.

Combinación de Celdas

Seleccione las celdas que desea combinar, deben estar en una línea contigua y en
forma de rectángulo.

Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
La combinación de celdas se puede realizar de dos formas:

1. Por medio del inspector de propiedades

2. Utilizando el menú Modificar> Tabla para combinar las celdas.

El contenido de las celdas individuales se sitúa en la celda combinada resultante.

Las propiedades de la primera celda seleccionada se aplicarán a la celda
combinada.

División de Celdas

Haga clic en la celda que desea dividir y realice uno de estos procedimientos:

• Seleccione Modificar > Tabla > Dividir celda.

• En el inspector de propiedades haga clic en el botón Dividir celda.

En el cuadro de diálogo Dividir celda, especifique cómo desea dividir la celda (Filas
o Columnas).

Para la realización de este documento, se tomó como referencia el “Manual

Adobe Dreamweaver CS3” de la empresa Adobe y el Sitio Web
http://www.aulaclic.es/dreamweavercs3/index.htm

Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados