Tablas

Una tabla es, en muchos casos, la manera más adecuada para mostrar información de forma organizada. Además, hasta la introducción de las Hojas de estilo y las Capas, en Html las tablas eran las únicas herramientas que permitían 'maquetar' o componer las páginas distribuyendo el espacio donde situar sus diferentes elementos, y todavía se utilizan con ese propósito en la mayoría de las páginas de Internet.

Estructura de una tabla

Las tablas están formadas por filas (horizontales) y columnas (verticales). El espacio formado por la intersección de una fila y una columna es una celda.

columna 1columna 2columna 3
fila 1
celda(1,1) celda(1,2) celda(1,3)
celda(2,1) celda(2,2) celda(2,3)
celda(3,1) celda(3,2) celda(3,3)
fila 2
fila 3

Una tabla se delimita por medio de la etiqueta <table> y su correspondiente etiqueta de cierre, </table>.
Cada fila dentro de la tabla se define con una etiqueta <tr> y su correspondiente </tr> al final.
Y dentro de cada fila se inserta cada una de las celdas con la etiqueta <td> y su etiqueta </td> de cierre.

En la fila de la cabecera de la tabla se ponen etiquetas <th> </th> en lugar de <td> </td>.

Normalmente todas las filas tendrán el mismo número de celdas, pero no tiene que ser así necesariamente. El número de columnas, en principio, será el de la fila que tenga más celdas.

Este sería el esquema de etiquetas de la tabla de más arriba:

<table>
<tr>
<th>...</th> <th>...</th> <th>...</th>
<td>...</td> <td>...</td> <td>...</td>
<td>...</td> <td>...</td> <td>...</td>
</tr>
<tr> </tr>
<tr> </tr>
</table>

Y éste su código Html:



<table>


  <tr>


    <th>columna 1</th>


    <th>columna 2</th>


    <th>columna 3</th>


  </tr>


  <tr>


    <td>celda(1,1)</td>


    <td>celda(1,2)</td>


    <td>celda(1,3)</td>


  </tr>


  <tr>


    <td>celda(2,1)</td>


    <td>celda(2,2)</td>


    <td>celda(2,3)</td>


  </tr>


  <tr>


    <td>celda(3,1)</td>


    <td>celda(3,2)</td>


    <td>celda(3,3)</td>


  </tr>


</table>


Atributos de <table>




Ejemplos:



<table width="100%" border="0" bgcolor="yellow">


  <tr>


    <td>celda 1</td>


    <td>celda 2</td>


  </tr>


</table>





<table width="80%" border="1" bordercolor="navy" bgcolor="aqua" cellpadding="20">


  <tr>


    <td>celda 1</td>


    <td>celda 2</td>


  </tr>


</table>





<table width="300" height="100" border="4" bordercolor="#FF0000"


 cellspacing="0" align="center">


  <tr>


    <td>celda 1</td>


    <td>celda 2</td>


    <td>celda 3</td>


  </tr>


</table>





<div align="center">


<table width="300" height="100" border="4" bordercolor="#009966"


 cellspacing="0">


  <tr>


    <td>celda 1</td>


    <td>celda 2</td>


    <td>celda 3</td>


  </tr>


</table>


</div>



En estos últimos ejemplos podemos observar la diferencia entre el atributo align en la tabla (que no afecta al contenido de las celdas) y en el contenedor <div> (que sí que puede afectar a su contenido, o no, según el navegador).

Atributos de <tr>


Ejemplos:



<table width="100%" border="0" bgcolor="yellow">


  <tr bgcolor="green" height="50">


    <td>celda 1,1</td>


    <td>celda 1,2</td>


  </tr>


  <tr align="right" bgcolor="orange">


    <td>celda 2,1</td>


    <td>celda 2,2</td>


  </tr>


</table>





<table width="300" height="150" border="4" bordercolor="#FF0000"


 cellspacing="0" align="center">


  <tr align="right" valign="top">


    <td>celda 1,1</td>


    <td>celda 1,2</td>


    <td>celda 1,3</td>


  </tr>


  <tr align="center" bgcolor="silver">


    <td>celda 2,1</td>


    <td>celda 2,2</td>


    <td>celda 2,3</td>


  </tr>


  <tr valign="bottom">


    <td>celda 3,1</td>


    <td>celda 3,2</td>


    <td>celda 3,3</td>


  </tr>


</table>



Atributos de <td>



Ejemplo:



<table width="300" height="150" border="4" bordercolor="#009966"


 cellspacing="0" align="center">


  <tr align="right" valign="top">


    <td colspan="2">celda 1,1</td>


    <td rowspan="2" bgcolor="yellow" valign="bottom">celda 1,2</td>


  </tr>


  <tr align="center" bgcolor="silver">


    <td rowspan="2" bgcolor="aqua">celda 2,1</td>


    <td>celda 2,2</td>


  </tr>


  <tr valign="bottom">


    <td colspan="2">celda 3,1</td>


  </tr>


</table>



Una celda de una tabla puede servir como contenedor para otra tabla, de esta manera pueden anidarse unas tablas dentro de otras.

Otras etiquetas de definición de tablas

Con las tres etiquetas que hemos visto - <table>, <tr> y <td> - pueden construirse todo tipo de tablas, pero hay más etiquetas, aunque se usan poco y además están soportadas de manera desigual por los distintos navegadores:

<th> ... </th> - Puede usarse en lugar de <td> ... </td> para poner, por ejemplo, los nombres o cabeceras de las columnas. Por defecto, se representa con el contenido en negrita y centrado, en todo lo demás es igual que <td> y puede tener los mismos atributos.

<caption>Título de la tabla</caption> - Pues eso, sirve para que se muestre un título o descripción de la tabla. Se pone justo detrás de la etiqueta <table>, y sólo puede haber un <caption> por tabla. Puede tener un atributo:

<thead>, <tfoot> y <tbody> - Con sus correspondientes etiquetas de cierre, pueden usarse para agrupar filas en secciones de cabecera, pie y cuerpo de la tabla. Si se ponen, deben contener al menos una fila.
En una tabla puede haber sólo una sección de cabecera y otra de pie, pero puede haber varias secciones de cuerpo.
La sección de pie se pone antes de la/s de cuerpo, aunque se mostrará al final de la tabla.
Las secciones de cabecera, pie y cuerpo de una tabla deben contener el mismo número de columnas.

<colgroup>...</colgroup> y <col> - Sirven para definir atributos comunes a todas las celdas de una columna o de un grupo de columnas. Si se ponen, deben ir antes de cualquier fila o sección de filas.
<col> no tiene etiqueta de cierre, y puede ponerse dentro o fuera de un <colgroup>. Las etiquetas <colgroup> no se anidan.
Ambas etiquetas pueden tener los siguientes atributos:


Ejemplo:



<table border="1" cellspacing="0" align="center">


<caption>-- Páginas de códigos soportadas por Microsoft Windows --</caption>


<colgroup align="center">


<col>


<col align="left">


<col span="2" width="60" bgcolor="orange">


<col span="3" bgcolor="aqua">


</colgroup>


<thead>


 <tr bgcolor="silver" valign="bottom">


  <th>ID<br>Code-Page</th>


  <th>Nombre</th>


  <th>ACP</th>


  <th>OEMCP</th>


  <th>Windows<br>NT 3.1</th>


  <th>Windows<br>NT 3.51</th>


  <th>Windows<br>95</th>


 </tr>


</thead>


<tfoot>


 <tr bgcolor="silver" valign="top">


  <th colspan="7" align="center">:: Ejemplo de pie ::</th>


 </tr>


</tfoot>


<tbody>


 <tr>


  <td>1200</td> <td>Unicode (BMP de ISO/IEC-10646)</td>


  <td><br></td> <td><br></td> <td>X</td> <td>X</td> <td>*</td>


 </tr><tr>


  <td>1250</td> <td>Windows 3.1 Europa del Este</td>


  <td>X</td> <td><br></td> <td>X</td> <td>X</td> <td>X</td>


 </tr><tr>


  <td>1251</td> <td>Windows 3.1 Cirílico</td>


  <td>X</td> <td><br></td> <td>X</td> <td>X</td> <td>X</td>


 </tr><tr>


  <td>1252</td> <td>Windows 3.1 US (ANSI)</td>


  <td>X</td> <td><br></td> <td>X</td> <td>X</td> <td>X</td>


 </tr><tr>


  <td>1253</td> <td>Windows 3.1 Griego</td>


  <td>X</td> <td><br></td> <td>X</td> <td>X</td> <td>X</td>


 </tr><tr>


  <td>1254</td> <td>Windows 3.1 Turco</td>


  <td>X</td> <td><br></td> <td>X</td> <td>X</td> <td>X</td>


 </tr><tr>


  <td>1255</td> <td>Hebreo</td>


  <td>X</td> <td><br></td> <td><br></td> <td><br></td> <td>X</td>


 </tr><tr>


  <td>1256</td> <td>Árabe</td>


  <td>X</td> <td><br></td> <td><br></td> <td><br></td> <td>X</td>


 </tr><tr>


  <td>1257</td> <td>Báltico</td>


  <td>X</td> <td><br></td> <td><br></td> <td><br></td> <td>X</td>


 </tr><tr>


  <td>1361</td> <td>Coreano (Johab)</td>


  <td>X</td> <td><br></td> <td><br></td> <td>**</td> <td>X</td>


 </tr>


</tbody>


<tbody>


 <tr>


  <td>437</td> <td>MS-DOS Estados Unidos</td>


  <td><br></td> <td>X</td> <td>X</td> <td>X</td> <td>X</td>


 </tr><tr>


  <td>708</td> <td>Árabe (ASMO 708)</td>


  <td><br></td> <td>X</td> <td><br></td> <td><br></td> <td>X</td>


 </tr><tr>


  <td>709</td> <td>Árabe (ASMO 449+, BCON V4)</td>


  <td><br></td> <td>X</td> <td><br></td> <td><br></td> <td>X</td>


 </tr><tr>


  <td>710</td> <td>Árabe (Árabe Transparente)</td>


  <td><br></td> <td>X</td> <td><br></td> <td><br></td> <td>X</td>


 </tr><tr>


  <td>720</td> <td>Árabe (ASMO Transparente)</td>


  <td><br></td> <td>X</td> <td><br></td> <td><br></td> <td>X</td>


 </tr>


</tbody>


</table>



El último ejemplo es una adaptación del que viene en la especificación de HTML 4.01 del W3C.