La madre de todas las tablas

26 julio 2005 ~ Software

<table summary="resumen" cellspacing="0" class="datos">

<caption>Tarifas</caption>

<colgroup>

<col class="indice" />

<col />

<col />

<col />

</colgroup>

<tfoot>

<tr>

<td colspan="4">pie de tabla.</td>

</tr>

</tfoot>

<tbody>

<tr>

<th>Tama&ntilde;o</th>

<th>hasta 59 </th>

<th>hasta 89 </th>

<th>90 o m&aacute;s </th>

</tr>

<tr class="par">

<td>18x24cm</td>

<td align="center">8 &euro; /unidad </td>

<td align="center">7 &euro; /unidad</td>

<td align="center">6 &euro; /unidad </td>

</tr>

<tr>

<td>15x20cm</td>

<td align="center">7 &euro; /unidad</td>

<td align="center">7 &euro; /unidad</td>

<td align="center">6 &euro; /unidad </td>

</tr>

<tr class="par">

<td>13x18cm</td>

<td align="center">6 &euro; /unidad</td>

<td align="center">6 &euro; /unidad</td>

<td align="center">6 &euro; /unidad</td>

</tr>

</tbody>

</table>

Etiquetas contenedoras

Una tabla bien construida se compone de varios bloques agrupados por las siguientes etiquetas contenedoras:

table, caption, colgroup , tfoot y tbody. Cada una de ellas define un tipo distinto de contenido:

table

Esta es facil, contiene la tabla. Como parámetro admite *summary* que sirve para definir un resumen o interpretación del contenido de la tabla.

Aunque siempre es recomendable separar presentación de contenido, como no encuentro un equivalente en CSS, yo siempre le añado el parámetro cellspacing="0".

caption

Contiene el título de la tabla.

colgroup

Contiene la definición de columnas. HTML en principio no permite definir columnas (las tablas se construyen con filas tr que contiene celdas td), pero con colgroup podemos definir columnas, más que nada para diferenciarlas en la presentación (negritas, alineación de textos, etc, por columna). No he conseguido aun que me funcione bien la alineación horizontal de textos de una columna en los principales navegadores, pero sigo dándole vueltas.

tfoot

El pie de la tabla. Muy útil, por ejemplo, para citar a la fuente de los datos que se muestran en la tabla o para hacer alguna aclaración sobre los mismo (ej: "Las unidades representan miles de euros."). Nótese que se pone antes del tbody, aunque luego se pinte después. Normalmente en el tfoot se pone un tr igual que si estubieramos en el tbody.

tbody

Contiene los datos de la tabla. Los otros contenedores contenían información de contexto sobre la tabla (título, resumen...), tbody contendrá las celdas con sus datos.

Como mucha gente no usa los otros contenedores (excepto table) tampoco usa este porque no les sirve de nada, ya que no hay que distinguir el contenido del resto si no hay resto.

El tbody se compone de filas (tr) compuestas a su vez por celdas (td). Las filas, apiladas una a continuación de otra, visualmente formarán columnas, pero como ya hemos comentado al hablar de col, no existen columnas como tal (no son ramas del arbol DOM del documento).

La tabla del código adjunto, aplicándole estilos, podría quedar así (le hemos dado un estilo "datos" a la etiqueta table para poder dar formato a cada elemento de la tabla desde la hoja de estilos).

Bueno, quedaría así si le aplicamos CSS para dejarla un poco curiosa. En otro post veremos cómo darle forma a la tabla.

Tostadilla ~ 16 noviembre 05

¡¡Santo tomás de aquino!!

Me gusta tu peig, y me gusta este post. Joer, muy util. ¿sabes si existe un “tfoot” pero para imagenes? O más bien… como añadirias un pie de pagina a las fotos de los posts? Ahora mismo lo hago con una tabla y poniendolo en la celda inferior pero…

creo que estoy haciendo el ganso. Me parece demasiado una forma demasiado coñazo para algo tan recurrente. :P

chao

Jorge ~ 16 noviembre 05

Pues yo no conozco una forma directa. Es un tema que tengo pendiente de explorar y que aun no he resuelto, pero el mejor camino que se me ocurre es este:

Definimos en la imagen la etiqueta “alt” para describir la imagen y una etiqueta “tittle” para el pié de foto. Es importante usar las dos, porque “alt” debe ser una descripción objetiva que pueda suplir la imagen, mientras que en “title” podemos poner lo que queramos. (ejemplo: alt> Señor lanzando botella. title >Continuan los disturbios en París.)

Después de ésto podrías hacer un javascript que recorra la página, capture el title de las fotos y añada un “p” a continuación de las fotos con el contenido del title. Esto contado es facil, pero a ver quién es el guapo que se curra ese script.

Mientras tanto el camino más fácil sería hacer una estructura como esta por ejemplo:

[div class=”foto]

[img src=”lafoto” alt=”descripción” /]

[p]Pie de foto[/p]

[/div]

Con esto podemos, a través del CSS, dar formato a todo el conjunto foto+pie y tenemos poquito código.

« Aprendiendo a usar Textpattern (I) Brushed: Firefox con pinta de Safari »