HTML/Basiscursus/Tabellen: verschil tussen versies
Verwijderde inhoud Toegevoegde inhoud
Grotendeels herschreven |
colspan + rowspan attribuut, rowgroup, colgroup begin |
||
Regel 57:
==Geavanceerd==
===Cellen die meerdere kolommen en/of rijen beslaan===
Soms is het nodig om cellen samen te voegen zodat deze meerdere rijen of kolommen beslaan, dit is mogelijk met het colspan en rowspan attribuut.
Let in de voorbeelden goed op hoeveel keer het <th> en <td> element wordt gebruikt.
{{Code|
| Taal=HTML
| Titel=Gebruik colspan en rowspan attribuut
| Code=
<pre><table>
<tr>
<td colspan="2"></td>
<th>Kangoeroe</th>
</tr>
<tr>
<th rowspan="2">Vertalingen</th>
<th>Engels</th>
<td>Kangaroo</td>
</tr>
<tr>
<th>Latijn</th>
<td>Kangaroo</td>
</tr>
</table></pre>
}}
<table style="border-collapse: collapse;">
<tr>
<td style="border: 1px solid black;" colspan="2"></td>
<th style="border: 1px solid black;">Kangoeroe</th>
</tr>
<tr>
<th style="border: 1px solid black;" rowspan="2">Vertalingen</th>
<th style="border: 1px solid black;">Engels</th>
<td style="border: 1px solid black;">Kangaroo</td>
</tr>
<tr>
<th style="border: 1px solid black;">Latijn</th>
<td style="border: 1px solid black;">Kangaroo</td>
</tr>
</table>
===Kolommen===
Regel 73 ⟶ 112:
</tr>
<tr>
<td>
<td>Zoogdieren</td>
</tr>
Regel 91 ⟶ 130:
</tr>
</table>
Het col element kan los voorkomen of in een colgroup element. U kunt deze twee niet door elkaar gebruiken; als er een colgroup element wordt gebruikt moeten alle col elementen genest worden in colgroup elementen.
===Het <caption> element===
Regel 106 ⟶ 147:
</tr>
<tr>
<td>
<td>Zoogdieren</td>
</tr>
Regel 127 ⟶ 168:
===Rijgroepen en kolomgroepen===
====Rijgroepen====
Er zijn 3 verschillende rijgroepen; thead, tbody en tfoot. thead bevat rijen met titelcellen die informatie geven over deze kolommen. Hetzelfde geld voor tfoot (totaalaantallen bijvoorbeeld), tbody bevat de data. Door met rijgroepen te werken is het bijvoorbeeld mogelijk een scrollbar in de tbody te tonen terwijl de titelcellen blijven staan.
Let goed op de plaats van tfoot, deze komt voor tbody maar wordt in de pagina wel aan de onderkant getoond.
{{Code|
| Taal=HTML
| Titel=Rijgroepen
| Code=
<pre><table>
<thead>
<tr>
<td></td>
<th>Eten</th>
<th>Transport</th>
<th>Totalen</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Totaal</th>
<td>44</td>
<td>47</td>
<td>91</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Dag 1</th>
<td>14</td>
<td>21</td>
<td>35</td>
</tr>
<tr>
<th>Dag 2</th>
<td>12</td>
<td>8</td>
<td>20</td>
</tr>
<tr>
<th>Dag 3 </th>
<td>18</td>
<td>18</td>
<td>36</td>
</tr>
</tbody>
</table></pre>
}}
====Kolomgroepen====
U kunt kolommen groeperen met behulp van het colgroup element. Als u een colgroup element gebruikt kunt u geen losse col elementen meer gebruiken.
===Toegankelijke tabellen===
Regel 168 ⟶ 259:
</tr>
<tr>
<td>
<td>Zoogdieren</td>
</tr>
Regel 194 ⟶ 285:
</tr>
<tr>
<th scope="row">
<td>Zoogdieren</td>
<td>Klimbuideldieren</td>
Regel 227 ⟶ 318:
</tr>
<tr>
<td scope="row">
<td>Zoogdieren</td>
<td>Klimbuideldieren</td>
Regel 241 ⟶ 332:
</tr>
<tr>
<td style="border: 1px solid black;" scope="row">
<td style="border: 1px solid black;">Zoogdieren</td>
<td style="border: 1px solid black;">Klimbuideldieren</td>
| |||