Páginas web con FrontPage Express

3. Tablas

Los objetivos de la tercera lección son:

3.1 Aprender a trabajar con tablas
3.2 Modificar tablas
3.3 Conocer las propiedades de tabla y de celda
3.4 Actividad nº 3: Utilizar las tablas
3.5 Conocer las etiquetas de tablas en HTML

3.1 Trabajar con tablas

Las tablas son uno de los elementos más utilizados en la estructuración de una página web, a falta de otras herramientas que existen en los procesadores de textos tradicionales. Se utilizan principalmente para dividir el documento en columnas, para ordenar imágenes de navegación o para separar del resto algunos elementos de una página. Naturalmente, las tablas también se emplean para presentar datos de forma clara y ordenada.

Insertar tabla Para insertar una tabla hay que colocar el cursor en el lugar donde queremos ubicarla y apretar el botón adecuado de la barra de herramientas, el que aparece pulsado en la imagen de la derecha, donde se observa la rejilla que surge después. En ella señalamos, arrastrando el cursor del ratón, las filas y columnas que queremos crear. En cuanto soltemos el botón del ratón, se dibuja una tabla en la página.


Insertar tabla


Otra forma, más precisa, de incluir una tabla es abriendo el menú Tabla de la barra de menús y pulsando después en la opción Insertar tabla. En este caso el programa nos deja estructurar la tabla antes de dibujarla.

En esta ventana de diálogo todos los atributos están claros. Podemos configurar el tamaño de la tabla, su diseño y su anchura. Para hacerse una idea de lo que supone el relleno y el espaciado de celdas, conviene practicar cambiando los valores de ambos atributos y observar cómo se modifica la tabla.




3.2 Modificar tablas

Tablas Antes de seguir adelante con nuestra página, convendría echar un vistazo al menú Tabla de la barra de menús, porque en él se encuentran algunos instrumentos muy útiles para modificar las tablas. Si queremos insertar filas o columnas, sólo tenemos que pulsar esa opción y aparecerá una pequeña ventana donde indicamos los valores. Si insertamos una fila, se insertará dividida en las columnas que ya tengamos. Si insertamos una columna, aparecerá una columna más en la fila existente. Cuando queramos borrar una fila, lo mejor es marcarla y apretar la tecla Suprimir o abrir el menú Edición de la barra de tareas y pulsar en Borrar.

Pero ¿cómo se marca una columna? Hay que llevar el puntero del ratón al lado izquierdo de la tabla y moverlo encima de la línea del lado hasta que se convierta en una estrella negra que señala hacia la derecha; entonces apretamos el botón izquierdo del ratón, y ya está marcada. Para marcar una columna, hay que hacer lo mismo pero en el lado superior de la columna. No obstante, para destacar estos elementos puede resultar más sencillo acudir al menú Tabla y pulsar en la opción adecuada.

Si pulsamos en Insertar una celda, entonces se insertará una nueva columna en la celda donde se encuentre el cursor. Al insertar título, el programa coloca el cursor encima de la tabla para que escribamos un texto. Si queremos juntar varias celdas para formar una sola, entonces las marcamos y pulsamos en Combinar celdas. Cuando queramos dividir una celda en columnas o en filas, colocaremos el cursor en dicha celda y pulsaremos en Dividir celdas.

3.3 Propiedades de tabla y de celda

Lugar aparte ocupan las Propiedades de tabla y las Propiedades de celda. A ellas se puede acceder mediante el menú Tablas o colocando el cursor encima de la tabla y apretando el botón derecho del ratón; entonces aparecerá un menú del que elegiremos la opción adecuada.

Cuando abrimos la ventana de Propiedades de tabla, vemos que ya conocemos las secciones de Diseño y Ancho mínimo, cuyas características hemos definido al insertar la tabla desde el menú Tabla. Ahora nos interesan las secciones Personalizar fondo y Personalizar colores. En la primera podríamos introducir una imagen de fondo en la tabla, que se distribuye en forma de mosaico. Pero para nuestra página nos interesa incluir un color de fondo, como haremos más adelante en la actividad de esta lección, para lo cual abrimos el menú desplegable y elegimos un color adecuado. También queremos un color para el borde, así que abrimos el menú desplegable Borde de la sección Personalizar colores y elegimos otro color.

Propiedades de tabla

También podemos cambiar las características de una o varias celdas sin cambiar las de toda la tabla. Para ello, accedemos a la ventana de Propiedades de celda, cuyos atributos ya conocemos, excepto los referidos a la sección Diseño, que son importantes. La Alineación horizontal y la Alineación vertical indican la posición que ocupa el texto o la imagen que estén incluidos en esa celda, y puede ser izquierda, centro o derecha, si se trata de la horizontal, o superior, medio e inferior, si se trata de la vertical.

Atributos de celda

Actividad3.4 Actividad nº 3: Utilizar las tablas

A continuación vamos a crear un nuevo documento cuyo diseño general va a estar basado en una tabla que ocupe toda la página. Este tipo de diseño es muy habitual en las páginas web, porque permite ordenar mejor los elementos del diseño. Al archivo lo llamaremos index2.htm.

En la nueva página web vamos a utilizar los siguientes elementos:

  1. Una tabla de dos columnas y dos filas para incluir todo el contenido del documento. La tabla ocupará el 100% de la página; un relleno de celdas de 10 (para que el texto se separe del borde) y un espaciado entre celdas de 0.
  2. En la columna izquierda colocaremos los hipervínculos; esta columna ocupará el 20% de la tabla; la alineación horizontal será centro y la alineación vertical, superior; el color de fondo de la primera celda de esta columna será gris y el de la segunda celda será plateado.
  3. La columna derecha ocupará el 80% de la tabla; la primera celda de esta columna tendrá una alineación horizontal centro y una alineación vertical medio, además de un color plateado; en la segunda celda los atributos de alineación serán izquierda y superior respectivamente. Esta segunda celda tendrá como color de fondo el blanco.
  4. También incluiremos dos líneas horizontales. Para crearlas hay que abrir el menú Insertar y elegir la opción Línea horizontal. La primera línea estará debajo del saludo introductorio, y la segunda al fondo del documento, antes del texto que indica la autoría de la página. Si hacemos clic encima de la línea aparecerá una ventana donde podremos modificar los atributos predeterminados. La primera tiene un alto de 4 píxeles, un porcentaje de ventana de 70% y el color azul marino. La segunda línea tendrá los atributos predeterminados.
  5. Para finalizar, hay que dar un color negro al fondo de la página. Para ello, abrimos el menú Formato y elegimos la opción Fondo.

Una vez realizado el diseño de la página, vamos a insertar el texto. En la segunda celda de la columna izquierda escribiremos, una debajo de otra, las siguientes palabras: "Profesión", "Aficiones", "Enlaces", "Colección" y "Escríbeme". En la celda más grande, la segunda de la segunda columna, introduciremos todo el texto que hemos formateado y que se encuentra en el archivo index.htm. Para ello, abrimos este archivo en FrontPage Express y a continuación abrimos el menú Edición y elegimos la opción Seleccionar todo: veremos que todo el texto queda marcado. Después, pulsamos en la opción Copiar del mismo menú para copiar todo al Portapapeles de Windows, y a continuación colocamos el cursor del ratón al principio de la celda de color blanco, volvemos a abrir el menú Edición y elegimos Pegar. Entonces, la celda se llenará con el texto y las imágenes con que hemos estado trabajando hasta ahora.

Para ver cómo tiene que quedar nuestra página, abramos el documento que aparece pulsando el siguiente botón, sabiendo que aún queda por introducir los hipervínculos, lo que haremos en la lección 4.

Página con tablas

3.5 Las etiquetas de tablas en HTML

Veamos ahora el código fuente de la tabla que hemos creado:

<table border="1" cellpadding="10" cellspacing="0" width="100%" bordercolor="#0000FF">
<tr>
<td align="center" width="33%"><strong>PROFESIÓN</strong>< /td>
<td align="center" width="33%"><strong>AFICIONES</strong></td>
<td align="center" width="34%"><strong>ENLACES</strong></td>
</tr>
</table>

La etiqueta para la tabla es <table>, que se cierra al final. Los atributos de la tabla van incluidos dentro de la etiqueta: borde, relleno de celdas, espaciado de celdas, ancho y color del borde respectivamente.

Las filas comienzan con la etiqueta <tr>, y entre ésta y su cierre (</tr>), se incluyen las tres celdas o columnas que comprende, cuyas etiquetas son <td>. Éstas incluyen como atributos la alineación, la anchura en porcentaje, que el programa se ha encargado de introducir automáticamente, y la letra negrita. Como se ve, a la hora de cambiar la estructura de las tablas a veces resulta más cómodo o más claro realizarlo en el código fuente que con las herramientas del programa.


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3