Índice

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>  ...