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.

 

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