IntroducciónLas tablas son elementos de gran ayuda para organizar la información que se presenta en las páginas. Las tablas consisten en un conjunto de celdas organizadas vertical y horizontalmente de tal forma que nos permiten manejar el texto, los hipervínculos y las imágenes en renglones y columnas que mejoran en gran medida la organización y apariencia de las páginas.El manejo de las tablas es similar al de un procesador de texto y son muy útiles para presentar información que requiere ser organizada de manera lógica.Imagina que requieres mostrar información de los precios y existencias de los productos de una empresa, la manera más sencilla de organizar esos datos es en una tabla con 3 columnas, en donde cada columna represente los datos a presentar como: nombre del producto, precio y existencias. ¿Cómo insertar una tabla y definir sus propiedades?Para mostrar su aplicación, trabajaremos con el sitio que ya tienes creado en clase en el cual agregaremos una página adicional Cambia a la vista de navegación y agrega una página de segundo nivel llamada tablas Abre la página tablas y cambia el color del fondoHaz clic en el menú Table y selecciona la opción Insert, selecciona la opción de Table para que aparezca la caja de diálogo Insert Table

En esta caja de diálogo se definen las características que tendrá la tabla.

A continuación se describen brevemente la función de cada una de ellas:

SIZE

Propiedad Descripción:

Rows Número de renglones que tendrá la tabla

Columns Número de columnas que tendrá la tabla

LAYOUTPropiedad Descripción:

Alignment Alinea la tabla al centro, izquierda o derecha de la ventana

Float Determina si el texto ajeno a la tabla se muestra alrededor de ella (izquierda o derecha) o no se permite (Default)

Specify widthDefine el ancho que tendrá la tabla:

In pixels: determina un tamaño fijo del ancho de la tabla definido en pixeles In percent: define el ancho de la tabla como un porcentaje de la ventana

Cell padding Define el espacio que existe entre los bordes y el contenido de la celda

Cell spacing Define el ancho de los bordes que existen entre las celdas

Specify heigthDefine el alto que tendrá la tabla:

In pixels: determina la altura de la tabla en un tamaño fijo definido en pixeles In percent: define la altura de la tabla como un porcentaje de la ventana

BORDERS

Propiedad Descripción:

SizeDefine el ancho del borde que se encuentra alrededor de la tabla. Si no se quiere tener borde se debe escribir un 0

Color Define el color de los bordes de la tabla

Dark border Define el color de los bordes inferiores y derechos de la tabla

Light border Define el color de los bordes superiores e izquierdos de la tabla

BACKGROUND

Propiedad Descripción:

Color Define el color del fondo de la tabla

Use background picture

Si se selecciona permite usar una imagen como fondo de la tabla y se debe buscar la dirección del archivo en donde se encuentra la imagen a usar como fondo

 

¿Cómo agregar renglones a la tabla?Para agregar renglones se debe realizar lo siguiente:Coloca el cursor en el renglón donde deseas agregar el nuevoHaz clic en el menú Table, selecciona la opción Insert  y después Rows or columns... aparece la siguiente caja de diálogo:

Selecciona el botón que muestre el elemento que quieres agregar: renglón (rows) o columnas (columns)Indica cuantos renglones  deseas agregarSelecciona el botón que indica el lugar donde se van a agregar los renglones; lo mismo para las columnas

Above selection: los renglones se agregan arriba de donde se encuentra el cursorBelow Selection: los renglones se agregan abajo de donde se encuentra el cursor

¿Cómo agregar título a la tabla?Para agregar un título a la tabla se debe realizar lo siguiente:Posiciona el cursor en cualquier lugar de la tablaHaz clic en el menú Table, selecciona la opción Insert, selecciona la opción Caption, aparece el cursor en la parte superior de la tabla para que se escriba el título deseado. Escribe Listado de productos.¿Cómo modificar el título de la tabla?

Para modificar el título de la tabla se debe realizar lo siguiente:Selecciona el título de la tablaHaz clic en botón derecho del ratón, selecciona la opción Caption Properties, aparece la siguiente caja de diálogo:

Top of table: coloca el título en la parte superior de la tablaBottom of table: coloca el título en la parte inferior de la tabla¿Cómo aplicar un formato predefinido a las tablas?FrontPage cuenta con un gran número de formatos predefinidos de tablas los cuales permiten crear tablas muy presentables de una manera muy sencilla:Selecciona la tabla a la que se le deseas aplicar el formatoHaz clic en el menú Table y selecciona la opción Table autoformat... aparece la siguiente ventana:

En la ventana del lado izquierdo llamada Formats aparece una lista con todos los formatos disponibles, en la ventana del lado derecho Preview aparece una vista previa del formato seleccionado. Si aplicamos el formato Column 2 la tabla quedaría de la siguiente manera:

¿Cómo modificar el ancho de las columnas?Selecciona la columna a modificarColoca el cursor entre la división de una columna con otra hasta que el cursor tome la siguiente forma Arrastra el cursor hasta que la columna tenga el ancho deseado¿Cómo modificar la altura de los renglones?Selecciona el renglón a modificarColoca el cursor entre la división de un renglón con el otro hasta que el cursor tome la siguiente forma Arrastra el cursor hasta que el renglón tenga la altura deseada¿Cómo unificar el ancho de todos los renglones y la altura de todas las columnas de la tabla?Además de cambiar el ancho y la altura de renglones y columnas específicas de la tabla, es posible modificar la tabla de modo que todos los renglones y columnas tengan el mismo tamaño.Selecciona el renglón o la columna a unificarSelecciona del menú Table la opción:Distribute Rows Evenly para que todos los renglones de la columna seleccionada de la tabla tengan la misma alturaDistribute Columns Evenly para que todas las columnas del renglón seleccionado de la tabla tengan la misma anchuraFrontPage modifica la tabla de modo que los renglones y las columnas seleccionadas tengan la misma medida.El manejo de tablas es muy extenso y conforme se utilizan se va aprendiendo nuevas cosas, pero su utilidad es muy grande, ya que organizan de una manera lógica la información. Prueba las opciones que incluye el menú Table para que aprendas mas sobre su manejo.Tema 2: Manejo de celdas y sus propiedades En la sección anterior aprendimos a crear tablas, pero existen muchas características que podemos agregar para hacerlas todavía más presentables. Una celda es el elemento que se forma en la intersección de un renglón y una columna. En esta sección veremos como manejar las celdas que forman las tablas y sus propiedades.¿Cómo modificar las propiedades de las celdas?En ocasiones solo se necesitan realizar cambios a algunas celdas de la tabla, en esas situaciones debemos modificar las propiedades de las celdas, las cuales afectan únicamente a las celdas seleccionadas.Para modificar las propiedades de las celdas se deben realizar las siguientes operaciones:Selecciona las celdas a modificarHaz clic en el botón derecho del ratón y selecciona la opción Cells Properties y aparece la siguiente caja de diálogo:

En esta caja de diálogo se definen las características que tendrán las celdas que forman la tabla. A continuación se describen brevemente la función de las propiedades más comunes:

LAYOUTPropiedad Descripción

Horizontal alignment

Alinea el texto a la izquierda, derecha o al centro de la celda

Vertical algnment Alinea el texto arriba, abajo o al centro de la celda

Header cell Despliega el contenido de las celdas centradas y en negritas

No wrap Impide que el contenido de la celda ocupe más de un renglón

Specify widthDefine el ancho de la celda

In pixels: determina un tamaño fijo del ancho de la celda definido en pixeles In percent: define el ancho de la celda como un porcentaje del ancho de la tabla

Specify heightDefine la altura de la celda

In pixels: determina la altura de la celda en un tamaño fijo definido en pixeles In percent: define la altura de la celda como un porcentaje de la altura de la tabla

BORDERS

Propiedad Descripción

Color Define el color del borde de la celda 

Light border Define el color del borde superior e izquierdo de las celdas

Dark border Define el color del borde inferior y derecho de las celdas

BACKGROUND

Propiedad Descripción

Color Define el color del fondo de la celda

Use bakcground  picture

si se selecciona permite usar una imagen como fondo de la celda y se debe buscar la dirección del archivo en donde se encuentra la imagen a usar como fondo

¿Cómo fusionar celdas?FrontPage permite juntar o fusionar varias celdas en una. La forma de hacerlo es la siguiente:Selecciona las celdas a fusionarHaz clic en el menú Table y selecciona la opción Merge CellsPor ejemplo, en la siguiente tabla:

Si se fusionan las celdas Ingresos y Egresos la tabla quedaría así:

¿Cómo insertar imágenes en una celda?

Las imágenes se insertan de la misma manera que se insertan en una página, la única diferencia es que al momento de hacerlo dentro de una celda, el tamaño de la celda se modifica de manera automática para que la imagen se muestre completa. Se puede modificar el tamaño de la imagen para ajustarla con el tamaño de las otras celdas.Realiza lo siguiente:Abre el hipervínculo o tabla creada en su página webSelecciona la tabla creada en clase Inserta una columna nueva entre la columna 1 y 2Escribe en el primer renglón la palabra ImagenColoca el cursor en la columna imagen del primer modeloSelecciona del menú Insert la opción Picture from file y escoge una imagen de motocicletas curso 11-01; avines curso 11-02 , zapatos curso 11-03 de las que utilizaste anteriormente.E ingresalos y dales un precio comercial en otra columna¿Cómo insertar botones dentro de una celda?Los botones son elementos muy utilizados en los sitios Web, ya que estos reaccionan a eventos que ocurren cuando utilizas el ratón. Normalmente estos se usan para realizar hipervínculos con otras páginas.Los botones se pueden insertar en cualquier parte de las páginas. En esta sección vamos a insertar un botón dentro de una celda de la tabla que se encuentra en la página Productos del sitio y tabla que ya has creado . Los pasos a seguir son los siguientes.Abre tusitio web y la pgina tablas (si no lo tienes abierto)Coloca el cursor en la última celda de la tabla y oprime la tecla de Tab para insertar un renglón nuevo al final de la tabla.Coloca el cursor en la primera columna del renglón que insertaste.Selecciona del menú Insert la opción Interactive buttons…

De la lista que aparece en la ventana de Buttons selecciona el botón que más te agrade. Una vista previa del botón aparece en la ventana de Preview.Escribe en la casilla de Text el nombre que deseas que tenga el botón, en este caso escribiremos: Directorio de Zapatos en México.En la casilla de link escribe la dirección o URL donde deseas que se vincule el botón. En este ejemplo escribiremos: http://www.directorio.com.mx/zapatos/ que es el sitio que muestra todos los productores de zapatos en México. El botón de browse que se encuentra en el lado derecho de la ventana permite realizar hipervínculos a diferentes lugares. Al oprimirlo aparece la siguiente ventana de diálogo:

Los hipervínculos que permite realizar son los siguientes:Existing File or Web Page: esta opción permite realizar un hipervínculo a un archivo que ya existe o a un sitio Web. Si desea usar este hipervínculo debes escribir la dirección del sitio Web o del archivo en la casilla de Address que se encuentra en la parte inferior de la ventana.Place in This Document: esta opción permite hacer un hipervínculo a una página dentro del sitio Web en que nos encontramos. Al seleccionar esta opción aparece la siguiente caja de diálogo:

En la la casilla Text to display que se encuentra en la parte superior de la ventana caja debemos escribir el texto que se desea desplegar en el botón y seleccionar la marca (bookmark) a la que deseamos vincular el botón. En este ejemplo solo existe la marca Inicio.Nota: Para poder usar esta opción, debimos marcar con anterioridad la parte del documento a la que deseamos vincular el botón. Este proceso se describe a continuación.¿Cómo poner una marca (bookmark) en alguna parte del documento?Un bookmark es una marca que se coloca en alguna parte del documento para identificar dicho punto. Para poner una marca en alguna parte del documento se realiza lo siguiente:Coloca el cursor en la parte del documento donde deseas agregar la marca.Selecciona del menú Insert la opción BookmarkEscribe un nombre que identifique la marca en la casilla Bookmark name. En este ejemplo dice Inicio.Oprime el botoón de Ok.Aparece una marca representada por una bandera similar a la siguiente: en el punto donde se encuentra el cursor. Esta marca solo es visible mientras estamos en la fase desarrollo, cuando el sitio es publicado es invisible para el usuario. E-mail Address: esta opción permite hacer un hipervínculo a una dirección de correo. Al seleccionar esta opción aparece la siguiente caja de diálogo:

En esta ventana debemos escribir la dirección de correo al que se desea vincular el botón en la casilla E-mail address y el título del mensaje en la casilla de Subject.¿Cómo modificar las propiedades de la letra del botón?Para modificar las propiedades de la letra del botón se deben realizar los siguientes pasos:Colocar el cursor encima del botón y oprimir el botón derecho del ratón para que aparezca el menú alterno.Seleccionar la opción Button PropertiesSeleccionar la pestaña Font de la caja de diálogo y aparece la siguiente ventana:

Prueba las opciones para que veas que realizan cada una de ellas. ¿Cómo modificar las propiedades de la imagen del botón?Como se puede apreciar en el botón anterior, el texto no se aprecia completamente, debido a que el botón ya tiene un tamaño establecido. Si queremos modificar dichos valores debemos modificar sus propiedades. Para modificar las propiedades de la imagen se debe realizar lo siguiente:Colocar el cursor encima del botón y oprimir el botón derecho del ratón para que aparezca el menú alterno.Seleccionar la opción Button PropertiesSeleccionar la pestaña Image de la caja de diálogo y aparece la siguiente ventana: