El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Fusionant cel·les: Colspan i Rowspan

Següent ►
►

En aquest tema, aprendrem com fusionar cel·les en una taula HTML utilitzant els atributs colspan i rowspan. Aquests atributs són molt útils per crear taules més complexes i ben organitzades.

Objectius d'aprenentatge

  • Comprendre l'ús dels atributs colspan i rowspan.
  • Aprendre a aplicar aquests atributs per fusionar cel·les horitzontalment i verticalment.
  • Veure exemples pràctics de taules amb cel·les fusionades.

  1. Atribut colspan

L'atribut colspan permet que una cel·la s'estengui horitzontalment a través de diverses columnes. Això és útil quan necessitem que una cel·la ocupi l'espai de diverses columnes.

Sintaxi

<td colspan="n">Contingut de la cel·la</td>

On n és el nombre de columnes que la cel·la ha de cobrir.

Exemple

<table border="1">
  <tr>
    <th>Capçalera 1</th>
    <th>Capçalera 2</th>
    <th>Capçalera 3</th>
  </tr>
  <tr>
    <td colspan="2">Cel·la fusionada</td>
    <td>Cel·la 3</td>
  </tr>
  <tr>
    <td>Cel·la 4</td>
    <td>Cel·la 5</td>
    <td>Cel·la 6</td>
  </tr>
</table>

Explicació

En aquest exemple, la primera fila de dades conté una cel·la que s'estén a través de dues columnes (colspan="2"), ocupant l'espai de les columnes 1 i 2.

  1. Atribut rowspan

L'atribut rowspan permet que una cel·la s'estengui verticalment a través de diverses files. Això és útil quan necessitem que una cel·la ocupi l'espai de diverses files.

Sintaxi

<td rowspan="n">Contingut de la cel·la</td>

On n és el nombre de files que la cel·la ha de cobrir.

Exemple

<table border="1">
  <tr>
    <th>Capçalera 1</th>
    <th>Capçalera 2</th>
    <th>Capçalera 3</th>
  </tr>
  <tr>
    <td rowspan="2">Cel·la fusionada</td>
    <td>Cel·la 2</td>
    <td>Cel·la 3</td>
  </tr>
  <tr>
    <td>Cel·la 4</td>
    <td>Cel·la 5</td>
  </tr>
</table>

Explicació

En aquest exemple, la primera cel·la de la segona fila s'estén a través de dues files (rowspan="2"), ocupant l'espai de les files 2 i 3.

  1. Combinació de colspan i rowspan

També podem combinar els atributs colspan i rowspan per crear taules més complexes.

Exemple

<table border="1">
  <tr>
    <th>Capçalera 1</th>
    <th>Capçalera 2</th>
    <th>Capçalera 3</th>
    <th>Capçalera 4</th>
  </tr>
  <tr>
    <td rowspan="2" colspan="2">Cel·la fusionada</td>
    <td>Cel·la 3</td>
    <td>Cel·la 4</td>
  </tr>
  <tr>
    <td>Cel·la 5</td>
    <td>Cel·la 6</td>
  </tr>
  <tr>
    <td>Cel·la 7</td>
    <td>Cel·la 8</td>
    <td colspan="2">Cel·la fusionada</td>
  </tr>
</table>

Explicació

En aquest exemple, la primera cel·la de la segona fila s'estén a través de dues files i dues columnes (rowspan="2" i colspan="2"). A més, la tercera fila conté una cel·la que s'estén a través de dues columnes (colspan="2").

Exercicis pràctics

Exercici 1

Crea una taula amb 3 files i 3 columnes. Fusiona la primera cel·la de la segona fila perquè ocupi dues columnes.

Solució

<table border="1">
  <tr>
    <th>Capçalera 1</th>
    <th>Capçalera 2</th>
    <th>Capçalera 3</th>
  </tr>
  <tr>
    <td colspan="2">Cel·la fusionada</td>
    <td>Cel·la 3</td>
  </tr>
  <tr>
    <td>Cel·la 4</td>
    <td>Cel·la 5</td>
    <td>Cel·la 6</td>
  </tr>
</table>

Exercici 2

Crea una taula amb 4 files i 4 columnes. Fusiona la primera cel·la de la segona fila perquè ocupi dues files i dues columnes.

Solució

<table border="1">
  <tr>
    <th>Capçalera 1</th>
    <th>Capçalera 2</th>
    <th>Capçalera 3</th>
    <th>Capçalera 4</th>
  </tr>
  <tr>
    <td rowspan="2" colspan="2">Cel·la fusionada</td>
    <td>Cel·la 3</td>
    <td>Cel·la 4</td>
  </tr>
  <tr>
    <td>Cel·la 5</td>
    <td>Cel·la 6</td>
  </tr>
  <tr>
    <td>Cel·la 7</td>
    <td>Cel·la 8</td>
    <td>Cel·la 9</td>
    <td>Cel·la 10</td>
  </tr>
</table>

Errors comuns i consells

  • Error: No ajustar el nombre de columnes o files després de fusionar cel·les.

    • Solució: Assegura't que el nombre total de cel·les en cada fila i columna sigui correcte després de fusionar cel·les.

  • Error: Utilitzar colspan o rowspan amb valors incorrectes.

    • Solució: Verifica que els valors de colspan i rowspan siguin adequats per a la disposició desitjada de la taula.

Conclusió

Els atributs colspan i rowspan són eines poderoses per crear taules HTML més complexes i ben organitzades. Amb aquests atributs, pots fusionar cel·les horitzontalment i verticalment per adaptar la teva taula a les necessitats específiques del teu disseny. Practica amb diferents combinacions per dominar l'ús d'aquests atributs i crear taules més efectives i estètiques.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats