Primeros pasos con HTML – Lección 5 – Tablas

Las tablas son una de las formas más importantes de almacenar información. Las tablas se utilizan en Excel, Access y otras bases de datos. Las tablas representan los datos de manera clara y visual, lo que facilita la creación de gráficos y diagramas con esos datos.
En esta lección vamos a aprender cómo crear tablas en HTML. Para ello, utilizaremos las etiquetas <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>.

Etiqueta table

TABLE es la etiqueta principal para la tabla, dentro de ella se incluirán las otras etiquetas de la tabla.

<table>
</table>

Todas las demás etiquetas se escribirán dentro de esta etiqueta.

Etiqueta tr

TR es la etiqueta de fila, cada fila se define dentro de la etiqueta <tr></tr>. Si queremos tres filas en la tabla, entonces necesitamos tres de estas etiquetas:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Etiqueta td

TD es la etiqueta de celda, cada celda debe estar dentro de una fila. Para que la tabla se muestre correctamente, el número de celdas debe coincidir. Vamos a hacer una tabla con cuatro celdas por fila:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Ahora vamos a llenar la tabla con datos:

<table>
  <tr>
    <td>Número</td>
    <td>Apellido</td>
    <td>Nombre</td>
    <td>Segundo nombre</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Ivánov</td>
    <td>Iván</td>
    <td>Ivánovich</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Pétrov</td>
    <td>Pétro</td>
    <td>Pétrovich</td>
  </tr>
</table>

Ahora podemos organizar la tabla lógicamente dividiéndola en tres secciones: thead - el encabezado, tbody - el contenido, tfoot - el pie de la tabla.

Etiqueta tbody

TBODY no es obligatorio, pero puede añadirse para indicar que aquí se encuentra la información principal de la tabla.

<table>
  <tbody>
    <tr>
      <td>Número</td>
      <td>Apellido</td>
      <td>Nombre</td>
      <td>Segundo nombre</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Ivánov</td>
      <td>Iván</td>
      <td>Ivánovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Pétrov</td>
      <td>Pétro</td>
      <td>Pétrovich</td>
    </tr>
  </tbody>
</table>

Etiqueta thead

THEAD se utiliza para crear el encabezado de la tabla. Intentemos colocar la primera fila dentro de thead.

<table>
  <thead>
    <tr>
      <td>Número</td>
      <td>Apellido</td>
      <td>Nombre</td>
      <td>Segundo nombre</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivánov</td>
      <td>Iván</td>
      <td>Ivánovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Pétrov</td>
      <td>Pétro</td>
      <td>Pétrovich</td>
    </tr>
  </tbody>
</table>

Ahora, en lugar de las celdas td, usamos las celdas th, para indicar que son los encabezados de las columnas:

<table>
  <thead>
    <tr>
      <th>Número</th>
      <th>Apellido</th>
      <th>Nombre</th>
      <th>Segundo nombre</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivánov</td>
      <td>Iván</td>
      <td>Ivánovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Pétrov</td>
      <td>Pétro</td>
      <td>Pétrovich</td>
    </tr>
  </tbody>
</table>

Y si tienes un navegador compatible, los encabezados de las columnas deberían aparecer en negrita, al menos. Y aún nos queda otro atributo de pie de tabla: tfoot.

Etiqueta tfoot

TFOOT define el pie de la tabla.

<table>
  <thead>
    <tr>
      <th>Número</th>
      <th>Apellido</th>
      <th>Nombre</th>
      <th>Segundo nombre</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivánov</td>
      <td>Iván</td>
      <td>Ivánovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Pétrov</td>
      <td>Pétro</td>
      <td>Pétrovich</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Creación de la tabla 2012</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Atributo colspan

Uno de los atributos más importantes de la etiqueta td es colspan, que permite combinar celdas. Vamos a ver nuestro pie de tabla. Tenemos 4 celdas, pero solo una está llenada, por lo que podemos combinar esas cuatro celdas. Utilicemos el atributo colspan.

<table>
  <thead>
    <tr>
      <th>Número</th>
      <th>Apellido</th>
      <th>Nombre</th>
      <th>Segundo nombre</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivánov</td>
      <td>Iván</td>
      <td>Ivánovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Pétrov</td>
      <td>Pétro</td>
      <td>Pétrovich</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Creación de la tabla 2012</td>
    </tr>
  </tfoot>
</table>

Ahora tenemos una celda grande que ocupa el espacio de 4 celdas. El valor del atributo colspan es el número de celdas combinadas.