TablasTablasEn esta página se tratan los siguientes temas:
Una tabla XHTML (<table>) es una rejilla rectangular de celdas, formada por los siguientes elementos:
| Esto es la leyenda | Leyenda (<caption>) | ||||||||||||||||||||||||||||||
|
Cabecera de tabla (<thead>) | ||||||||||||||||||||||||||||||
...
|
Cuerpos de tablas (<tbody>) | ||||||||||||||||||||||||||||||
|
Pie de tabla (<tfoot>) |
A su vez, tanto los cuerpos de tabla como la cabecera y el pie de tabla están formados por varias filas (<tr>) formadas por varias celdas (<td> o <th>). Todas las filas tienen el mismo número de celdas (aunque también se pueden unir celdas horizontal y verticalmente).
| Celda | Celda | ... | Celda | Celda | |||||
|
|
|
... |
|
|
Fila (<tr>) |
El código fuente de una tabla sencilla (con un único <tbody>) sería el siguiente:
  |
<table border="1">
<caption>Ejemplo de tabla</caption>
<tbody>
<tr>
<td></td>
<th>A</th>
<th>B</th>
</tr>
<tr>
<th>1</th>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<th>2</th>
<td>A2</td>
<td>B2</td>
</tr>
</tbody>
</table>
|
|
Volver al principio de la página
La leyenda (<caption>) es texto explicativo opcional que se muestra fuera de la tabla (normalmente, arriba). La leyenda no puede incluir párrafos ni otros elementos de bloque, aunque sí etiquetas en línea (<strong>, imágenes, etc).
Los navegadores dan a la leyenda el mismo ancho que a la tabla, por lo que si una leyenda es larga y la tabla estrecha, la leyenda ocupará varias líneas, como muestra el ejemplo siguiente:
| |
|
Volver al principio de la página
El cuerpo de tabla (<tbody>) es obligatorio y puede haber tantos como se quiera.
Tanto a cabecera de la tabla (<thead>) como el pie de tabla (<tfoot>) son opcionales y sólo puede haber uno de cada por tabla. En el código fuente, la etiqueta <tfoot> se encuentra situada antes del primer <tbody>, aunque los navegadores la muestran al final de la tabla.
| |
<table border="1">
<caption>Ejemplo de tabla</caption>
<thead>
<tr>
<th>thead</th>
<td>celda 1</td>
<td>celda 2</td>
</tr>
</thead>
<tfoot>
<tr>
<th>tfoot</th>
<td>celda 1</td>
<td>celda 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>tbody</th>
<td>celda 1</td>
<td>celda 2</td>
</tr>
</tbody>
</table>
|
|
Al imprimir una tabla que ocupa varias páginas, Firefox repite al principio y al final de cada página las cabeceras <thead> y pies de tabla <tfoot>, mientras que Internet Explorer sólo los imprime al principio y al final de la tabla. Se puede comprobar, por ejemplo, con la página de explicación sobre colores CSS, en la que la tabla de colores X11/SVG no cabe en una sola página. En la vista preliminar de Firefox se puede ver cómo la cabecera <thead> de esta tabla se coloca al principio de cada página (en la vista preliminar de Internet Explorer se puede ver cómo la cabecera sólo se coloca al principio de la tabla)..
Volver al principio de la página
Cada celda de la tabla está marcada con la etiqueta <td> (celda de datos), aunque también se pueden marcar con la etiqueta <th> (celda de cabecera). Las celdas <th> están pensadas para utilizarse en las celdas que sirven de cabecera para la fila o columna, por lo que los navegadores las muestran resaltadas (normalmente, en negrita y centradas en horizontal), aunque se pueden utilizar en cualquier celda.
| |
<table border="1">
<caption>Fútbol 1º división</caption>
<tbody>
<tr>
<td></td>
<th>2003/2004</th>
<th>2004/2005</th>
</tr>
<tr>
<th>Campeón</th>
<td>Valencia C.F.</td>
<td>F.C. Barcelona</td>
</tr>
<tr>
<th>Subcampeón</th>
<td>F.C. Barcelona</td>
<td>R. Madrid</td>
</tr>
</tbody>
</table>
|
|
Nota: Internet Explorer 8 muestra correctamente el borde de las celdas cuando una celda está vacía. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.
Volver al principio de la página
Aunque las celdas de una tabla (<td> y <th>) estén organizadas en filas (<tr>) y grupos de filas (<tbody>, <thead> y <tfoot>), también existen dos etiquetas que permiten hacer referencia a las columnas de una tabla: las etiquetas <col /> (columna) y <colgroup> (grupo de columnas).
La etiqueta <col /> permite hacer referencia a una columna y la etiqueta <colgroup> permite definir grupos de columnas (de manera similar a como la etiqueta <tbody> define grupos de filas).
Las etiquetas <col /> y <colgroup> se encuentran situadas al principio de la tabla, después de la etiqueta <caption>.
El ejemplo siguiente muestra la situación de las estiquetas <col /> y <colgroup> en una tabla.
1 <table border="1" > 2 <caption>Leyenda</caption> 3 <colgroup><col /><col /></colgroup><colgroup><col /></colgroup> 4 <tbody> 5 <tr> 6 <td>1</td> 7 <td>2</td> 8 <td>3</td> 9 </tr> 10 </tbody> 11 </table>
Cada etiqueta <col /> corresponde a una columna, en el mismo orden (la primera etiqueta <col /> corresponde a la primera columna, y así sucesivamente). En el ejemplo anterior, hay definidas dos grupos de columnas, el primero de los cuales abarca dos columnas y el segundo una columna.
Puede haber menos etiquetas <col /> que columnas en la tabla (también puede haber más, pero serían innecesarias).
En una tabla puede haber únicamente etiquetas <col /> (es decir, puede no haber etiquetas <colgroup />), pero si hay una etiqueta <colgroup /> ya no puede haber etiquetas <col /> que no estén dentro de una etiqueta <colgroup>.
Volver al principio de la página
Autor: Bartolomé Sintes Marco