Tablas en HTML

1. Estructura Básica de una Tabla

Una tabla básica se define usando la etiqueta <table>. Dentro de la tabla, se organizan filas y celdas.

<table>
    <tr>
        <td>Celda 1</td>
        <td>Celda 2</td>
    </tr>
    <tr>
        <td>Celda 3</td>
        <td>Celda 4</td>
    </tr>
</table>
            

2. Encabezados de Tabla

Para definir los encabezados, usa la etiqueta <th> en lugar de <td>. Los encabezados suelen aparecer en la primera fila.

<table>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>25</td>
    </tr>
</table>
            

3. Agrupación de Celdas

HTML permite combinar celdas en una tabla usando los atributos colspan y rowspan para extender columnas o filas.

<table>
    <tr>
        <th colspan="2">Encabezado Extendido</th>
    </tr>
    <tr>
        <td>Celda 1</td>
        <td>Celda 2</td>
    </tr>
    <tr>
        <td rowspan="2">Celda Extendida</td>
        <td>Celda 3</td>
    </tr>
    <tr>
        <td>Celda 4</td>
    </tr>
</table>
            

4. Estilos en Tablas

Las tablas pueden estilizarse usando CSS para mejorar su apariencia.

    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: left;
    }
    th {
        background-color: #f4f4f4;
    }
            

5. Ejemplo Completo de Tabla

Ejemplo de una tabla completa con encabezados y estilos aplicados.

<table>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>Ciudad</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>25</td>
        <td>Madrid</td>
    </tr>
    <tr>
        <td>Juan</td>
        <td>30</td>
        <td>Barcelona</td>
    </tr>
</table>
            

Conclusión

Las tablas en HTML son una herramienta útil para organizar y mostrar datos. Practica con los diferentes atributos y estilos para mejorar su presentación.