Fusión de celdas

Es posible fusionar horizontal o verticalmente las celdas.

Partiendo de una tabla con dos filas y tres columnas:


<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8"> 
<style> 
table { border: 1px solid black; 
        border-collapse: collapse; 
        width: 250px;} 
td { border: 1px solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
</tr> 
<tr> 
<td>4</td> 
<td>5</td> 
<td>6</td> 
</tr> 
</table> 
</body> 
</html>
 
images/CAP06IMG12.png

1. Fusión de columnas

Para fusionar columnas, HTML5 proporciona el atributo de celda colspan="x", donde x se corresponde con el número de columnas que se desea fusionar.

Ejemplo


<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8"> 
<style> 
table { border: 1px solid black; 
        border-collapse: collapse; 
        width: 250px;} 
td { border: 1px solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td colspan="3" style="text-align: center;">Título de la tabla</td> 
</tr> 
<tr> ...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Celdas de la tabla
Siguiente
Celdas de encabezado