Tablas en html

Estructura de una tabla

Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.

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

Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.

Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.

Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.

De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el esquema de etiquetas sería el siguiente:

		<TABLE>
<TR>	<TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD>			</TR>
<TR>				</TR>
<TR>				</TR>
		</TABLE>

Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:

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

La visualización de una tabla se genera automaticamente a partir de las filas y las columnas definidas. Sin embargo para un navegador no es facil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la pagina se carga. HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas tiene. De esta manera el navegador puede cargar la tabla mucho mas rapido, o sea que una parte de la tabla es visualizada antes de que la totalidad de la tabla haya sido leída. Esto se debe implementar mediante las etiquetas <COLGROUP>...</COLGROUP> y sus hijas <COLS>. No obstante, estas etiquetas, que veremos mas adelante, sólo son compatibles con Internet Explorer, cosa que las hace desaconsejables para nuestras paginas, pués debemos siempre crear paginas compatibles con todos los navegadores de cuarta generación y todas las resoluciones habituales.

Ademas de estas etiquetas basicas existen otras varias que nos van a permitir adaptar la tabla a nuestras necesidades. Y cada etiqueta posee ademas varios atributos, que van a modificar la forma en que se comportan, que empezaremos a ver en el próximo capítulo.