Tablas

Las tablas sirven para mostrar una serie de datos (columnas) comunes para varios elementos (filas).

Uso de las tablas

Aunque era habitual hace años, las tablas no deben ser utilizadas para organizar elementos en una web, es decir, utilizar tablas para la maquetación.

Alguno ejemplos son: un horario, una tabla comparativa de varios productos, un registro de temperaturas, etc.

Los elementos para definir una tabla son los siguientes (no es necesario usar todos):

Elemento	Descripción
`<table>`	Delimita el contenido de una tabla.
`<tr>`	Delimita cada una de las líneas de la tabla.
`<td>`	Delimita el contenido de cada celda de la tabla.
`<colgroup>`	Permite agrupar columnas.
`<tbody>`	Permite agrupar líneas de la tabla.
`<thead>`	Define la línea cabecera de la tabla.
`<th>`	Delimita cada una de las celdas de la cabecera.
`<tfoot>`	Define la fila pie de la tabla.
`<caption>`	Para añadir una leyenda a la tabla.

Características de una tabla en HTML:

El elemento <table> contiene al resto de elementos.
Las tablas están formadas por filas (<tr>) y éstas, a su vez, por celdas. Es decir, una fila se divide en columnas.
Las celdas pueden ser de datos (elemento <td>) o de cabecera (elemento <th>).
Por cada fila de la tabla habrá un elemento <tr>. Este elemento contiene una serie de elementos <td> o <th> (uno por columna).
Si la tabla tiene cabecera, las celdas de la primera fila son elementos <th>. El resto de filas, <td>.

Ejemplo

Ejemplo de tabla básica:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">        
        <title>Tablas</title>
    </head>
    <body>
        <table>
        <caption>Tabla de socios</caption>
          <tr>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Edad</th>
          </tr>
          <tr>
            <td>Juan</td>
            <td>Puertas</td>
            <td>54</td>
          </tr>
          <tr>
            <td>Eva</td>
            <td>Montes</td>
            <td>44</td>
          </tr>
        </table>
    </body>
</html>

Un navegador lo mostraría de la siguiente forma:

Probar en el navegador

Documento HTML

Bordes de una tabla

Como se puede observar, por defecto, la tabla no tiene bordes. Los bordes se deben añadir con CSS.

Ejemplo​

Ejemplo