Ediciones ENI Editorial | líder en informática
Las tablas
La correcta utilización de las tablas
Las tablas únicamente se usan para mostrar datos tabulares. Cualquier otra utilización no es semántica y, por lo tanto, no es apropiada. Va a poder crear tablas sencillas o más elaboradas con agrupaciones de columnas, leyendas, etc. Para terminar, observe que las tablas se muestran como elementos de tipo bloque, pero tienen su tipo específico, que es table.
La estructura de las tablas
Para insertar una tabla, es necesario utilizar el elemento <table>. El resto de los elementos estructurales de las tablas, filas, columnas y celdas, se incluirán en este elemento.
Puede insertar:
-
Filas con <tr>.
-
Celdas con <td> y <th>.
-
Un título con <caption>.
-
Un encabezado con <thead>.
-
Un pie de tabla con <tfoot>.
-
Un cuerpo de tabla con <tbody>.
-
Grupos de columnas con <colgroup> y <col>.
Las líneas
En una tabla, va a tener que insertar filas con el elemento <tr> (para table row). Cada fila contendrá celdas.
A continuación se muestra una estructura inicial simplista, con tres filas:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table> Puede ver que la estructura interna de las tablas se crea con filas y no con columnas.
Las celdas
En las filas de su tabla, inserte a continuación las celdas sencillas con el elemento <td> (para table data) o las celdas de encabezado con <th> (para table header). Las celdas de encabezado se diferencian por un contenido centrado y en negrita.
A continuación se muestra un sencillo ejemplo:
<table>
<tr>
<th>Enero</th>
<th>Febrero</th>
<th>Marzo</th>
</tr>
<tr>
<td>123</td>
<td>134</td>
<td>156</td>
</tr>
<tr>
<td>213</td>
<td>256</td>
<td>273</td>
</tr>
<tr>
<td>321</td>
<td>351</td>
<td>372</td>
</tr>
</table> A continuación se muestra la visualización obtenida:...
La fusión de celdas
Puede perfectamente fusionar celdas, vertical u horizontalmente, con los atributos rowspan y colspan. El valor de estos atributos indica el número de celdas que desea fusionar.
A continuación se muestra un ejemplo donde se fusionan dos celdas verticalmente con rowspan:
<table>
<tr>
<th>Enero</th>
<th>Febrero</th>
<th>Marzo</th>
</tr>
<tr>
<td>123</td>
<td>134</td>
<td>156</td>
</tr>
<tr>
<td>213</td>
<td rowspan="2">256</td>
<td>273</td>
</tr>
<tr>
<td>321</td>
<td>372</td>
</tr>
</table> Para más facilidad de visualización, se añaden bordes a las celdas con propiedades CSS, que estudiaremos...
El título
El elemento <caption> permite añadir un título a sus tablas. Este título se va a mostrar encima de la tabla. Este elemento se sitúa justo después de la etiqueta de apertura de <table>.
A continuación se muestra un sencillo ejemplo:
<table>
<caption>Resultados primer trimestre</caption>
<tr>
<th>Enero</th>
<th>Febrero</th>
<th>Marzo</th>
</tr>
<tr>
<td>123</td>
<td>134</td>
<td>156</td>
</tr>
<tr>
<td>213</td>
<td>256</td>
<td>273</td>
</tr>
<tr>
...Los grupos de columnas
1. Agrupar columnas
Para tener formatos específicos para algunas columnas, puede agruparlos con el elemento <colgroup>. Este elemento se sitúa justo después de la etiqueta de apertura de <table>.
En este ejemplo, queremos tener las dos primeras columnas con un fondo gris. Este formato se obtiene con una regla CSS situada directamente en el elemento <colgroup>. Para este ejemplo, indicamos el número de columnas deseado con el atributo span="2":
<table>
<colgroup span="2" style="background-color: #eee;"></colgroup>
<tr>
<th>Enero</th>
<th>Febrero</th>
<th>Marzo</th>
<th>Abril</th>
</tr>
<tr>
<td>123</td>
<td>134</td>
<td>156</td>
<td>186</td>
</tr>
<tr>
<td>213</td>
<td>256</td>
<td>273</td>
<td>298</td> ...Las tablas estructuradas
Va a poder diseñar tablas muy estructuradas con los elementos <thead>, <tbody> y <tfoot>. Estos tres elementos se utilizan conjuntamente. El interés principal de la utilización de las tablas estructuradas es que si su contenido es más largo que lo que permite la visualización, el encabezado y el pie de tabla siempre estarán visibles en la pantalla. Sucede lo mismo en caso de impresión de la tabla, donde el encabezado y el pie se repiten en la parte superior e inferior de las páginas de impresión.
El elemento <thead> constituye el encabezado de la tabla. Se debe insertar después del título <caption> y de los grupos de columnas <colgroup>. En este elemento, sitúe las líneas <tr> de la tabla.
El elemento <tfoot> constituye el pie de la tabla. Observe que este elemento <tfoot> se debe ubicar antes del cuerpo de la tabla <tbody>.
El elemento <tbody> constituye el cuerpo de la tabla y contendrá las líneas <tr> de la tabla.
A continuación se muestra un ejemplo de tabla estructurado:
<table>
<thead>
<tr>
<th> </th>
<th>Enero</th>
...
