- Hablamos ahora de las tablas. Las tablas se usan como su nombre indica para marcar datos tabulares. Las tablas pueden llegar a ser bastante complejas, y de hecho tengo pensado dedicar un tutorial completo a hablar sólo de tablas. Pero lo normal es que las utilices para hacer tablas sencillas y entonces no tienen mucha dificultad.
- Bien, me alegro.
- El elemento que se usa es el elemento TABLE:
| Elemento | TABLE |
|---|---|
| Modelo de contenido | los siguientes elementos en este orden: elemento CAPTION opcional, cero o más elementos COL y/o COLGROUP, un elemento THEAD opcional, un elemento TFOOT opcional, y uno o más elementos TBODY |
| Etiqueta inicial | obligatoria |
| Etiqueta final | obligatoria |
- ¿Te importaría explicarme qué son todos esos elementos?
- Por supuesto que no. CAPTION es el título de la tabla, lo que dice qué es la tabla. Por ejemplo, "Evolución de la población durante los últimos 10 años".
| Elemento | CAPTION |
|---|---|
| Modelo de contenido | cero o más elementos en línea |
| Etiqueta inicial | obligatoria |
| Etiqueta final | obligatoria |
- Bien, eso está claro.
- COL y COLGROUP se usan para agrupar columnas, mientras que THEAD, TFOOT y TBODY se usan para agrupar filas. Lo mejor es que son todos opcionales, y para los usos normales lo más seguro es que no tengas que utilizarlos. Así que ya hablaremos de ellos en un futuro tutorial.
- Vale, pero no estoy muy de acuerdo contigo. Según lo que has puesto arriba, debe haber uno o más elementos TBODY dentro del elemento TABLE.
- Eeh, sí, tienes toda la razón, pero mira:
| Elemento | TBODY |
|---|---|
| Modelo de contenido | uno o más elementos TR |
| Etiqueta inicial | opcional si sólo hay un TBODY y ningún THEAD y TFOOT |
| Etiqueta final | opcional |
Lo que quiere decir esto es que en las tablas sencillitas, no hace falta poner las etiquetas del elemento TBODY.
- Ya entiendo. ¿Qué es TR?
- TR es una fila de la tabla (table row). Dentro de cada fila de la tabla hay varias celdas:
| Elemento | TR |
|---|---|
| Modelo de contenido | uno o más elementos TD y/o TH |
| Etiqueta inicial | obligatoria |
| Etiqueta final | opcional |
Como ves hay dos tipos de celdas: de datos (TD, table data), y de encabezado (TH, table header):
| Elementos | TD, TH |
|---|---|
| Modelo de contenido | cero o más elementos en línea y/o en bloque |
| Etiqueta inicial | obligatoria |
| Etiqueta final | opcional |
Para que lo veas con un ejemplo, este es un caso típico de tabla HTML:
<table>
<tr>
<th>Elemento</th>
<td><code>TR</code></td>
</tr>
<tr>
<th>Modelo de contenido</th>
<td>uno o más elementos <code>TD</code>
y/o <code>TH</code></td>
</tr>
<tr>
<th>Etiqueta inicial</th>
<td>obligatoria</td>
</tr>
<tr>
<th>Etiqueta final</th>
<td>opcional</td>
</tr>
<table>
- Menudo lío. Y eso que es sencilla.
- Sí. Y aunque éstos son todos los elementos que hay para tablas en HTML, encima hay un montón de atributos. Hablaremos a fondo en el futuro, de momento vamos a pasar al siguiente grupo de elementos.
- Muy bien.