Las tablas son muy útiles para ordenar la información. Este conjunto de cuadros que aprendimos a hacer en la primaria nos ha acompañado siempre en nuestras vidas, sobretodo a la hora de estudiar o analizar alguna situación (por ejemplo económica). Construirlas con HTML parece complejo, pero no lo es. Observa.
Tablas
En HTML hay todo un conjunto de elementos que nos permiten construir tablas de cualquier manera. Lo bueno de hacerlas con este lenguaje es que permite una mayor flexibilidad que Microsfot Word o Microsoft Excel.
Aún así la complejidad de crear tablas reside en memorizar bien cómo ordenar las etiquetas.
Elementos principales
A diferencia de lo que hacemos normalmente para construir una tabla (contar el número de filas y el de columnas) con HTML trabajaremos el concepto de contar filas por celdas. Aunque en realidad viene a ser lo mismo.
Con los tres elementos siguientes podrás trabajar para construir un sinfín de tablas.
<table></table>
Este elemento define el principio y el final de la tabla. Si empezamos a escribir celdas y filas fuera del contenido de este elemento no formarán parte de ninguna tabla. Sin
<table> y
</table> no habrá tabla.
<tr></tr>
Con este elemento indicaremos cada una de las filas de la tabla. Por cada fila deberemos escribir
<tr></tr>. En el contenido de estos elementos escribiremos el contenido de cada fila (las celdas, los textos...)
<td></td>
Este tercer elemento nos sirve para escribir las celdas de cada fila. Deberás escribir entre las etiquetas
<tr> y
</tr> de cada fila el número de
<td></td> por cada celda quieras que haya. Es decir, el número de columnas de la tabla será el número de veces que deberás escribir este elemento dentro de cada fila.
Entre
<td> y
</td> es donde podrás escribir el contenido de cada celda.
Escribiré un ejemplo que deberás copiar en tu editor de texto y probarlo tu mismo:
<table>
<tr>
<td>Andrea</td>
<td>10</td>
</tr>
<tr>
<td>Guillermo</td>
<td>8</td>
</tr>
<tr>
<td>Fernando</td>
<td>6</td>
</tr>
</table>
Una vez lo hayas probado con tu navegador observarás que no hay bordes ni líneas que delimiten las celdas de la tabla, ni un cadrado que enmarce la tabla. Tranquilo: es normal. Todo eso va relacionado con el estilo y la estética de la web, así que ya puedes imaginarte que lo dejaremos para más adelante, cuando trabajemos con CSS.
Como ya he dicho todos los elementos de la tabla deben estar entre las etiquetas
<table> y
</table>. Cada elemento "tr" corresponde a una fila (que se lee de izquierda a derecha) y por eso debemos ordenar las celdas con el elemento "td" por filas (de izquierda a derecha). En el ejemplo hay un listado de tres alumnos y sus notas correspondientes, y en cada fila se debe poner un alumno y su nota correspondiente.
Puede que estés acostumbrado a escribir así las tablas, o puede que seas de los que primero escribe la columna de los nombres y luego la de las notas. En ambos casos recomiendo que dibujes primero la tabla a mano o la diseñes en otro programa para luego reconstruirla con HTML, siguiendo el orden de izquierda a derecha de las celdas para no desorientarte.
Etiquetas para el formato
<th></th>
Aunque con las tres etiquetas anteriores podrías hacer casi todas las tablas que quisieras hay otra etiqueta de celda que sustitue a las
<td> y
</td>. Ésta sirve para crear celdas con aspecto de cabecera para la columna. En el ejemplo podríamos poner una celda en la primera columna con la cabecera "Alumnos" y a la otra con la cabecera "Notas".
Añade el siguiente código al ejempo anterior (me salto el texto entre las etiquetas
<tr> y
</tr> para hacer más corta la entrada).
<table>
<tr>
<th>Alumnos</th>
<th>Notas</th>
</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Observarás que el formato que da al texto de las celdas es parecido al de una cabecera (como podría ser el elemento "h4").
Puedes usar estas etiquetas de celda siempre que quieras, pero estan pensadas para utilizarlas al principio o al final de la tabla (donde podríamos poner la media de notas del curso, ¿sabrías hacerlo?).
<caption></caption>
A veces queremos poner dentro de la tabla una única celda de cabecera, como un título para la tabla en sí y que forme parte de ella.
Podemos conseguirlo escribiendo el título entre las etiquetas <caption> y </caption> al principio de la tabla.
<table>
<caption>CURSO</caption>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Realmente puedes escribirlo donde quieras del contenido del elemento "table" y siempre saldrá como el cabezal de toda la tabla. Pero si de verdad vas a escribir así tus páginas web vuelve a leer
esta entrada ahora mismo y no vuelvas hasta terminarla.
Etiquetas para agrupar bloques para el estilo
Cuando trabajemos más adelante con CSS (u otros lenguajes que puedan combinarse con HTML) necesitarás agrupar los elementos a "decorar" en diferentes tipos de bloques para luego añadirles la orden de estilo.
Agrupar filas
Existen tres tipos de etiquetas para agrupar filas que además están relacionadas con el sector que representan: cabezal, cuerpo y pie de la tabla.
Estas etiquetas son
<thead></thead> para el cabezal de la tabla,
<tbody></tbody> para el cuerpo de la talba y
<tfoot></tfoot> para el pie de la tabla.
<table>
<thead>
<caption>CURSO</caption>
<tr>
<th>Alumnos</th>
<th>Notas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andrea</td>
<td>10</td>
</tr>
<tr>
<td>Guillermo</td>
<td>8</td>
</tr>
<tr>
<td>Fernando</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Media</th>
<td>8</td>
</tr>
</tfoot>
</table>
Si copias el ejemplo y lo lanzas a tu navegador comprobarás que no hay ninguna diferencia de estilo. Repito: sirve para agrupar las filas con las que trabajaremos más adelante con CSS.
Agrupar columnas
<colgroup></colgroup> y <col/>
Como ya he explicado al principio, las tablas construidas en HTML se calculan con filas y celdas. Aunque no se defina el número de columnas, sí se pueden agrupar éstas para poder darles estilos con CSS (igual que con las filas).
Estos dos elementos sirven para lo mismo y el resultado es igual para los dos, así que escoge el que más te guste, combinalos o usa los dos a menudo para no
olvidarlos. El elemento "colgroup" dispone tanto de etiqueta
de apertura como de cierre pero el elemento "col" no dispone de
etiqueta de cierre y debe ser cerrado adecuadamente con la barra "/" al final.
En este caso, a falta de un elemento que calcule el número de columnas, usaremos un atributo para definir el número de columnas que forman parte de la agrupación. Usaremos
span="número" y en el valor escribiremos el número de columnas a agrupar.
Por ejemplo: si tenemos una tabla de dos columnas y queremos agrupar las dos para que tengan el mismo estilo (por ejemplo, las dos de color azul) usaremos solo uno de los elementos "colgroup" o "col" con el atributo
span="2". Si queremos hacer dos agrupaciones diferentes (por ejemplo, una columna azul y la otra roja) usaremos dos elementos con el atributo
span="1" (o podemos ahorrarnos poner el atributo, porque de manera predeterminada el valor es 1).
Si fuese una tabla de tres columnas con las dos primeras iguales (por ejemplo azules) y la tercera diferente (por ejemplo roja) usaremos una de las etiquetas con el atributo
span="2" y después una de las etiquetas con el atributo
span="1" (o sin el atributo).
El orden en que se escriban los elementos "colgroup" o "col" será el orden (de izquierda a derecha) en que se agruparán las columnas.
Combinación de celdas
Si lo deseamos podemos combinar diferentes celdas contiguas de una misma tabla.
Ésto se usa añadiendo a las etiquetas de celda ("td" y "th") el atributo colspan="número" y rowspan="número".
En el caso de querer juntar varias celdas de una misma columna el atributo será colspan="número" donde el valor será el número de celdas que quieras combinar. El atributo deberás ponerlo en la primera celda de la columna y las otras no deben ser escritas con ninguna etiqueta, para que la celda original pueda ocupar el espacio de éstas.
En el caso de querer juntar varias celdas de una misma fila el atributo será rowspan="número" donde el valor será el número de celdas que quieras combinar. El atributo deberás ponerlo en la primera celda de la fila y las otras no deben ser escritas con ninguna etiqueta, para que la celda original ocupe el espacio de éstas.
Consejos
- Utiliza las tablas solo para estructurar información en el contexto de tabla. No las uses nunca para estructurar tus páginas web. Es cierto que muchos desarrolladores han usado (y algunos siguen usando) el sistema de tablas para estructurar las partes de una página web, pero no es para nada aconsejable: puede crear problemas de visualización y existen etiquetas preparadas específicamente para ello.
- Utiliza las agrupaciones de filas y columnas y deja el estilo de la tabla para el código CSS. Podrás trabajar mejor y en caso necesario será más rápido el proceso de rediseño de tu web.
- Repasa bien la codificación de celdas. Asegúrate que la estructura de tu tabla es la correcta para que se vea como tú desees en todos los navegadores.
