25-Colspan y Rowspan en html

---

Colspan y Rowspan en HTML

Colspan y Rowspan en HTML son atributos utilizados en las celdas de una tabla (<td> o <th>) para especificar cuántas columnas o filas debe abarcar una celda.

• Colspan: Permite que una celda se extienda horizontalmente a través de varias columnas. Se usa para fusionar celdas en la misma fila.
• Rowspan: Permite que una celda se extienda verticalmente a través de varias filas. Se usa para fusionar celdas en la misma columna.

Temas tratados en esta entrada

• Juntar columnas (Colspan)
• Juntar filas (Rowspan)

---

Juntar columnas (Colspan)

El atributo colspan se utiliza en HTML para permitir que una celda de tabla se extienda horizontalmente a través de varias columnas. Esto es útil cuando queremos combinar celdas para mostrar contenido que abarca más de una columna, como títulos o secciones agrupadas.

Para juntar columnas, se agrega el atributo colspan al elemento <td> (o <th> si es un encabezado de tabla) y se especifica el número de columnas que se desean fusionar.

Ejemplo 1: Encabezado combinado (3 columnas)

Encabezado 1	Encabezado combinado (3 columnas)			Encabezado 5
Celda 1	Celda 2	Celda 3	Celda 4	Celda 5
Celda 6	Celda 7	Celda 8	Celda 9	Celda 10
Celda 11	Celda 12	Celda 13	Celda 14	Celda 15

En este ejemplo, el encabezado segundo utiliza colspan="3" para abarcar tres columnas, lo que permite agrupar información relacionada bajo un solo título.

Ejemplo 2: Encabezado combinado (2 columnas)

Encabezado 1	Encabezado combinado (2 columnas)		Encabezado 4
Celda 1	Celda 2	Celda 3	Celda 4
Celda 5	Celda 6	Celda 7	Celda 8
Celda 9	Celda 10	Celda 11	Celda 12

En este ejemplo, el encabezado segundo utiliza colspan="2" para abarcar dos columnas, proporcionando un título claro para las columnas que siguen.

---

...

Código del ejemplo

                <div class="container mt-4">
                <div class="bg-primary p-3 border rounded mt-3">
                    <h3 style="font-family: Georgia; font-size: 30px">Ejemplo 1: Encabezado combinado (3 columnas)</h3>
                    <div class="bg-white p-3">
                        <table border="1" style="width: 100%; text-align: center; border-collapse: collapse;">
                            <thead>
                                <tr>
                                    <th style="border: 1px solid #000;">Encabezado 1</th>
                                    <th colspan="3" style="border: 1px solid #000;">Encabezado combinado (3 columnas)</th>
                                    <th style="border: 1px solid #000;">Encabezado 5</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="border: 1px solid #000;">Celda 1</td>
                                    <td style="border: 1px solid #000;">Celda 2</td>
                                    <td style="border: 1px solid #000;">Celda 3</td>
                                    <td style="border: 1px solid #000;">Celda 4</td>
                                    <td style="border: 1px solid #000;">Celda 5</td>
                                </tr>
                                <tr>
                                    <td style="border: 1px solid #000;">Celda 6</td>
                                    <td style="border: 1px solid #000;">Celda 7</td>
                                    <td style="border: 1px solid #000;">Celda 8</td>
                                    <td style="border: 1px solid #000;">Celda 9</td>
                                    <td style="border: 1px solid #000;">Celda 10</td>
                                </tr>
                                <tr>
                                    <td style="border: 1px solid #000;">Celda 11</td>
                                    <td style="border: 1px solid #000;">Celda 12</td>
                                    <td style="border: 1px solid #000;">Celda 13</td>
                                    <td style="border: 1px solid #000;">Celda 14</td>
                                    <td style="border: 1px solid #000;">Celda 15</td>
                                </tr>
                            </tbody>
                        </table>
                        <p class="mt-2">En este ejemplo, el encabezado segundo utiliza <code>colspan="3"</code> para abarcar
                            tres columnas, lo que permite agrupar información relacionada bajo un solo título.</p>
                    </div>
                </div>
            </div>
            <br />
            

---

Juntar filas (Rowspan)

El atributo rowspan se utiliza en HTML para permitir que una celda de tabla se extienda verticalmente a través de varias filas. Esto es útil cuando queremos mostrar información que se aplica a varias filas, como agrupaciones o secciones dentro de la tabla.

Para juntar filas, se agrega el atributo rowspan al elemento <td> (o <th> si es un encabezado de tabla) y se especifica el número de filas que se desean fusionar.

Ejemplo 1: Juntando filas (Rowspan)

Encabezado 1	Encabezado 2	Encabezado 3
Celda 1 (Rowspan 2)	Celda 2	Celda 3
	Celda 4	Celda 5

En este ejemplo, la celda de la primera columna utiliza rowspan="2" para abarcar dos filas, mostrando información que se aplica a ambas.

Ejemplo 2: Juntando filas (Rowspan)

Encabezado 1	Encabezado 2	Encabezado 3
Celda 6	Celda 7 (Rowspan 2)	Celda 8
Celda 9		Celda 10

En este ejemplo, la celda de la segunda columna utiliza rowspan="2" para abarcar dos filas, mostrando información que se aplica a ambas.

Código del ejemplo 1

                <div class="container mt-4">
                <div class="bg-primary p-3 border rounded mt-3">
                    <h3 style="font-family: Georgia; font-size: 30px">Ejemplo 1: Juntando filas (Rowspan)</h3>
                    <div class="bg-white p-3">
                        <table border="1" style="width: 100%; text-align: center; border-collapse: collapse;">
                            <thead>
                                <tr>
                                    <th style="border: 1px solid #000;">Encabezado 1</th>
                                    <th style="border: 1px solid #000;">Encabezado 2</th>
                                    <th style="border: 1px solid #000;">Encabezado 3</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td rowspan="2" style="border: 1px solid #000;">Celda 1<br /> (Rowspan 2)</td>
                                    <td style="border: 1px solid #000;">Celda 2</td>
                                    <td style="border: 1px solid #000;">Celda 3</td>
                                </tr>
                                <tr>
                                    <td style="border: 1px solid #000;">Celda 4</td>
                                    <td style="border: 1px solid #000;">Celda 5</td>
                                </tr>
                            </tbody>
                        </table>
                        <p class="mt-2">En este ejemplo, la celda de la primera columna utiliza <code>rowspan="2"</code>
                            para
                            abarcar dos filas, mostrando información que se aplica a ambas.</p>
                    </div>
                </div>
            </div>
            <br />
            

---

Ir al índice