Etiquetas de Tablas

Las tablas nos permiten organizar la información en filas y columnas. Para organizar las mismas contaremos con los siguientes tipos de etiquetas:

• Etiqueta para definir una tabla: <table>.

• Etiqueta para definir el título de una tabla: <caption>.

• Etiquetas organizar las filas: <thead>, <tbody> y <tfoot>.

• Etiqueta para definir las filas: <tr>.

• Etiqueta para definir la celdas: <th> y <td>.

Una tendencia de diseño web muy extendida a finales de los 90 y durante la primera década del 2000 era la de emplear el uso de tablas HTML para crear un layout que distribuyera los distintos elementos de la página web de una forma ordenada. Todo esto cambió a raíz de la aparición de CSS3 y el uso de técnicas como FlexBox o CSS Grid. Además, en HTML5 nunca debería emplearse etiquetas HTML con finalidades decorativas o estéticas, ya que este lenguaje está pensado para dotar a la web de una estructura que organice los contenidos y que aporte una semántica a los mismos.

Etiquetas: <table>,<caption>,<thead>,<tbody>,<tfoot>,<tr>,<th> y <td>

<table>
    <caption>Ahorro Mensual</caption>
    <thead>
        <tr>
            <th>Mes</th>
            <th>Ahorro</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Enero</td>
            <td>100€</td>
        </tr>
        <tr>
            <td>Febrero</td>
            <td>150€</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>350€</td>
        </tr>
    </tfoot>
</table>

Ejemplo de previsualización de la tabla anterior a través del navegador web

Como se puede apreciar en el ejemplo, la descripción de una tabla mediante etiquetas HTML5 resulta harto compleja y conlleva un elevado número de etiquetas. Analizemos elemento a elemento la tabla presentada, a fin de entender el funcionamiento de las distintas etiquetas.

• Título de la tabla: Lo definimos mediante la etiqueta <caption> que debe añadirse inmediatamente a continuación de la etiqueta <table> que define propiamente la tabla. En el caso de ejemplo el título es “Ahorro Mensual”.

• Fila/s de título o cabecera: Para indicar que damos inicio a una sección de cabecera en nuestra tabla, empleamos la etiqueta <thead> y dentro de la misma añadimos las filas que van a definir la cabecera de nuestra tabla. Normalmente será una única fila con los títulos de las columnas, pero podrían ser las que fueran oportunas. Para añadir las filas utilizamos la etiqueta <tr>. Finalmente definimos las celdas existentes en dicha fila, mediante el uso de la etiqueta <th>, pues se trata de celdas con datos de cabecera. En nuestro ejemplo, únicamente tenemos una fila de cabecera formada eso sí, por dos celdas cuyos valores son los textos “Mes” y “Ahorro”.

• Fila/s de datos o cuerpo: Para indicar que damos inicio al cuerpo principal de nuestra tabla, empleamos la etiqueta <tbody>. Dentro del cuerpo de nuestra tabla podremos definir las filas que deseemos como ya se ha expuesto mediante la etiqueta <tr>, definiendo eso sí, las celdas con la etiqueta <td>, pues son celdas de datos y no de cabecera. En nuestro ejemplo, hemos definido dos filas en total, con dos celdas por fila.

• Fila/s de resumen o pie: Para indicar que damos fin al conjunto de datos de la tabla y que procedemos a mostrar un resumen de los mismos, utilizamos la etiqueta <tfoot>. En ella añadimos tantas filas y celdas como consideremos oportuno, de la misma forma que ya se ha expuesto para el cuerpo de la tabla. Normalmente solo habrá una fila de resumen, y ese ha sido precisamente el caso de nuestro ejemplo, que en esa útlima fila se realiza un resumen de lo recopilado en el cuerpo de la tabla.

Una tabla no tiene por qué incluir todas las etiquetas presentadas, puede simplemente tener un conjunto de filas tr y de celdas td. Sed razonables y utilizad las etiquetas que realmente sean necesarias, ni más ni menos.

Las etiquetas vinculadas a las tablas son más fáciles de recordar si entendemos lo que significan en inglés:

• <tr>: table row.

• <th>: table header.

• <td>: table data.

Atributos especiales rowspan y colspan

Existen un par de atributos especiales cuyo uso es muy práctico, ya que nos permiten crear celdas que abarquen varias filas o columnas. Como es natural, estos atributos solo se pueden usar en las etiquetas que definen las celdas <th> o <td>. Veamos algunos ejemplos ilustrativos sobre su uso, para ello forzaremos la representación de los bordes de la tabla con el atributo “border=1”. En la práctica real jamás deberíamos usar el atributo “border” pues es un atributo prohibido en HTML5.

<table border="1">
    <tr>
        <td rowspan="2">Dato 1</td>
        <td colspan="2">Dato 2</td>
    </tr>
    <tr>
        <td>Dato 3</td>
        <td>Dato 4</td>
    </tr>
</table>

Ejemplo de previsualización de la tabla anterior a través del navegador web

En la tabla de ejemplo hemos definido la primera celda de la primera fila con una expansión de 2 filas (rowspan=”2”) lo que implica que dicha celda se extenderá hasta la segunda fila, tal y como se aprecia en la imagen. De igual forma, hemos definido la segunda celda de la primera fila con una expansión de 2 columnas (colspan=”2”) lo que implica que dicha celda se extenderá hasta la tercera columna, ocupando un espacio total de 2 columnas, tal y como también podemos observar en la imagen.

El uso de rowspan y colspan puede resultar algo confuso para los que se inician en el diseño web, por lo que al principio lo recomendable es dibujar primero la tabla que deseamos y luego pensar en las etiquetas necesarias.

Elabora los horarios de tu curso usando para ello todo lo que hemos visto sobre las tablas en HTML5. Procura utilizar también los atributos rowspan y colspan, para dotar a la tabla de una mayor complejidad y demostrar que has entendido correctamente el funcionamiento de estos dos importantes atributos.