Manual de HTML para principiantes - Tablas (I)

¿Habéis visto alguna tabla de word? ¿Si,? Pues ya sabéis los que son las tablas. En realidad es una forma de agrupar la información en columnas y filas divididas en celdas.

Aunque las tablas se pensaron para hacer listados de datos como agendas, resultados, balances etc., pronto se vio que servían para mucho más. Durante mucho tiempo han sido y siguen siendo utilizadas para organizar los elementos dentro de cada página.

Hoy por hoy la mayoría de los diseñadores basan la maquetación de las páginas en tablas, pues permiten organizar y distribuir espacios de forma bastante sencilla una vez que se ha cogido práctica. Con tablas podemos simular texto en columnas como en los periódicos.

Sin embargo esta utilización de las tablas puede dar lugar a unas páginas más lentas y de difícil acceso para personas incapacitadas que utilicen lectores de pantalla o navegadores de voz. Por ello, hoy día la corriente liderada por la W3C nos invita a olvidarnos de las tablas y utilizar capas.
Algunas personas han optado por una solución intermedia utilizando tablas para maquetar el contenido pero dejando todos los aspectos visuales a las hojas de estilo. Elegir un modo u otro de hacer páginas es más una cuestión de compromiso personal con una web más accesible para todos que de estilo de programación.

ETIQUETAS BÁSICAS

Vamos a ver primero cuáles son las etiquetas básicas. Para definir una tabla utilizamos las etiquetas:

Cada fila de una de una tabla se define con las etiquetas

Dentro de cada fila, tenemos las celdas que se definen con las etiquetas

Dentro de las celdas es dónde pondremos nuestro contenidos. El número de "celdas" que tengamos dentro de una tabla determina el número de columnas que tendremos.

Veamos nuestra primera tabla:

Nota: Veremos mejor las tablas, si les definimos un borde alrededor. Aunque después veremos cómo se hace con CSS, de momento vamos a definirle un borde a nuestra tabla con HTML para poder ver realmente cómo se estructuran las filas y columnas de las tablas. Así que repetimos nuestra tabla con añadiéndole a la tabla el atributo "border=1"

AGRUPANDO CELDAS
A veces es posible que queramos agrupar 2 o más celdas de una fila o dos o más celdas de una columna. Se hace utilizando los atributos "Colspan="n y "rowspan="n". En realidad el concepto es sencillo. Veamos un ejemplo: </FONT></FONT></FONT></P> <CENTER> <TABLE cellSpacing=0 cellPadding=3 width="90%" border=0> <COLGROUP><FONT size=2> <COL width=256></FONT> <TBODY> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><B>Código:</B></FONT></FONT></P></TD></TR> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><table border="1"> <BR>    <tr> <BR>            <td colspan="2">Fila 1, celdas 1 y 2 agrupadas</td> <BR></tr> <BR>   <tr> <BR>         <td> Fila 2, 1ª Celda </td> <BR>         <td> Fila 2, 2ª Celda</td> <BR></tr> <BR></table></FONT></FONT></P></TD></TR></TBODY></TABLE></CENTER> <P><FONT face="Arial, sans-serif"><FONT color=#000000 size=2> </FONT></FONT><FONT face="Arial, sans-serif"><FONT color=#000000><BR><BR><FONT size=2>La clave está aquí: <B><td colspan="2">. </B>Con colspan="2" le estamos diciendo al navegador que definimos una celda que ocupa el lugar de dos celdas de la fila. Cómo esta celda ocupa 2 lugares no nos hace falta definir la segunda celda puesto que su espacio ya está ocupado. <BR><BR>Ahora veamos como agruparíamos las celdas de dos filas diferentes, lo haremos con rowspan:</FONT></FONT></FONT></P> <CENTER> <TABLE cellSpacing=0 cellPadding=3 width="90%" border=0> <COLGROUP><FONT size=2> <COL width=256></FONT> <TBODY> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><B>Código:</B></FONT></FONT></P></TD></TR> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><table border="1"> <BR>    <tr> <BR>            <td rowspan="2">Fila 1 y 2 y, celd1 agrupadas</td> <BR><td> Fila 1, 2ª Celda </td> <BR><BR></tr> <BR>   <tr> <BR>                  <td> Fila 2, 2ª Celda</td> <BR></tr> <BR></table></FONT></FONT></P></TD></TR></TBODY></TABLE></CENTER> <P><FONT face="Arial, sans-serif"><FONT color=#000000><BR><FONT size=2>Ahora vamos a ver una tabla en la que utilizamos las dos agrupaciones:</FONT></FONT></FONT></P> <CENTER> <TABLE cellSpacing=0 cellPadding=3 width="90%" border=0> <COLGROUP><FONT size=2> <COL width=256></FONT> <TBODY> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><B>Código:</B></FONT></FONT></P></TD></TR> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><table border="1"> <BR>    <tr> <BR><td rowspan="2">Fila 1 y 2 y, celda 1 agrupadas</td> <BR><td> Fila 1, 2ª Celda </td> <BR><td colspan="2"> Fila 1, 3ª Celda </td><BR><BR><BR></tr> <BR>   <tr> <BR>                  <td> Fila 2, 2ª Celda</td> <BR><td> Fila 2, 2ª Celda</td><BR><td> Fila 2, 2ª Celda</td><BR><BR><BR></tr> <BR></table></FONT></FONT></P></TD></TR></TBODY></TABLE><FONT face="Arial, sans-serif"><FONT color=#000000><BR><BR><FONT size=2><B></B></FONT></FONT></FONT></CENTER> <P><FONT face="Arial, sans-serif"><FONT color=#000000><FONT size=2><B>CABECERAS</B> <BR>Podemos definir cabeceras a las tablas utilizando la etiqueta <th></th>. Las celdas definidas cómo cabeceras, salen por defecto en negrita y centradas, ahora vamos a ver la misma tabla que antes pero con algunas filas definidas cómo cabeceras:</FONT></FONT></FONT></P> <CENTER> <TABLE cellSpacing=0 cellPadding=3 width="90%" border=0> <COLGROUP><FONT size=2> <COL width=256></FONT> <TBODY> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><B>Código:</B></FONT></FONT></P></TD></TR> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><table border="1"> <BR>    <tr> <BR><th rowspan="2">Fila 1 y 2 y, celda 1 agrupadas</th> <BR><th> Fila 1, 2ª Celda </th> <BR><th colspan="2"> Fila 1, 3ª Celda </th><BR><BR><BR></tr> <BR>   <tr> <BR>                  <td> Fila 2, 2ª Celda</td> <BR><td> Fila 2, 2ª Celda</td><BR><td> Fila 2, 2ª Celda</td><BR><BR><BR></tr> <BR></table></FONT></FONT></P></TD></TR></TBODY></TABLE></CENTER> <P><FONT face="Arial, sans-serif"><FONT color=#000000><BR><BR><BR><FONT size=2><B>TÍTULOS DE TABLAS</B> <BR>Las tablas pueden llevar asociado un título, algo así cómo un "pie de foto". Se define con la etiqueta <caption></caption></FONT></FONT></FONT></P> <CENTER> <TABLE cellSpacing=0 cellPadding=3 width="90%" border=0> <COLGROUP><FONT size=2> <COL width=256></FONT> <TBODY> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><B>Código:</B></FONT></FONT></P></TD></TR> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><table border="1"> <BR><caption>Titular de la tabla</caption><BR>    <tr> <BR>            <td>Fila 1, 1ª Celda</td> <BR>            <td>Fila 1, 2ª Celda</td> <BR></tr> <BR>   <tr> <BR>         <td> Fila 2, 1ª Celda </td> <BR>         <td> Fila 2, 2ª Celda</td> <BR></tr> <BR></table></FONT></FONT></P></TD></TR></TBODY></TABLE></CENTER> <P><FONT face="Arial, sans-serif"><FONT color=#000000><FONT size=2><B></B></FONT></FONT></FONT> </P> <P><FONT face="Arial, sans-serif"><FONT color=#000000><FONT size=2><B>CONTENIDOS DE LAS TABLAS</B> <BR>Hasta ahora sólo hemos puesto texto dentro de las tablas, pero podemos poner cualquier cosa que vaya dentro de un documento html: enlaces, imágenes...<BR><BR>Veamos una tabla con texto, imágenes y enlaces: </FONT></FONT></FONT></P> <CENTER> <TABLE cellSpacing=0 cellPadding=3 width="90%" border=0> <COLGROUP><FONT size=2> <COL width=256></FONT> <TBODY> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><B>Código:</B></FONT></FONT></P></TD></TR> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><table border="1"> <BR><caption>Pimienta</caption><BR>    <tr> <BR>   <th rowspan="2">Nuestra amiga pimienta</th> <BR>        <th> Imagen</th> <BR>        <th colspan="2"> Enlaces</th><BR>   </tr> <BR><BR>   <tr> <BR>       <td><BR>         <img src="vampiro.gif" width="54" height="80" alt="nuestra amiga pimienta"><BR>     </td> <BR><BR>     <td><BR>   <a href="http://www.tomatoma.ws/foros/profile.php?mode=viewprofile&u=3">Todo sobre pimienta</a> <BR>     </td><BR><BR>   <td><BR>   <a href="http://www.tomatoma.ws/foros/viewtopic.php?t=491">Un artículo suyo</a><BR>   </td><BR><BR></tr> <BR></table></FONT></FONT></P></TD></TR></TBODY></TABLE></CENTER> <CENTER><FONT face="Arial, sans-serif"><FONT color=#000000 size=2> </FONT></FONT><FONT face="Arial, sans-serif"><FONT color=#000000><BR><BR></FONT></FONT><FONT face="Arial, sans-serif"><FONT color=#000000><FONT size=2><B></B></FONT></FONT></FONT></CENTER> <DIV align=left><FONT face="Arial, sans-serif"><FONT color=#000000><FONT size=2><B>TABLAS ANIDADAS</B> <BR>Dentro de una celda podemos situar otra tabla: </FONT></FONT></FONT></DIV> <CENTER> <TABLE cellSpacing=0 cellPadding=3 width="90%" border=0> <COLGROUP><FONT size=2> <COL width=256></FONT> <TBODY> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><B>Código:</B></FONT></FONT></P></TD></TR> <TR> <TD width="100%"> <P><FONT color=#000000><FONT face="Arial, sans-serif" size=2><html lang="es"> <BR><head><BR><title>Tabla básica</title><BR></head><BR><body> <BR><h1>Celdas de fila agrupadas</h1><BR><table border="1"> <BR>    <tr> <BR>            <td><BR>      <table border="5"> <BR>          <tr> <BR>                  <td>SubFila 1, 1ª Celda</td> <BR>               <td>SubFila 1, 2ª Celda</td> <BR>      </tr> <BR>         <tr> <BR>               <td> FSubFila 2, 1ª Celda </td> <BR>              <td> SubFila 2, 2ª Celda</td> <BR>      </tr> <BR>      </table> <BR><BR>          </td> <BR>            <td>Fila 1, 2ª Celda</td> <BR></tr> <BR>   <tr> <BR>         <td> Fila 2, 1ª Celda </td> <BR>         <td> Fila 2, 2ª Celda</td> <BR></tr> <BR></table> <BR><BR></body> <BR></html></FONT></FONT></P></TD></TR></TBODY></TABLE></CENTER><FONT face="Arial, sans-serif"><FONT color=#000000 size=2></FONT></FONT>""