Tablas en HTML

Las tablas en HTML se utilizan para organizar datos en un formato tabular con filas y columnas. Se componen de varias etiquetas HTML que definen su estructura y contenido.

Estructura Básica de una Tabla

Sintaxis:

<table>
    <caption>Título de la tabla</caption>
    <thead>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
            <th>Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dato 1</td>
            <td>Dato 2</td>
            <td>Dato 3</td>
        </tr>
        <tr>
            <td>Dato 4</td>
            <td>Dato 5</td>
            <td>Dato 6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Totales</td>
            <td>Dato Total 1</td>
            <td>Dato Total 2</td>
        </tr>
    </tfoot>
</table>

Descripción de las Etiquetas:

1. <table>: Define la tabla en sí.
2. <caption>: Opcional. Proporciona un título para la tabla, que se muestra generalmente en la parte superior.
3. <thead>: Opcional. Agrupa el contenido del encabezado de la tabla. Contiene una o más filas de encabezado (<tr>).
4. <tr>: Define una fila en la tabla. Utilizado dentro de <thead>, <tbody>, o <tfoot>.
5. <th>: Define una celda de encabezado en una fila. El texto en una celda de encabezado generalmente se muestra en negrita y centrado por defecto.
6. <tbody>: Opcional. Agrupa el contenido del cuerpo de la tabla. Contiene una o más filas de datos (<tr>).
7. <td>: Define una celda de datos en una fila. Contiene los datos de la tabla.
8. <tfoot>: Opcional. Agrupa el contenido del pie de tabla. Contiene una o más filas de totales o resúmenes.

Ejemplo de Tabla Completa:

<table border="1">
    <caption>Listado de Productos</caption>
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Manzana</td>
            <td>$1.00</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.50</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>$0.75</td>
            <td>75</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td colspan="2">$1.25</td>
        </tr>
    </tfoot>
</table>

Notas Adicionales:

• border: Puedes agregar un atributo border a la etiqueta <table> para definir el grosor del borde de la tabla. También se puede controlar el estilo del borde con CSS.
• colspan: Atributo de <td> que permite que una celda abarque varias columnas.

<td colspan="2">Celda que abarca dos columnas</td>

rowspan: Atributo de <td> que permite que una celda abarque varias filas.

<td rowspan="2">Celda que abarca dos filas</td>