Las tablas en HTML-5

¿Qué es una tabla? Una serie de datos ordenados en filas (horizontal) y columnas (vertical). La intersección de filas y columnas forman las celdas.

Si vienes del HTML4 casi seguro que habrás usado tablas para distribuir el texto e imágenes de la forma más adecuada. Las celdas de las tablas son ideales para organizar el texto crear apartados y maquetar la página. Y era más fácil que usar los elementos div. Pero las tablas no se inventaron para eso sino para mostrar datos. Y a HTML5 recomienda que solo se usen para eso, mientras que para maquetar y organizar ha potenicado enormemente el uso de los bloques <div>

El uso excesivo de tablas puede enlentecer las página web. El explorador debe esperar a tener toda la tabla para distribuir el contenido, si bien las velocidades que se manejan hoy día en internet hacen que este retraso sea pequeño, que sepas que existe.

Caption: La Tabla

columna 1	columna 2	columna 3
celda col 1 fila 1	celda col 2 fila 1	celda col 3 fila 1
celda col 1 fila 2	celda col 2 fila 2	celda col 3 fila 2
celda col 1 fila 3	celda col 2 fila 3	celda col 3 fila 3
celda col 1 fila 4	celda col 1 fila 4	celda col 1 fila 4
celda col 1 foot	celda col 2 foot	celda col 3 foot

En esta tabla tienes los elementos básicos de una tabla, no todos son obligatorios. Existen varias zonas o secciones dentro de la tabla.

La tabla

La tabla se construye con las etiquetas <table></table>.Es el contenedor padre de las restatnes secciones

El caption

Se forma con las etiquetas <caption></caption> y es donde se puede colocar el tíulo de la tabla.

Cabecera

Se crea con las etiquetas <thead></thead>, y las celdas que contienen se consideran cabeceras, titulos de grupos de celdas, habituamente columnas. siempre va a aprecer por encima del cuerpo. Contienen las celdas marcadas como <th></th> con el texto que se quiera colocar como cabeceras. El contenido va a aparecer destacado, por defecto en negrita.
Tiene un atributo scope cuyo valor indica a que grupo de celdas se aplica la cabecera, por defecto a la columna en que aparece (scope="col"), pero puede también aplicarse a su fila (scope="row") a su sección (scope="rowgroup") o a su grupo de columnas (scope="colgroup").

Cuerpo

Se forma con las etiquetas <tbody></tbody> Es donde se colocan las celdas con los datos de la tabla

Pie

Se crea con lass etiquetas <tfoot></tfoot>. Siempre va a aprecer bajo el cuerpo Se puede usar bajo las columnas para totales, resumen o notas

Las filas

Se marcan con las etiquetas <tr></tr>, que contienen las celdas marcadas como <td></td>, dentro de estas se escrien los datos.

Como ves la única sección con un estilo diferenciado es la seción <thead> las restantes deben redefinirse con un estilo CSS o etiquetas de formato si se quieren resaltar, por ejemplo para las secciones caption o tfoot.

<table style="width:300px">

<caption>Mis libros</caption>

<thead>

<tr>

<th style="width:59%">categoria</th>

<th style="width:41%">ejemplares</th>

</tr>

</thead>

<tbody>

<tr>

<td>Infantiles</td>

<td>12</td>

</tr>

<tr>

<td>Drama</td>

<td>10</td>

</tr>

<tr>

<td>Historia</td>

<td>23</td>

</tr>

<tr>

<td>Terror</td>

<td>14</td>

</tr>

</tbody>

<tfoot style="font-weight:bold">

<tr>

<td>Total</td>

<td>59</td>

</tr>

</tfoot>

</table>

Por supuesto todas las secciones no son imprescindibles. Las únicas que no deben faltar son <table>, <tr>
y <td>. Es decir, las que definen la tabla y permiten colocar el contenido.

Esiste una sección que no se ha usado en el ejemplo y que puede tener cierta utilidad. Se trata de los grupos de columnas, es una sección <colgroup></colgroup>
que contiene elementos <col>. En principio se usa para estilos, con ella puedes establecer el fondo y el ancho de las columnas, aunque esto también puedes hacerlo con las cabeceras de columnas.

<table>

<colgroup>

<col span="2" style="background: lightgrey">

<col style="background: aliceblue">

</colgroup>

<tbody>

<tr>

<td>Texto</td>

<td>Informática</td>

<td>ESO</td>

</tr>

<tr>

<td>Ejercicios</td>

<td>Matemáticas</td>

<td>Bac</td>

</tr>

</tbody>

</table>

El elemento colgroup no puede afectar al estilo de celdas o filas, pues no son sus elementos hijos. Realmente este elemento no es excesivamente útil, es más práctico usar estilos CSS.

Es un buen momento para practicar esots ejercicios sobre tablas