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 1

columna 2

columna 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>

width="anchura" y height="altura"

Donde anchura y altura se expresan con un número de píxeles, o con un porcentaje terminado con el símbolo % relativo a la anchura o altura de la ventana o del bloque que contenga la tabla.

Si se omiten estos atributos, el tamaño de la tabla dependerá del contenido de sus celdas.

cellspacing="separación" y cellpadding="separación"

separación se expresa con un número de píxeles en ambos casos, la diferencia es que en cellspacing se refiere a la separación entre las celdas y en cellpadding a la separación entre los bordes de la celda y su contenido

Si se omiten estos atributos, la tabla se mostrará con algunos de píxeles de separación, generalmente 2 para cellspacing y 1 para cellpadding.

border="grosor" y bordercolor="color"

Donde grosor se expresa con un número de píxeles.
Si no queremos que se vea el borde, pondremos border="0".
Los bordes no se muestran en las celdas sin contenido, por lo que si queremos que se vean tendremos que poner algo, como   (espacio en blanco) o <br> (salto de línea).

color puede ser un nombre de color o un código hexadecimal precedido por el signo "#", como vimos en el capítulo 2 para las letras.

bgcolor="color"

color se expresa de la misma manera que en el atributo bordercolor, pero en este caso referido al color de fondo de la tabla.

align="posición"

Este atributo nos permite alinear la tabla respecto a la ventana o al bloque que la contenga.
posición puede tener uno de los siguientes valores:
left - alinea la tabla a la izquierda.
right - alinea la tabla a la derecha.
center - alinea la tabla en el centro.

Si se omite este atributo, la tabla se situará según la alineación establecida en su bloque contenedor, o a la izquierda por defecto.

Ejemplos:

<table width="100%" border="0" bgcolor="yellow">
  <tr>
    <td>celda 1</td>
    <td>celda 2</td>
  </tr>
</table>

celda 1

celda 2

<table width="80%" border="1" bordercolor="navy" bgcolor="aqua" cellpadding="20">
  <tr>
    <td>celda 1</td>
    <td>celda 2</td>
  </tr>
</table>

celda 1

celda 2

<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>

celda 1

celda 2

celda 3

<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>

celda 1

celda 2

celda 3

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>

height="altura" y bgcolor="color"

Atributos semejantes a los de <table>, pero sólo para las celdas de la fila.

align="posición"

Este atributo nos permite alinear horizontalmente el contenido de todas las celdas de la fila.
posición puede tener uno de los siguientes valores:
left - alinea el contenido a la izquierda (por defecto).
right - alinea el contenido a la derecha.
center - centra el contenido horizontalmente.
justify - alinea el contenido a derecha e izquierda.

valign="posición"

Con este atributo podemos alinear verticalmente el contenido de todas las celdas de la fila.
posición puede tener uno de los siguientes valores:
middle - centra el contenido verticalmente (por defecto).
top - alinea el contenido con la parte superior.
bottom - alinea el contenido con la parte inferior.

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>

celda 1,1	celda 1,2
celda 2,1	celda 2,2

<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>

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

Atributos de <td>

width="anchura"

Atributo semejante al de <table>, pero sólo para una celda.
En cualquier caso, las celdas de una columna no pueden tener anchuras distintas, por lo que la anchura de toda la columna será la de su celda más ancha, sin tener en cuenta el atributo colspan.

bgcolor="color", align="posición" y valign="posición"

Atributos semejantes a los de <tr>, pero sólo para una celda.

colspan="columnas"

Número de columnas ocupadas por la celda.

rowspan="filas"

Número de filas ocupadas por la celda.

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>

celda 1,1		celda 1,2
celda 2,1	celda 2,2
	celda 3,1

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:

align="posición"

Para indicar dónde debe aparecer el título con respecto a la tabla.
posición puede tener uno de los siguientes valores:
top - encima de la tabla (por defecto).
bottom - debajo de la tabla.
left - a la izquierda de la tabla.
right - a la derecha de la tabla.

<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:

width="anchura", bgcolor="color", align="posición" y valign="posición"

Atributos semejantes a los de <td>, pero para todas las celdas de la/s columna/s afectada/s.

span="columnas"

Donde columnas es el número de columnas que compartirán sus 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>

-- Páginas de códigos soportadas por Microsoft Windows --
ID Code-Page	Nombre	ACP	OEMCP	Windows NT 3.1	Windows NT 3.51	Windows 95
:: Ejemplo de pie ::
1200	Unicode (BMP de ISO/IEC-10646)			X	X	*
1250	Windows 3.1 Europa del Este	X		X	X	X
1251	Windows 3.1 Cirílico	X		X	X	X
1252	Windows 3.1 US (ANSI)	X		X	X	X
1253	Windows 3.1 Griego	X		X	X	X
1254	Windows 3.1 Turco	X		X	X	X
1255	Hebreo	X				X
1256	Árabe	X				X
1257	Báltico	X				X
1361	Coreano (Johab)	X			**	X
437	MS-DOS Estados Unidos		X	X	X	X
708	Árabe (ASMO 708)		X			X
709	Árabe (ASMO 449+, BCON V4)		X			X
710	Árabe (Árabe Transparente)		X			X
720	Árabe (ASMO Transparente)		X			X

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