1. Introducción

Uno de los objetos más utilizados en la web, tanto para mostrar datos como para ajustar el diseño de la hoja son las tablas. En esta unidad aprenderemos las etiquetas necesarias para hacerlas.

2. Tablas

Una tabla es una serie de celdas distribuidas en filas y columnas. Cada una de esas celdas se comporta casi como una página web en pequeño. En su interior podemos insertar desde un simple número hasta las series más largas de información o elementos multimedia que se nos ocurran.

Como sucedía con las listas, HTML sólo cuenta con etiquetas capaces de definir la estructura completa de la tabla, pero no su apariencia; los colores, anchuras de línea, fondos y otros aspectos se dejan para los estilos CSS.

Una tabla mínima se diseña con tres etiquetas y sus respectivos cierres:

• <table> para definir el comienzo de la tabla. A la tabla le podemos añadir el parámetro border="1" para indicar si la tabla tendrá un borde.
• <tr> para indicar el comienzo de una fila.
• <td> para el comienzo de una celda.

Veamos un ejemplo de tabla:

<h1>Tardes ocupadas</h1>
<table> 
 <tr> 
  <td>Lunes</td> 
  <td>Martes</td> 
  <td>Miércoles</td>
  <td>Jueves</td>
  <td>Viernes</td> 
 </tr> 
 <tr> 
  <td>Lengua</td> 
  <td>&nbsp; </td> 
  <td>Matemáticas</td> 
  <td>Música</td> 
  <td>&nbsp;</td> 
 </tr> 
</table>

Crear tablas a mano es laborioso, aunque es un buen ejercicio para entender cómo funcionan.

3. Tablas irregulares

Cada celda de una tabla puede contar con dos parámetros, para que la celda se extienda más allá de lo normal:

• colspan: hace que la celda se extienda hacia la derecha, tantas celdas como se indique en su valor.
• rowspan: la celda se extenderá hacia abajo, tantas filas como se indique.

Veámoslo con un ejemplo sencillo. La tabla de la imagen es completamente regular.

<table width="50%" border="1" >
  <tr style="background-color: rgb(102, 255, 153);">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Hemos añadido el color verde para que se vea mejor el efecto con el código style="background-color: rgb(102, 255, 153);". Si quisieramos que sólo una celda cambiara de color se lo pondríamos a la etiqueta <td> de la celda. Otra formato para definir el color sería style="background-color: red;".

La tabla tiene cuatro columnas, así que, para que la primera fila se componga de una sola celda, debemos indicarle que ésta va a superponerse sobre las otras cuatro. Pasaríamos de una primera fila con esta apariencia:

 <tr style="background-color: rgb(102, 255, 153);">
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>

A esta otra y el

 <tr style="background-color: rgb(102, 255, 153);">
  <td colspan="4">&nbsp;</td>
 </tr>

El resultado se muestra en la imagen:

Hemos eliminado las otras tres filas, para evitar que aparezcan en la parte derecha, descuadrando la tabla. Si las hubiéramos dejado el resultado sería el siguiente:

<tr style="background-color: rgb(102, 255, 153);">
  <td colspan="4">&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>

En el siguiente ejemplo hemos aplicado el valor rowspan a las tres primeras celdas de la izquierda. El código HTML completo es el siguiente:

<table width="50%" border="1" >
  <tr style="background-color: rgb(102, 255, 153);">
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Y así se ve en el navegador.

Como podemos observar la tabla se ha descuadrado ya que la última celda de las dos últimas filas se ha desplazado a la derecha al añadir con rowspan la celda superior. Para solucionarlo deberemos hacer lo mismo que hemos hecho en el caso anterior, eliminar las celdas sobrantes:

<table width="50%" border="1" >
  <tr style="background-color: rgb(102, 255, 153);">
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Y así se ve en el navegador:

Ha llegado el momento de que demuestres lo aprendido.

• Crea un nuevo documento HTML y guárdalo como tablas.htm.
• Crea toda la estructura básica del documento, recuerda: <!DOCTYPE html>, <html>,<head>... Puedes revisar el primero que hiciste.
• Añade las etiquetas meta para el autor, descripción y palabras claves.
• Añade la etiqueta de título con el texto "Mis primeras tablas".
• En el bloque <body> deberás crear las siguientes tablas, recuerda que para cambiar el color de una celda puedes usar en la etiqueta <td> el parámetro style="background-color: red;" donde "red" es el color en inglés.

• Guarda el documento tablas.htm y súbelo a la plataforma.