Etiquetas De Tablas En HTML Con Ejemplos

Las tablas en HTML permiten organizar datos en filas y columnas, proporcionando una estructura ordenada y fácil de leer. Estas tablas se construyen utilizando un conjunto de etiquetas específicas.

Etiquetas principales de tablas

<table>: Define el inicio y fin de una tabla.
<tr>: Representa una fila de la tabla.
<th>: Define una celda de encabezado, que generalmente está en negrita y centrada.
<td>: Representa una celda estándar dentro de una fila.
<caption>: Proporciona un título descriptivo para la tabla.
<thead>: Agrupa los encabezados de la tabla.
<tbody>: Agrupa el contenido principal de la tabla.
<tfoot>: Agrupa los datos del pie de la tabla.

Tabla básica

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla Básica</title>
</head>
<body>
    <h2>Tabla de Productos</h2>
    <table border="1">
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
        </tr>
        <tr>
            <td>Manzanas</td>
            <td>$20</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Plátanos</td>
            <td>$15</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Naranjas</td>
            <td>$25</td>
            <td>12</td>
        </tr>
    </table>
</body>
</html>

Tabla con (caption)

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla con Título</title>
</head>
<body>
    <table border="1">
        <caption>Inventario de la tienda</caption>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
        </tr>
        <tr>
            <td>Leche</td>
            <td>$30</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Huevos</td>
            <td>$50</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

Tabla con agrupamiento: (thead) (tbody) y (tfoot)

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla con Agrupamiento</title>
</head>
<body>
    <h2>Ventas Mensuales</h2>
    <table border="1">
        <thead>
            <tr>
                <th>Mes</th>
                <th>Ingresos</th>
                <th>Gastos</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Enero</td>
                <td>$10,000</td>
                <td>$8,000</td>
            </tr>
            <tr>
                <td>Febrero</td>
                <td>$12,000</td>
                <td>$9,500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>$22,000</td>
                <td>$17,500</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Tabla con celdas combinadas (colspan) y (rowspan)

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla con Celdas Combinadas</title>
</head>
<body>
    <h2>Horario de Clases</h2>
    <table border="1">
        <tr>
            <th>Hora</th>
            <th>Lunes</th>
            <th>Martes</th>
            <th>Miércoles</th>
        </tr>
        <tr>
            <td>8:00 - 9:00</td>
            <td rowspan="2">Matemáticas</td>
            <td>Historia</td>
            <td>Inglés</td>
        </tr>
        <tr>
            <td>9:00 - 10:00</td>
            <td>Geografía</td>
            <td>Educación Física</td>
        </tr>
        <tr>
            <td>10:00 - 11:00</td>
            <td colspan="3">Receso</td>
        </tr>
    </table>
</body>
</html>

Tabla estilizada con CSS

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla Estilizada</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
            color: #333;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">Tabla de Estudiantes</h2>
    <table>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Grado</th>
        </tr>
        <tr>
            <td>Ana</td>
            <td>15</td>
            <td>10°</td>
        </tr>
        <tr>
            <td>Juan</td>
            <td>16</td>
            <td>11°</td>
        </tr>
        <tr>
            <td>Lucía</td>
            <td>14</td>
            <td>9°</td>
        </tr>
    </table>
</body>
</html>

Las etiquetas de tablas en HTML son una excelente herramienta para organizar y presentar datos de manera clara y estructurada. A través de estas etiquetas, puedes crear tablas simples, con agrupamiento, celdas combinadas e incluso personalizarlas con CSS para hacerlas más atractivas y funcionales. ¡Explora estas opciones para mejorar tus proyectos web!

[pvc_stats postid="" increase="1" show_views_today="1"]