Omet navegació

12.8. Fusió de cel·les

Fusió de dues o més cel·les (columnes contigües)

Dins les taules, podem fusionar dues o més cel·les. En aquest cas, fusionarem dues cel·les de dues columnes contigües. Per fer-ho, afegim el paràmetre colspan=”2” dins la primera etiqueta de cel·la. Aquest canvi fa que la primera cel·la de la primera fila tengui una mida de dues cel·les horitzontals. És per això que només posam dues cel·les.

Exemple visual del codi

<table>
<tbody>

<tr> <td colspan=”2”>A</td> <td>B</td> </tr>
<tr> <td>C</td> <td>D</td> <td>E</td> </tr>
<tr> <td>F</td> <td>G</td> <td>H</td> </tr>
<tr> <td>I</td> <td>J</td> <td>K</td> </tr>
<tr> <td>L</td> <td>M</td> <td>N</td> </tr>

</tbody>
</table>

Codi HTML 
<table style="border-collapse: collapse; text-align: center; width: 100%;">
<tbody>
<tr>
<td style="width: 80%; border: 1px solid black;" colspan="2">A</td>
<td style="width: 20%; border: 1px solid black;">B</td>
</tr>
<tr>
<td style="border: 1px solid black;">C</td>
<td style="border: 1px solid black;">D</td>
<td style="border: 1px solid black;">E</td>
</tr>
<tr>
<td style="border: 1px solid black;">F</td>
<td style="border: 1px solid black;">G</td>
<td style="border: 1px solid black;">H</td>
</tr>
<tr>
<td style="border: 1px solid black;">I</td>
<td style="border: 1px solid black;">J</td>
<td style="border: 1px solid black;">K</td>
</tr>
<tr>
<td style="border: 1px solid black;">L</td>
<td style="border: 1px solid black;">M</td>
<td style="border: 1px solid black;">N</td>
</tr>
</tbody>
</table>
Visualitzat en el navegador

A B
C D E
F G H
I J K
L M N

Fusió de dues o més cel·les (files contigües)

Dins les taules, podem fusionar dues o més cel·les. En aquest cas, fusionarem dues cel·les de dues files contigües. Per fer-ho, afegim el paràmetre rowspan=”2” dins la primera etiqueta de cel·la. Aquest canvi fa que la primera cel·la de la primera fila tengui una mida de dues cel·les verticals. És per això que només posam una cel·la (només s'han d'escriure les etiquetes de color blau) a la segona fila.

Exemple visual del codi

<table>
<tbody>

<tr> <td rowspan=”2”>A</td> <td>B</td> </tr>
<tr> (no hem d’escriure cap etiqueta) <td>C</td> </tr>
<tr> <td>D</td> <td>E</td> </tr>
<tr> <td>F</td> <td>G</td> </tr>
<tr> <td>H</td> <td>I</td> </tr>

</tbody>
</table>

Codi HTML 
<table style="width: 100%; text-align: center; border-collapse: collapse;">
<tbody>
<tr>
<td style="border: 1px solid black; width: 50%;" rowspan="2">A</td>
<td style="border: 1px solid black; width: 50%;">B</td>
</tr>
<tr>
<td style="border: 1px solid black;">C</td>
</tr>
<tr>
<td style="border: 1px solid black;">D</td>
<td style="border: 1px solid black;">E</td>
</tr>
<tr>
<td style="border: 1px solid black;">F</td>
<td style="border: 1px solid black;">G</td>
</tr>
<tr>
<td style="border: 1px solid black;">H</td>
<td style="border: 1px solid black;">I</td>
</tr>
</tbody>
</table>
Visualitzat en el navegador

A B
C
D E
F G
H I

Combinar la fusió de files i de columnes

En aquest cas, fusionarem quatre cel·les. Per fer-ho, afegim els paràmetres colspan="2" i rowspan=”2” dins la primera etiqueta de cel·la. Aquest canvi fa que la primera cel·la de la primera fila tengui una mida de dues cel·les verticals més dues cel·les horitzontals. És per això que, a la segona fila, només posam una cel·la (només s'han d'escriure les etiquetes de color blau).

Exemple visual del codi

<tr> <td colspan="2" rowspan="2">A</td> <td>B</td> </tr>
<tr> (no hem d’escriure cap etiqueta) <td>C</td> </tr>
<tr> <td>D</td> <td>E</td> <td>F</td> </tr>
<tr> <td>G</td> <td>H</td> <td>I</td> </tr>
<tr> <td>J</td> <td>K</td> <td>L</td> </tr>
Codi HTML 
<table style="border-collapse: collapse; text-align: center; width: 100%;">
<tbody>
<tr>
<td style="width: 80%; border: 1px solid black;" colspan="2" rowspan="2">A</td>
<td style="width: 20%; border: 1px solid black;">B</td>
</tr>
<tr>
<td style="border: 1px solid black;">C</td>
</tr>
<tr>
<td style="border: 1px solid black;">D</td>
<td style="border: 1px solid black;">E</td>
<td style="border: 1px solid black;">F</td>
</tr>
<tr>
<td style="border: 1px solid black;">G</td>
<td style="border: 1px solid black;">H</td>
<td style="border: 1px solid black;">I</td>
</tr>
<tr>
<td style="border: 1px solid black;">J</td>
<td style="border: 1px solid black;">K</td>
<td style="border: 1px solid black;">L</td>
</tr>
</tbody>
</table>
Visualitzat en el navegador

A B
C
D E F
G H I
J K L