HTML - Tablas avanzadas

Tablas anidadas

Las tablas se pueden anidar unas con otras, es decir, podemos situar una tabla o tablas dentro de otra, para conseguir un efecto complejo de maquetación.

La forma de hacerlo es sencilla: basta con introducir una tabla con toda su estructura dentro de una celda de la tabla principal. Ahora bien, en la practica en un proceso un tanto lioso, por lo que es recomendable efectuar este proceso mediante un editor web de tipo visual, como Dreamweaver o FrontPage, y luego limpiar el código que originan.

Un factor a tener en cuenta es, si no deseamos lo contrario, tener especial cuidado en fijar los atributos de BORDER, CELLSPACING Y CELLPADDING de la tabla interior a cero, para no producir efectos indeseados.

Ejemplo:

<TABLE WIDTH="400" BORDER="1">
<TR ALIGN="center">
<TD>Padre</TD>
<TD>Madre</TD>
</TR>
<TR>
<TD>Descendientes</TD>
<TD>
<TABLE WIDTH=100%>
<TR>
<TD>Descendientes 1</TD>
<TD>Descendientes 2</TD>
</TR>
<TR>
<TD>Descendientes 3</TD>
<TD>Descendientes 4</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

Padre	Madre
Descendientes	Descendientes 1 Descendientes 1 Descendientes 1 Descendientes 1

A veces el uso de tablas anidadas es la única solución de que disponemos para conseguir esa página que deseamos, pero casi siempre hay una alternativa al uso de esta técnica, siendo casi siempre posible construir la pagina que deseamos mediante una única tabla.

Las ventajas que obtenemos con una tabla única son muchas: mejor control sobre el contenido de la misma, mayor velocidad de carga de la pagina, etc. Este factor de la velocidad de carga es debido a que el navegador debe leer e interpretar todo el contenido de una tabla antes de mostrarla, por lo que con tablas anidadas se produce un efecto acumulativo que va retardando progresivamente la carga y presentación de la tabla completa.