Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples para formar una columna más ancha:
Para obtener una tabla como la de la imagen anterior, se debe utilizar el siguiente código:
<table>
<tr>
<td colspan="2">A</td>
<td>E</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>F</td>
</tr>
</table>La primera fila de la tabla está formada sólo por una columna, mientras que la segunda fila está formada por dos columnas. En principio, podría pensarse en utilizar el siguiente código HTML para definir la tabla:
<table> <tr> <td>A</td> <td>E</td> </tr> <tr> <td>B</td> <td>C</td> <td>F</td> </tr> </table>
Pero no quedaría correcto:
Sin embargo, si se utiliza el código anterior, el navegador visualiza de forma incorrecta la tabla, ya que las tablas en HTML deben disponer de una estructura regular. En otras palabras, todas las filas de una tabla HTML deben tener el mismo número de columnas. Por lo tanto, si se quieren mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el número de columnas simples que va a ocupar una determinada celda.
En el ejemplo anterior, la celda de la primera fila debe ocupar el espacio de dos columnas simples, por lo que el código HTML debe ser <td colspan="2">A</td>.
De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas como la de la siguiente imagen:
Para lograrlo se requiere el siguiente código, donde vemos que el rowspan de B ocupa 3 unidades:
<table>
<tr>
<td>A</td>
<td rowspan="3">B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>De forma análoga a la fusión de columnas del ejemplo anterior, la fusión de filas debe indicarse de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben tener el mismo número de filas. Así, si en el ejemplo anterior se utilizara el siguiente código:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>La tabla anterior no se visualizaría correctamente. Como la segunda columna de la tabla ocupa el espacio de las dos filas, el código HTML debe indicar claramente que esa celda va a ocupar dos filas, de manera que todas las columnas de la tabla cuenten con el mismo número de filas. Veamos el ejemplo:
Utilizando los atributos rowspan y colspan, es posible diseñar tablas tan complejas como las que se muestran en los siguientes ejemplos.
Ejemplo de fusión de múltiples columnas:
El código HTML necesario para fusionar las columnas de la tabla anterior se muestra a continuación:
<html> <head><title>Ejemplo de columnas fusionadas</title></head> <body> <h1>Fusión de columnas</h1> <table> <tr> <td colspan="3">A</td> <td>B</td> </tr> <tr> <td>C</td> <td colspan="2">D</td> <td>E</td> </tr> <tr> <td colspan="4">F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> </table> </body> </html>
Ejemplo de fusión de múltiples filas:
El código HTML necesario para fusionar las filas de la tabla anterior se muestra a continuación:
<html>
<head><title>Ejemplo de filas fusionadas</title></head>
<body>
<h1>Fusión de filas</h1>
<table>
<tr>
<td>A</td>
<td>B</td>
<td rowspan="3">C</td>
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
<td rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
</table>
</body>
</html>Ejercicio:
Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen, para ello debemos utilizar las etiquetas <table>, <tr>, <td>, <th>, <caption> y los atributos colspan, rowspan, abbr, scope, summary.