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