Ejercicio 30 — Tablas en CSS

En este ejercicio se trabaja con varios aspectos del estilo de tablas en CSS: posición del título, separación entre celdas, visualización de celdas vacías, alternancia de colores y configuración del diseño interno mediante propiedades como caption-side, border-collapse, border-spacing, empty-cells y table-layout.

Enunciado

Crear una tabla que represente un horario semanal.
Usar un <caption> como título de la tabla.
Configurar bordes, espaciados y diseño interno de la tabla.
Personalizar la visualización de celdas vacías.
Aplicar estilos llamativos al encabezado.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horario Semanal</title>
    <link rel="stylesheet" href="tablas.css">
</head>
<body>

    <table>
        <caption>Horario Semanal</caption>

        <thead>
            <tr>
                <th>Hora</th>
                <th>Lunes</th>
                <th>Martes</th>
                <th>Miércoles</th>
                <th>Jueves</th>
                <th>Viernes</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>08:00</td>
                <td>Matemáticas</td>
                <td></td>
                <td>Ciencias</td>
                <td></td>
                <td>Lengua</td>
            </tr>

            <tr>
                <td>09:00</td>
                <td></td>
                <td>Historia</td>
                <td></td>
                <td>Inglés</td>
                <td></td>
            </tr>

            <tr>
                <td>10:00</td>
                <td>Física</td>
                <td>Educación Física</td>
                <td></td>
                <td>Plástica</td>
                <td></td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Código CSS

table {
    width: 80%;
    margin: 20px auto;

    /* Bordes */
    border-collapse: separate;
    border-spacing: 10px;

    /* Diseño tabla */
    table-layout: fixed;

    /* Visualizar las vacías */
    empty-cells: show;
}

/* Título */
caption {
    caption-side: bottom;
    font-size: 50px;
    font-weight: bold;
    margin: 10px;
    color: #ff18b2;
}

/* Celdas y encabezados */
th, td {
    border: 1px solid #09e614;
    padding: 10px;
    text-align: center;
}

/* Encabezado */
th {
    background-color: #2b7bc5;
    color: white;
    border: 2px solid #f10707;
}

🚀 Ver resultado del ejercicio