Las tablas en HTML-5

Si vienes del HTML4 casi seguro que habrás usado tablas para dar una apariencia agradable a tus páginas web. Las celdas de las tablas son ideales para organizar el texto crear apartados y maquetar la página. Pero las tablas no se inventaron para eso sino para mostrar datos. Y para eso la usa HTML-5.

Se pueden seguir usando el viejo estilo, pero no es recomendable si queremos una página bien diseñada que se adapta a los diferentes entornos donde sea vista: móviles, tables, ordenadores de todos los tamaños o incluso televisores.

Además las tablas pueden enlentecer tu página. 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.

Siguiendo con nuestro ejemplo de la página de libros vamos a crear una tabla completa para mostrar las categorías y los ejemplares de cada una de ellas. Una tabla se puede definir tan solo con las etiquetas <table>, <tr> y <td>, pero otras más:

<table></table>
Marca el inicio y fin de la tabla.
<caption></caption>
Se puede usar para darle un título a la tabla. Opcional.
<thead></thead>
Es la fila superior de la tabla, puede usarse para encabezar columnas. Opcional.
<colgroup></colgroup>
Se usa para marcar un conjunto de columnas (marcadas con la etiqueta <col>) dentro de una table. Util para dar formato a columnas
<col></col>
Para marcar el estilo de las columnas dentro de un <colgroup>. Cada marcador selecciona una columna comenzando por la izquierda. Se pueden agrupar con la etiqueta <span>.
<tr></tr>
Marca cada fila de la tabla, dentro de ella se colocan las celdas.
<td></td>
Son celdas dentro de cada fila (horizontal) de la tabla.
<th></th>
Marcan las celdas de la fila de cabecera
<tbody></tbody>
Puede usarse para marcar el contenido de la tabla, las filas y celdas con datos. Opcional.
<tfoot></tfoot>
Se puede usar para ponerle una fila de pie a la tabla. Es opcional.
 
Observa el ejemplo y fíjate que todo aparece en su stio aunque estén "desordenados" en el código.

<table style="width:19%">
<caption>Mis libros</caption>
<thead>
<tr>
<th style="width:59%">categoria</th>
<th style="width:41%">ejemplares</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td align="center">59</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Infantiles</td>
<td align="center">12</td>
</tr>
<tr>
<td>Drama</td>
<td align="center">10</td>
</tr>
<tr>
<td>Historia</td>
<td align="center">23</td>
</tr>
<tr>
<td>Terror</td>
<td align="center">14</td>
</tr>
</tbody>

</table>

Usando código CSS podemos hacer que cada elemento aparezca con una forma diferente (negritas, colores, alineaciones, tipo de letra...). Crea la página y coloca esta tabla, será tu ejercicio03.htm. Luego la vamos a modificar. Pero primero veamos algo sobre los atributos que soportan las tablas, hay cambios respecto a html4, olvidate de los valign, align, width y similares. Para eso ahora se usan los estilos CSS