Crea tu web, tutor html, css

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>
Uso del elemento 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>
Uso del elemento 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

Las especificaciones de HTML 5 inciden en el aspecto semántico de los elementos web y esto hace que las tablas se recomienden solo para datos tabulares: una catálago, una lista de precios, una lista de valores ...

Siempre que se puede es recomendable seguir estas recomendaciones