El lenguaje HTML tambiín nos da la posibilidad de anidar tablas es decir podemos insertar o colocar tablas unas dentro de otras tablas.

Para poder anidar tablas simplemente tenemos introducir la estructura de una tabla completa dentro de una celda.

Si realizamos la anidación de tablas tendremos que ser sumamente cuidadosos, ya que esto es un proceso complicado y enrevesado.

Es importante tener en cuenta que es posible anidar tablas sin límite siendo esta técnica muy útil. Pero debido a la complejidad en la que podemos derivar es muy aconsejable practicar esta técnica con anterioridad. Pero al mismo tiempo también intentaremos usar cuantas menos tablas mejor. Puesto que las ventajas de usar una sola tabla son múltiples: mayor velocidad de carga, mejor control sobre el contenido de la misma, código más sencillo, etc. El retardo al cargar la página can tablas anidadas es debido a que el navegador debe leer primero toda la tabla ante de visualizarla, consiguientemente usando tablas anidadas se produce un efecto acumulativo.

Veamos los siguientes ejemplos:

Ejemplo (1):

<table cellspacing="10" cellpadding="10" border="4"> 
 <tr> 
    <td align="center">Celda tabla principal (padre)</td> 
    <td align="center"> 
        <table cellspacing="2" cellpadding="2" border="6"> 
       <tr> 
            <td>Tabla anidada, Celda (1,1) </td> 
            <td>Tabla anidada, Celda (1,2) </td> 
       </tr> 
       <tr>
            <td> Tabla anidada, Celda (2,1) <td>
            <td> Tabla anidada, Celda (2,2) <td> 
        </tr> 
        </table> 
 </td> 
 </tr> 
</table>

se muestrarí:

Celda tabla principal (padre)

Tabla anidada Celda (1,1) Tabla anidada Celda (1,2) Tabla anidada, Celda (2,1) Tabla anidada, Celda (2,2)

Ejemplo (2)

<table cellspacing="2"  border="4" bgcolor="red"> 
 <tr> 
    <td align="center"> Tabla principal </td> 
    <td align="center"> 
        <table  border="2"> 
       <tr> 
            <td>Tabla anidada </td> 
            <td>Tabla anidada </td> 
       </tr> 
       <tr>
            <td> Tabla anidada <td>
            <td> Tabla anidada <td> 
        </tr> 
        </table> 
    </td>
 <tr> 
    <td align="center"> Tabla principal </td>
   </tr>  
 </tr> 
</table>

se muestrará:

Tabla principal	Tabla Anidada Tabla Anidada Tabla Anidada Tabla Anidada
Tabla principal	Tabla principal