3. Tablas

Los objetivos de la tercera lección son:

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.

Para insertar una tabla hay que colocar el cursor en el lugar donde queremos ubicarla y apretar el botón Tabla de la barra superior de herramientas. Cuando hacemos esto, surge una pequeña ventana con tres pestañas en las que podemos ajustar nuestra tabla:

1. En la pestaña Rápido, podemos crear la tabla inmediatamente sólo con señalar las files y columnas que deseemos arrastrando el cursor del ratón por encima;y en cuanto soltemos el botón del ratón, se dibuja una tabla en la página, pero nos saldrá con las medidas predeterminadas y se verá pequeña.
2. En la pestaña Preciso, ya podemos precisar numéricamente no sólo las filas y columnas que queremos, sino también la anchura total de la tabla, que en nuestro caso sera el 100% de la ventana. Podríamos haber precisado una medida en píxeles, pero queremos que la tabla ocupe todo el ancho del documento sea cual sea la resolución del monitor con que se vea. El borde lo hemos dejado como estaba, en 1 píxel, para que se vea la tabla.
3. En la pestaña Celda, se puede precisar la alineación y las medidas internas de las celdas, pero esto lo haremos posteriormente.

Y de momento, hemos creado una fila con tres columnas en las que hemos incluido la imagen del Monstruo.:

3.2. Propiedades de tabla y de celda

Ahora vamos a cambiar algunas propiedades de la tabla para demostrar lo que se puede hacer, pero no siempre conviene realizar demasiados cambios o incluir muchos colores distintos como vamos a hacer ahora. A estas propiedades se accede de dos formas:

1. Haciendo doble clic encima de cualquier parte de la tabla teniendo cuidado de no marcar las imágenes.
2. Abriendo el menú superior Tabla -> Propiedades de la tabla... después de haber colocado el cursor del ratón en la tabla.

Entonces surgirá una ventana en la que podemos ver las propiedades actuales de la tabla en la pestaña Tabla. Y si abrimos la pestaña Celda, entonces veremos las propiedades de la celda en la que hemos colocado el cursor del ratón. Pero hemos modificado las propiedades de la tabla para crear una como la de abajo, y ahora esas propiedades quedan de esta forma:

1. La sección Tamaño queda igual que la original. Una fila y tres columnas con una anchura del 100% del documento.
2. El borde será de 0 píxeles, es decir, no habrá borde, porque el borde azul que se consigue es mediante el color de fondo azul superponiendo los colores de la celda y dejando un espaciado de 2 píxeles entre columnas. El relleno de 5 píxeles permitirá que los bloques de contenido (la imagen y el texto) se separen un poco de los bordes de las celdas.
3. La alineación de la tabla a la izquierda, centrada o a la derecha sirve cuando la tabla no ocupa todo el ancho del documento, pero en nuestro caso podemos dejarla como está.
4. Por último el Título de la tabla, que puede ir en cuatro posiciones, lo hemos colocado sobre la tabla. Para escribirlo hay que hacer clic sobre la tabla.

A partir de ahora hemos modificado las tres celdas para dejar una tabla de esta forma. En las tres imágenes de abajo se ven los cambios efectuados en cada una de ellas.

Mi colección de imágenes

Contenido superior a la izquierda

Contenido medio centrado

Contenido inferior a la derecha

Celda del centro

Celda de la derecha

En las tres celdas hemos modificado lo siguiente:

1. La anchura en tanto por ciento y no en la otra posibilidad de hacerlo en píxeles. Para ello hemos abierto el menú desplegable de la anchura yhemos elegido la opción % de la tabla. Sólo en la primera celda hemos establecido una altura de la celda de 150 píxeles para poder mostrar las distintas alineaciones del contenido, pero no es aconsejable hacerlo en condiciones normales. Una vez establecida esa altura en la primera celda, no hace falta hacerlo en las demás de la misma columna.
2. En la alineación de los contenidos hemos variado en cada una de las celdas para mostrar sus diferencias. La alineación puede ser vertical u horizontal, según se desplace el contenido en uno u otro sentido.

Por último, el borde de las celdas de color azul se ha conseguido poniendo ese color azul como color de fondo de la tabla. Esto es así, porque no se puede establecer color para los bordes, al menos con un código apto para todos los navegadores.

Hemos dejado las propiedades predeterminadas del estilo de celda y del ajuste de texto. Es mejor ajustar las líneas al ancho de la celda; si no, la celda se modifica y puede sobrepasar la anchura deseada.

También podemos ver la tabla o el documento entero en modo Etiquetas HTML pulsando la pestaña correspondiente en la parte inferior del editor de Kompozer. Y así podremos ver las etiquetas dentro de cuadritos amarillo. Si hacemos doble clic sobre los cuadritos, veremos las propiedades de cada etiqueta:

3.3. Modificar 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, seleccionar, unir o eliminar filas o columnas, sólo tenemos que pulsar esa opción después de haber colocado el cursor del ratón en cualquier celda, o arrastramos el ratón sobre las celdas elegidas. 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. También se pueden realizar estas acciones con el menú que aparece cuando pulsamos el botón secundario del ratón encima de una celda. 

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.4. Actividad nº 3: Utilizar las tablas

A continuación vamos a incorporar una tabla en el documento coleccion.html creado en la lección 2.  En la tabla incluiremos las tres imágenes que ya habíamos colocado una debajo de otra. De esta forma, con la tabla podemos crear una especie de galería de imágenes. Si queremos incluir más imágenes podemos insertar filas inferiores en el menú de Tabla.

Mi colección de imágenes

Con patas

Éste soy yo

Ojos saltones

 Para realizar esta tarea, nos fijaremos en la sección 3.2. Vamos a utilizar los siguientes elementos:

1. Una tabla de tres columnas que ocupará el 100% de la página; un relleno de celdas de 10 píxeles para que las imágenes se separen del borde, y un espaciado entre celdas de 5 píxeles para dejar un borde entre celdas. Ese borde se rellenará con el color de fondo de la tabla, así que el borde de la tabla será de 0 píxeles.
2. En las columnas insertaremos las imágenes, que se encuentran en la carpeta imagenes dentro de la carpeta monstruo. O las copiaremos de este documento pulsando el botón secundario del ratón y eligiendo la opción correspondiente.
3. Las columnas tendrán una anchura de 33%, 34 % y 33% para completar el 100% de la tabla. La alineación de las celdas será la misma en las tres: media y centrada, y tendrán el mismo color de fondo, que en nuestro caso será transparente, es decir, no hay color de fondo.
4. Para finalizar, hay que dar un color negro al fondo de la página. Para ello, abrimos el menú Formato -> Colores y fondo de la página..., y activamos la casilla usar colores personalizados. De momento, sólo vamos a cambiar el color de fondo, que será negro u oscuro. Ya veremos más adelante las demás posibilidades de estas propiedades como, por ejemplo, estos colores del documento de la colección de imágenes del Monstruo:

El monstruo también tiene su colección de imágenes, que podemos ver en el siguiente enlace. En este caso la tabla es totalmente invisible, y se ha conseguido sin establecer ningún tipo de borde ni de color de fondo.

Colección de imágenes

 Ahora vamos a crear una tabla que ocupe todo el documento para los contenidos de la página web del Monstruo y en su lateral vamos a incluir los hipervínculos o enlaces a las distintas secciones del contenido. Utilizaremos la página principal ya creada que se llama index.html, donde ya incluimos el contenido en la lección 1. Ese contenido lo ubicaremos en las celdas de la nueva tabla.

En el documento vamos a utilizar los siguientes elementos:

1. Una tabla de dos columnas y dos filas para incluir todo el contenido. 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á medioy 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 una altura de 4 píxeles, una anchura de 70%, un sombreado 3D y alineación centrada. 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 mismo archivo index.html. Para ello, seleccionamos todo el texto pulsando el botón principal del ratón; después, pulsamos en la opción Copiar del menú Editar de la barra superior, o elegimos esa opción pulsando el botón derecho del ratón sobre el texto marcado. A continuación colocamos el cursor del ratón al principio de la celda más grande, de color blanco, volvemos a abrir el menú Editar 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 a continuación.

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 bgcolor="#bb7c3e" border="0" cellpadding="10" cellspacing="5" width="100%">
  <caption><strong><font color="#663300">Mi colección de imágenes</font></strong></caption>
  <tbody>
    <tr>
      <td align="center" bgcolor="#ffcc66" width="33%">
      <img src="monstruo/imagenes/conpatas.gif" alt="Imagen" height="93" width="108"><br>Con patas</td>
      <td align="center" bgcolor="#ffcc66" width="34%"><img
 src="monstruo/imagenes/monstruo.jpg" alt="Imagen" height="113" width="160"><br>Éste soy yo</td>
      <td align="center" bgcolor="#ffcc66" width="33%"><img src="monstruo/imagenes/ojos.gif" alt="Imagen"  height="113" width="75"><br>Ojos saltones</td>
    </tr>
  </tbody>
</table>


1. La etiqueta para la tabla es <table>, que se cierra al final. Los atributos de la tabla van incluidos dentro de su etiqueta: bgcolor (color de fondo) border (borde), cellpadding (relleno de celdas), cellspacing (espaciado entre celdas) y width (ancho).
2. La etiqueta <caption> es la del título de la tabla. En medio lleva el texto del título en negrita (strong) y con un color de texto (font).
3. La etiqueta <tbody> contiene todo el cuerpo de la tabla, excepto el título.
4. La etiqueta <tr> es la de la fila, que a su vez contiene las tres celdas (<td>). Las celdas tienen su color de fondo (bgcolor), su anchura (width) y están alineadas al centro (align="center"). Estas celdas contienen la imagen (img), con sus atributos correspondientes, y el texto, separado de la imagen por un salto de línea (<br>).