Combinar filas y columnas
Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 50 de 60.
En HTML, puedes hacer que las celdas de una tabla abarquen varias filas o columnas utilizando los atributos rowspan y colspan. Estos atributos te permiten crear diseños de tabla más complejos al combinar celdas.
El atributo colspan se utiliza para especificar el número de columnas que una celda debe abarcar. Se añade a la etiqueta <td> o <th> de la celda que desea expandir.
Aquí tienes un ejemplo de cómo usar colspan:
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>En este ejemplo, la celda de encabezado con el texto "Name" abarca dos columnas. Esto es útil para crear un encabezado que cubra varias columnas. Así es como se ve:
El atributo rowspan se utiliza para especificar el número de filas que debe abarcar una celda. También se añade a la etiqueta <td> o <th> de la celda que desea expandir.
Aquí tienes un ejemplo de cómo usar rowspan:
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>Aquí, rowspan se utiliza para mostrar que Alex trabaja tanto en el turno de mañana como en el de tarde sin repetir el nombre.
Puedes usar tanto colspan como rowspan en la misma tabla para crear diseños complejos. Solo recuerda ajustar el número de celdas en cada fila en consecuencia para acomodar las celdas expandidas.
Desafío
FácilCrea un documento HTML que incluya una tabla con celdas que abarquen múltiples filas y columnas. La tabla debe tener la siguiente estructura:
- Una etiqueta
<table>para definir la tabla, con un atributoborderestablecido en "1" para visibilidad. - Una fila de tabla (
<tr>) con una celda de encabezado (<th>) que abarque dos columnas y contenga el texto "Student Information". - Otra fila de tabla (
<tr>) con una celda de encabezado (<th>) que diga "Name" y una celda de datos (<td>) que abarque dos filas y contenga el texto "John Doe". - Otra fila de tabla (
<tr>) con una celda de encabezado (<th>) que diga "Age". - Una fila de tabla final (
<tr>) con una celda de datos (<td>) que diga "Jane Smith" y una celda de datos (<td>) que diga "25".
Hoja de referencia
Usa colspan para hacer que una celda abarque varias columnas:
<th colspan="2">Name</th>Usa rowspan para hacer que una celda abarque varias filas:
<td rowspan="2">John</td>Ejemplo de tabla con ambos atributos de expansión:
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Exams</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Kim</td>
<td>A</td>
<td>B+</td>
</tr>
</table>Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- Escribe el código aquí -->
</table>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentals
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta
IngredientesPasos2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2