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>
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<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%;">
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<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

Títol de la taula
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>
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<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;">
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<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

Títol de la taula
A B
C
D E
F G
H I

Combinar la fusió de files i de columne

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

<table>
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<tbody>

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

</tbody>
</table>

Codi HTML 
<table style="border-collapse: collapse; text-align: center; width: 100%;">
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<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

Títol de la taula
A B
C
D E F
G H I
J K L

Creat amb eXeLearning (Finestra nova)