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)
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 />
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias