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 y Chrome sólo las incluyen 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, mientras que en la vista preliminar de Internet Explorer o Chrome 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
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.