Etiquetas de Tablas en HTML

1. Etiqueta <table>

La etiqueta <table> se utiliza para crear una tabla en HTML. Dentro de esta etiqueta se colocan las filas y celdas de la tabla.

Nombre Edad Ciudad
Juan 25 Lima
María 30 Arequipa
Carlos 28 Cusco

<table>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>Ciudad</th>
    </tr>
    <tr>
        <td>Juan</td>
        <td>25</td>
        <td>Lima</td>
    </tr>
    <tr>
        <td>María</td>
        <td>30</td>
        <td>Arequipa</td>
    </tr>
    <tr>
        <td>Carlos</td>
        <td>28</td>
        <td>Cusco</td>
    </tr>
</table>
    

2. Etiqueta <tr>

La etiqueta <tr> define una fila en una tabla. Dentro de cada fila se pueden colocar celdas de datos (<td>) o de encabezado (<th>).

Producto Precio
Manzanas $1.00
Naranjas $0.80

<table>
    <tr>
        <th>Producto</th>
        <th>Precio</th>
    </tr>
    <tr>
        <td>Manzanas</td>
        <td>$1.00</td>
    </tr>
    <tr>
        <td>Naranjas</td>
        <td>$0.80</td>
    </tr>
</table>
    

3. Etiqueta <th>

La etiqueta <th> se utiliza para definir una celda de encabezado en una tabla. Generalmente, las celdas de encabezado se encuentran en la primera fila de la tabla y se presentan en negrita.

Nombre Correo Electrónico
Ana ana@example.com
Pedro pedro@example.com

<table>
    <tr>
        <th>Nombre</th>
        <th>Correo Electrónico</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>ana@example.com</td>
    </tr>
    <tr>
        <td>Pedro</td>
        <td>pedro@example.com</td>
    </tr>
</table>
    

4. Etiqueta <td>

La etiqueta <td> se utiliza para definir una celda de datos en una tabla.

Manuel 35
Sofía 29

<table>
    <tr>
        <td>Manuel</td>
        <td>35</td>
    </tr>
    <tr>
        <td>Sofía</td>
        <td>29</td>
    </tr>
</table>
    

5. Etiquetas <thead>, <tbody>, y <tfoot>

Las etiquetas <thead>, <tbody>, y <tfoot> se utilizan para agrupar las secciones de una tabla: encabezado, cuerpo y pie, respectivamente.

Producto Precio
Manzanas $1.00
Naranjas $0.80
Total $1.80

<table>
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Manzanas</td>
            <td>$1.00</td>
        </tr>
        <tr>
            <td>Naranjas</td>
            <td>$0.80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1.80</td>
        </tr>
    </tfoot>
</table>