El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo unir celdas en una tabla HTML utilizando los atributos colspan y rowspan. Estos atributos son esenciales para crear tablas más complejas y organizadas, permitiendo que una celda abarque múltiples columnas o filas.

Conceptos Clave

Colspan: Permite que una celda abarque varias columnas.
Rowspan: Permite que una celda abarque varias filas.

Colspan: Uniendo Columnas

El atributo colspan se utiliza para hacer que una celda abarque varias columnas. Esto es útil cuando deseas que una celda ocupe el espacio de varias columnas en una fila.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Colspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Ciudad</th>
        </tr>
        <tr>
            <td colspan="2">Juan Pérez</td>
            <td>Madrid</td>
        </tr>
        <tr>
            <td>María López</td>
            <td>30</td>
            <td>Barcelona</td>
        </tr>
    </table>
</body>
</html>

Explicación del Código

En la segunda fila de la tabla (<tr>), la primera celda (<td>) utiliza colspan="2", lo que significa que esta celda abarcará dos columnas.
Como resultado, "Juan Pérez" ocupa el espacio de las columnas "Nombre" y "Edad".

Rowspan: Uniendo Filas

El atributo rowspan se utiliza para hacer que una celda abarque varias filas. Esto es útil cuando deseas que una celda ocupe el espacio de varias filas en una columna.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Ciudad</th>
        </tr>
        <tr>
            <td rowspan="2">Juan Pérez</td>
            <td>25</td>
            <td>Madrid</td>
        </tr>
        <tr>
            <td>30</td>
            <td>Barcelona</td>
        </tr>
    </table>
</body>
</html>

Explicación del Código

En la segunda fila de la tabla (<tr>), la primera celda (<td>) utiliza rowspan="2", lo que significa que esta celda abarcará dos filas.
Como resultado, "Juan Pérez" ocupa el espacio de las filas "Edad" y "Ciudad" en la primera columna.

Ejercicio Práctico

Instrucciones

Crea una tabla HTML que muestre un horario de clases. La tabla debe tener los días de la semana como encabezados de columna y las horas del día como encabezados de fila. Usa colspan y rowspan para combinar celdas donde sea necesario.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Horario de Clases</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Hora</th>
            <th>Lunes</th>
            <th>Martes</th>
            <th>Miércoles</th>
            <th>Jueves</th>
            <th>Viernes</th>
        </tr>
        <tr>
            <td>8:00 - 9:00</td>
            <td rowspan="2">Matemáticas</td>
            <td>Historia</td>
            <td rowspan="3">Ciencias</td>
            <td>Geografía</td>
            <td rowspan="2">Educación Física</td>
        </tr>
        <tr>
            <td>9:00 - 10:00</td>
            <td>Lengua</td>
            <td>Arte</td>
        </tr>
        <tr>
            <td>10:00 - 11:00</td>
            <td>Inglés</td>
            <td>Matemáticas</td>
            <td>Historia</td>
            <td>Lengua</td>
        </tr>
    </table>
</body>
</html>

Explicación del Código

La celda "Matemáticas" en la columna "Lunes" abarca dos filas (rowspan="2").
La celda "Ciencias" en la columna "Miércoles" abarca tres filas (rowspan="3").
La celda "Educación Física" en la columna "Viernes" abarca dos filas (rowspan="2").

Resumen

En esta lección, aprendimos a utilizar los atributos colspan y rowspan para unir celdas en una tabla HTML. Estos atributos son fundamentales para crear tablas más complejas y organizadas, permitiendo que una celda abarque múltiples columnas o filas. Practicar con estos atributos te ayudará a diseñar tablas más efectivas y visualmente atractivas.

En el siguiente tema, aprenderemos sobre cómo estilizar tablas para mejorar su apariencia y usabilidad.

Unión de Celdas: Colspan y Rowspan

Conceptos Clave

Colspan: Uniendo Columnas

Ejemplo Práctico

Explicación del Código

Rowspan: Uniendo Filas

Ejemplo Práctico

Explicación del Código

Ejercicio Práctico

Instrucciones

Solución

Explicación del Código

Resumen

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo