Tablas avanzado

Estas uniones o fusiones de celdas se consiguen con los atributos colspan, celdas en distintas columnas, y rowspan, para celdas en distintas filas. El valor de estos atributos es el número de celdas que van a combinarse. Después de ver esta páginas sería un buen momento para hacer estos ejercicios sobre tablas

Por ejemplo en el sitio de libros que estamos usando para los ejemplos tienes una tabla co la situación de libros por tipos:

<table style="width:400px">

<caption>

Situación de libros
</caption>

<colgroup >

<col style="width: 25%">

<col style="width: 25%">

<col style="width: 25%">

</colgroup>

<thead>

<tr>

<th >Género</th>

<th >Tipo</th>

<th >Lugar</th>

</tr>

</thead>

<tbody>

<tr >

<td rowspan="3" >Texto</td>

<td >ESO</td>

<td>1A</td>

</tr>

<tr>

<td >Bachiller</td>

<td>2B</td>

</tr>

<tr>

<td>Universidad</td>

<td>2C</td>

</tr>

<tr>

<td rowspan="2">Lectura</td>

<td>No ficción</td>

<td>3A</td>

</tr>

<tr>

<td>Ficción</td>

<td>3B</td>

</tr>

</tbody>

</table>

Escribe este código en una página que será tu ejercicio04.htm

Como ves se han combinado celdas de la primera columna con el aributo rowspan. Se han combinado las tres primeras celdas en la primera columna poniendo rowspan="3" en la primera celda de la fila, las 2 filas siguientes solo tendrán 2 celdas. Queda como si la primera celda fuera triple de alta que las restantes.

Luego se han fundido las dos celdas siguientes también en la primera columna (lectura), esta vez la altura es de dos filas por eso se ha puesto rowspan="2". La fila siguiente a ésta solo tiene 2 celdas (dos columnas)

En este otro caso se combinan varias celdas de varias columnas

<!doctype html>

<html lang="es">

<head>

<meta charset="utf-8">

<title>Unir columnas </title>

<style>

td, th{border: 1px solid gray;} </style>

</head>

<body>

<table style="width:350px">

<caption>

Combinar cols

</caption>

<tbody>

<tr>

<th colspan="2" scope="col">Pedido </th>

<th scope="col">Estado</th>

</tr>

<tr>

<td>Las gaviotas</td>

<td>12/3/20</td>

<td>Espera</td>

</tr>

<tr>

<td>Los asquerosos</td>

<td>14/3/20</td>

<td>En camino</td>

</tr>

<tr>

<td>La reina roja</td>

<td>14/3/20</td>

<td>Entregado</td>

</tr>

</tbody>

</table>

Puedes añadir esta tabla al ejercicio04.htm

En esta otra combinación unimos dos celdas de la sección de cabecera, siguen existiendo dos columnas pero en la celda superior se unen. En este ejemplo verás que se ha puesto bordes para que se vea mejor el efecto de la combinación

Las combinaciones de celdas solo tienen una condición: que las celdas sean contiguas. Por lo demás no hay límites: se pueden hacer combinaciones de celdas en varias partes de una tabla para lograr una presentación de datos de acuerdo con nuestras necesidades.

Estos ejemplos puedes escribirlo para crear la página con título ejercicio04.htm, que puedes usar para probar y practicar la creación de tablas y combinanción de celdas.

Es un buen momento para hacer estos ejercicios sobre tablas

HTML 5 deja el formato de las tabla totalmente al uso de estilos CSS, aunque reconoce las antiguas tablas de HTML 4 por compatibilidad

Puedes practicar con estos ejercicios sobre tablas