Modulo 4 - Lección 5 - Tablas

Una tabla HTML, tal y como explica Wikipedia, es una forma gráfica de representar información de manera esquematizada, ordenada y compacta.

“Voilà”, esto podría ser un buen ejemplo de tabla que representa a alumnos con sus respectivas notas. Y el esquema HTML de la tabla anterior.

Como puedes observar, las tablas se organizan en filas y celdas.

Puede que eches de menos la organización en filas y columnas de los procesadores de texto, o que estés pensando en el por qué de la nota de Jordi, o… bueno, de momento nos tendremos que conformar con lo que hay: filas y celdas.

<table> y </table>.

La etiqueta table indica el inicio y cierre de la tabla.

El resto de etiquetas necesariamente estarán recogidas entre <table> y </table>.

<tr> y </tr>.

TR (Table Row) representa una nueva fila de la tabla.

En el ejemplo tendríamos cuatro etiquetas tr.

<td> y </td>.TD (Table Data Cell) es la etiqueta de último nivel y se traduce en una celda de datos en la tabla.

Estas son las tres etiquetas básicas y las más utilizadas.

A continuación, te presento las grandes olvidadas que pueden ser útiles según el caso frente al que nos encontremos.

No te agobies, con estas tres puedes trabajar sin problemas.

<th> y </th>.

Para añadir semántica a la tabla, contamos con la etiqueta th (Table Header Cell) que sustituye la etiqueta td para celdas de cabecera.

Es posible utilizarlas en cualquier punto de la tabla, aunque su uso se recomienda para las primeras y las últimas filas y columnas de la tabla.

Esta etiqueta también se puede utilizar para trabajar estilos; de hecho, verás que los navegadores destacan el texto de estas celdas en negrita.

<thead> y </thead>.

También es posible agrupar filas en tres bloques de estilos. thead agrupa una o más filas de cabecera,

<tbody> y </tbody>.

tbody se utiliza para agrupar filas de cuerpo, típicamente aquellas que contienen el grueso de los datos

<tfoot> y </tfoot>.

tfoot, como cabría esperar, agrupa las filas del pie de la tabla.

El código de esta tabla quedaría como aparece en pantalla.

He omitido el código de las celdas para que resulte legible.

He hablado de th, thead, tbody y tfoot para trabajar los estilos de la tabla y probablemente te estés preguntando cómo hacerlo.

Te recuerdo que trabajarás estilos en el tema CSS.

Puede que navegando por la web, te hayas encontrado con alguna tabla que tiene una cabecera como esta.

<caption> y </caption>.

Antes de intentar trabajar con combinaciones de celdas, te presento una nueva etiqueta:

Caption añade un título sobre la tabla.

De nuevo, en el ejemplo, he eliminado el código conocido para que resulte más fácil de leer.

Igual que en los procesadores de texto, en HTML es posible combinar celdas.

 

Para ello utilizamos dos atributos de las celdas: colspan y rowspan.

Atributos Colspan y rowspan

Colspan y rowspan esperan un valor entero que especifique cuántas columnas o filas, respectivamente, ocupa la celda.

En el ejemplo, un valor de dos en el atributo colspan de la celda con el texto 2012, extiende la celda para que ocupe toda la fila.

Un valor de dos en el atributo rowspan de la celda con el texto Enero, extiende la celda para que ocupe dos filas.

Aquí puedes ver un ejemplo de uso de colspan y rowspan.

Por supuesto, para que una celda pueda ocupar el espacio de otras, es necesario que ese espacio no se rellene.

<colgroup> y </colgroup>. <col> y </col>.

Seguramente hayas echado de menos las columnas o, al menos, alguna forma de poder dar estilos por columnas.

Para dar estilos por columnas podemos hacer uso de las etiquetas colgroup y col.

La etiqueta col no tiene etiqueta de cierre, pero conviene cerrarla adecuadamente para cumplir con el estándar.

Atributo span

El atributo span funciona de forma parecida en colgroup o col a como lo hacían colspan y rowspan para las celdas de la tabla.

El valor del atributo indica el número de columnas que agrupará colgroup o col.

Hay varias formas de utilizarlas, como puedes comprobar en los ejemplos.

De nuevo, para aplicar estilos a las columnas, es necesario estudiar el tema CSS.

RESUMEN

Básicas: <table> y </table>. <tr> y </tr>. <td> y </td>.
En resumen, las etiquetas básicas para codificar una tabla en HTML son table para la tabla, tr para cada fila y td para las celdas.

Título: <caption> y </caption>.

Para añadir un título a la tabla, utiliza la etiqueta caption entre las etiquetas table.

Semántica: <th> y </th>.

Th, en sustitución de td, añade semántica especificando celdas de cabecera.

Para añadir semántica a la tabla, contamos con la etiqueta th (Table Header Cell) que sustituye la etiqueta td para celdas de cabecera.

Estilo: <th> <thead> <tbody> <tfoot> <colgroup> y <col>.

Las etiquetas que puedes usar para facilitar el trabajo posterior de CSS son las agrupaciones de filas: thead para las de cabecera, tbody para las filas de datos y tfoot para las del pie de la tabla, así como agrupaciones de columnas: colgroup y col.

Atributos
colspan y rowspan (th / td)

Los atributos colspan y rowspan de las etiquetas th y td sirven para extender las celdas

span (<colgroup> y <col>)

el atributo span de las etiquetas colgroup y col para extender columnas.

Consejos

1. Utiliza tablas HTML exclusivamente para representar tablas y no caigas en la tentación de maquetar tu página con tablas: el código generado resulta farragoso, tu página no será accesible y además no es cool.

Antes se utilizaban las tablas para maquetar y, pese que a día de hoy puedas visitar algunas páginas conocidas que siguen haciendo uso de estas prácticas, como la de la CIA, hay más argumentos en contra que a favor.

En la página www.hotdesign.com/seybold/spanish, puedes leer muchos más.

2. Repasa bien la combinación de celdas, recuerda que una mala codificación puede dar lugar a resultados desastrosos.

3. Utiliza la agrupación de filas y columnas para que el posterior trabajo de estilo con CSS resulte más sencillo.

Puedes ampliar información y ver ejemplos utilizando tu buscador favorito, en alguna de las comunidades de desarrollo web como: webestilo.com o desarrolloweb.com o probando y modificando online los ejemplos Try it yourself de la w3schools.