Tablas

La explicación de hoy consistió en la realización y la presentación de tablas en XHTML. La estructura básica para la generación de una tabla es la siguiente:

<table border=”0″ cellspacing=”0″ cellpading=”0″>

<caption>Título de la tabla</caption>

<thead>

…

</thead>

<tfoot>

…

</tfoot>

<tbody>

…

</tbody>

</table>

Dentro de la etiqueta table, los atributos especificados se utilizan para lo siguiente:

• Border: tipo de borde de la tabla.
• Cellspacing: espacio entre celdas.
• Cellpadding: espacio interior entre el límite de la celda y su contenido.

Dentro de <thead>, <tfoot> y <tbody>, las filas se añaden mediante las etiquetas <tr>…</tr>. Para los dos primeros casos, sólo se especificará una fila, mientras que para <tbody>, se marcarán tantas filas como se desee. Posteriormente, para cada fila, ésta se descompondrá en celdas mediante <td>…</td>, donde realmente se escribirá el contenido de la celda.

Para combinar varias celdas en una, se pueden utilizar los atributos de la etiqueta td: colspan=”X” (la celda ocupará tantas columnas como le indiquemos) o rowspan=”X” (la celda ocupará tantas filas como le indiquemos).

Dentro de los estilos css para tablas, disponemos de un gran número de posibilidades. Simplemente, destacar las siguientes:

• border-collapse: collapse / separate. La opción collapse hace que los bordes de las celdas se solapen, mostrando uno solo. En caso contrario, cada celda tendrá su borde.
• empty-cell: show / hide. Mostrar u ocultar las celdas vacías.
• text-align: left / center / right. Alineación del contenido dentro de las celdas.

Etiquetas: tablas