Unidad 9. Imágenes (IV)

9.4. Tabla de índice

Ya tenemos, en la carpeta flores, las cuatro páginas con las galerías, correspondientes a las distintas categorías. Ahora, vamos a crear otra página, sin imágenes, que recoja el listado completo de las flores disponibles, ordenadas alfabéticamente.

A esta página vamos a llamarla index.html. Así conseguimos que si un visitante accede directamente a la carpeta flores, se muestre esta página.

Por lo tato, creamos la página index.html, dentro de la carpeta flores, con la estructura que tiene el resto.

En el título de la página (h2), hemos escrito: Índice alfabético de flores.

En el primer párrafo, hemos introducido el texto: Aquí puedes encontrar todas las flores de las que tenemos imágenes, listadas alfabéticamente:.

 

Ahora vamos a listar todas las flores. De cada una, mostraremos su nombre, categoría y un enlace a su ficha. La estructura más apropiada del HTML para listar datos es la tabla <table></table>. Dentro de ella, podemos crear una fila (<tr></tr>) para cada flor, y una celda (<td></td>) para el nombre, otra para la categoría y otra para el enlace.

Si no conoces las tablas, o quieres aprender más sobre su estructura, consulta este básico .

Utilizando KompoZer podemos insertar una tabla pulsando en el icono de la barra de redacción. Al hacerlo, aparece una ventana, con tres pestañas:

• En Rápido, podemos elegir con un clic el número de filas y columnas, para una tabla pequeña.
• En Preciso, especificamos filas y columnas numéricamente, pudiendo concretar también la Anchura de la tabla y el Borde.
• En Celda, podemos ajustar la alineación, y las propiedades de cellpadding y cellspacing, que por defecto están a 2.

De momento, dejamos las opciones por defecto, y establecemos 3 columnas y tantas filas como flores tengamos.

Con estas opciones, KompoZer nos ha creado el siguiente código:

<table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    ...
  </tbody>
</table>

Observa que la tabla contiene un tbody. Esta etiqueta no es obligatoria, y podríamos quitarla.

La primera fila será el encabezado. Así que vamos a cambiar las celdas normales (<td></td>) por celdas de encabezado (<th></th>), aunque también podríamos crear una clase para el td. Podemos hacerlo directamente en el código fuente, o utilizando KompoZer, seleccionando las tres celdas con Ctrl pulsado, volviendo a pulsar en Tabla y eligiendo Estilo de celda → Cabecera.

En cualquier caso, tras introducir en las celdas de encabezado Nombre, Categoría y Ficha, nos habrá quedado el siguiente código para la primera fila:

    <tr>
      <th>Nombre</th>
      <th>Categor&iacute;a</th>
      <th>Ficha</th>
    </tr>

Ahora, para cada una de las flores, rellenamos una fila, siguiendo el orden alfabético de los nombres. Por ejemplo, para la flor de Agret, hemos introducido la siguiente fila:

    <tr>
      <td>Agret - Oxalis pes-caprae</td>
      <td>Silvestres</td>
      <td><a href="silvestres.html#agret">Ver</a></td>
    </tr>

Observa que el enlace apunta a la página de su categoría, y dentro de ella, al ID de su ficha.

Una vez que tenemos todas las flores, o por lo menos unas cuantas para apreciar mejor el estilo, vamos a definirlo.

Como puede que tengamos más tablas en nuestro sitio, tenemos que identificar esta tabla. Podríamos utilizar una clase, pero emplearemos un ID, ya que en principio, no vamos a aplicar este estilo a otras tablas. En todo caso siempre podríamos cambiarlo. Le asignamos el id="flores".

No vamos a cambiar demasiado de la tabla (table#flores). Lo único, reducir un poco la fuente (font-size: 90%;), y añadirle un borde (border: 1px solid #ff7600;), y darle un color de fondo de nuestra paleta (background-color: #f0d7b5;), un poco más oscuro que el del div.contenido.

En vez de utilizar bordes para separar las cedas, vamos a crear una nueva clase, llamada alterna (table#flores .alterna), que aplicaremos a filas alternas para diferenciarlas, y que sólo cambiará el color de fondo, para que sea el mismo que el del div.contenido (background-color: #f5e4cc;).

En el HTML de la tabla, para que no muestre el borde, quitamos el atributo border o lo ponemos a 0. Asignamos la clase alterna a la primera fila, después del encabezado, y la vamos aplicando de forma alterna a las sucesivas filas.

 

Para acabar, como la última columna siempre contendrá el mismo texto, vamos a darle un ancho fijo. Eso sí, en em, por si más tarde decidimos cambiar el tamaño de la fuente. Para hacerlo, podríamos por ejemplo definir columnas <col />, como hemos comentado en el avanzado. Pero la forma más simple es darle el ancho que queramos a la primera celda de la columna, la del encabezado, y el resto se ajustará a ese ancho. Le asignamos al th el estilo incrustado style="width: 5em;".

 

Puedes ver como ha quedado hasta ahora la página pulsando aquí.