CREAR TABLAS ANIDADAS EN HTML

 Crea una tabla animada

Te explicamos en este artículo cómo crear una tabla anidada mediante código HTML, indicándote el código necesario.

Para situar una tabla en HTML dentro de otra tenemos unos trucos HTML que consiste en introducir toda la estructura de una tabla dentro de una celda. En las siguientes líneas te explicaremos cómo crear una tabla en HTML anidada.

Para poder entender cuál sería el resultado de la anidación de una tabla en HTML dentro de una celda de otra tabla, veremos primero el proceso de creación de una tabla en HTML simple y luego cómo introducir una dentro de otra.

1. Etiquetas para crear una tabla en HTML

Como ya sabes el lenguaje  del código HTML se escribe con etiquetas HTML. Para crear una tabla en HTML hace falta saber las siguientes etiquetas:

Tabla: <table> y </table>

Líneas de Izquierda a Derecha: <tr> y </tr>

Celdas: <td> y </td> (dentro de las celdas se escribe el contenido)

2. Código para crear una tabla en HTML

<table>

<tr>

<td>Celda 1, linea 1</td>

<td> Celda 2, linea 1</td>

</tr>

<tr>

<td> Celda 1, linea 2</td>

<td> Celda 2, linea 2</td>

</tr>

</table>

3. Ejemplo de tabla en HTML simple

Celda 1, línea 1

Celda 2, línea 1

Celda 1, línea 2

Celda 2, línea 2

4. Código para crear una tabla anidada

<table cellspacing="10" cellpadding="10" border="3">

<tr>

    <td align="center">

    Celda de Tabla en HTML principal

    </td>

    <td align="center">

        <table cellspacing="2" cellpadding="2" border="1">

        <tr>

            <td>Tabla HTML anidada – Celda 1</td>

            <td>Tabla HTML anidada – Celda 2</td>

        </tr>

        <tr>

            <td>Tabla HTML anidada – Celda 3</td>

            <td>Tabla HTML anidada – Celda 4</td>

        </tr>

        </table>

    </td>

</tr>

</table>

5. Ejemplo de tabla anidada

Celda de Tabla en HTML principal

Tabla HTML anidada – Celda 1

Tabla HTML anidada – Celda 3

Tabla HTML anidada – Celda 2

Tabla HTML anidada – Celda 4