Las tablas son una forma habitual de presentar información de manera compacta y fácil de entender para el que la lee. Aunque hay muchas posibilidades, en general las tablas muestras una serie de datos (columnas) comunes para varios elementos (filas). Como ejemplos, podemos pensar en un horario, o en una tabla comparativa de varios productos.
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 |
En HTML las tablas están formadas por filas (elemento <tr>,) y estas a su vez por celdas. Las celdas pueden ser de datos (elemento <td>) o de cabecera (elemento <th>).
- El elemento
<table>contiene al resto de elementos. - Por cada fila de la tabla habrá un elemento
<tr>. Este elemento contiene una serie de elementos<td>o<th>(uno por columna). - Normalmente en la primera fila las celdas son elementos
<th>y en el resto<td>.
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>En el navegador se verá así:
En este tutorial puedes ver ejemplos de tablas avanzadas.
NOTA IMPORTANTE: Aunque era habitual hace años, no es correcto usar tablas para la maquetación de la página.