Cellen samenvoegen

Probleem

Soms moet je de gegevens in een tabel over meerdere kolommen en of rijen uitstrekken.

Design

Opeenvolgende cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in verticale richting gebruik je het rowspan attribuut van het td (of th) element, voor het samenvoegen in horizontale richting het COLSPAN attribuut.Soms verlangt de lay-out dat je één of meerdere kolommen samenvoegt.

Oplossing

Om dat de illustreren gaan we aan onze Jommeke tabel de prijs in ponden en in renminbi.

1. We voegen eerst de kolommen voor het pond en de renminbi toe.

   <tr>
           <th scope="row">1</th>
           <td>Jacht op een voetbal</td>
           <td>Softcover</td>
           <td>5,22</td>
           <td>34</td>
           <td>3,76</td>
       </tr>

2. De drie verschillende valuta groeperen we onder één kolomtitel met de naam Kostprijs. De Nummer kolom beslaat twee rijen. Daarom stellen we het rowspan attribuut in op 2. We moeten geen kolom voor Nummer voorzien in de tweede rij. Hetzelfde geldt voor Titel en Kaft. De Kostprijs kolom staat boven de drie kolommen met de verschillende valuta's. Dus die beslaat drie kolommen. Daarom stellen we het rowspan attribuut in op 3. In de tweede rij staan alleen de valuta kolommen.