Tablas HTML

• Inicio
• HTML
• Tablas

Las tablas HTML nos permiten organizar información como texto, imágenes, enlaces u otras tablas usando los mismos conceptos de columnas, celdas, cabeceras y titulares que se ven en otros entornos de publicación de documentos.

Para crear tablas ocupamos las etiquetas <table>...</table> para delimitar el contenido de la tabla, <tr>...</tr> para crear filas y <td>...</td> para definir el contenido de la celda.

Ejemplo de tabla básica:

<table>
    <tbody>
        <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>
    </tbody>
</table>

Titulares y leyendas de tablas

Los titulares dentro de las tablas se crean usando la etiqueta … en lugar de la etiqueta de celda , y le da la apariencia de letra en negrita al texto que esta contiene.

Para establecer una leyenda o título de tabla se emplea la etiqueta …, este elemento se coloca justo después de la etiqueta de apertura de la tabla y cada tabla puede solo contener un caption.

Ejemplo de tabla con titulares y leyendas:

<table>
    <tbody>
        <caption>Tabla de demostración</caption>
        <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>
    </tbody>
</table>

Atributos colspan y rowspan

Estos atributos se emplean para crear celdas que abarquen múltiples filas o columnas.

Atributo colspan para abarcar 2 columnas:

<td colspan="2">Contenido de la celda</h2>

Atributo rowspan para abarcar 2 filas:

<td rowspan="2">Contenido de la celda</h2>

Ejemplo de tabla con rowspan y colspan:

<table>
    <tbody>
        <tr>
            <td rowspan="2">Esta celda ocupa el doble de alto</td>
            <td>Celda 1.2</td>
            <td>Celda 1.3</td>
        </tr>
        <tr>
            <td>Celda 2.1</td>
            <td>Celda 2.2</td>
        </tr>
        <tr>
            <td colspan="2">Ocupando el doble de ancho</td>
            <td>Celda 3.2</td>
        </tr>
    </tbody>
</table>