Tabellen in HTML

Geschreven door: op maandag 30 december 2019

Leestijd:

Met UL, OL en LI maak je opsommingen. Met DL, DT en DD maak je lijsten van definities. Naast opsommingen en definities is er ook nog tabulaire data: gegevens die in een tabel staan, waarbij je rijen hebt waarin waardes van verschillende types in hun eigen kolom staan. In HTML gebruik je hiervoor de TABLE-tag met de verscheidene bijbehorende elementen.
 

Simpele tabel

Een tabel is in beginsel een rij waarbij verschillende soorten waardes in aparte kolommen staan. De waardes in de kolommen hebben te maken met die specifieke rij. De waarde in één kolom zal van een ander type zijn dan de waarde van een andere kolom. Alles in de kolom kleur is een kleur en is anders dan wat in de kolom gereedschap staat, maar "Eerste auteur" is nog steeds een ander soort waarde dan "Tweede auteur", ook al zijn het beide auteurs.
 
Tabellen in HTML zijn eenvoudig op te bouwen, maar bieden uitgebreide mogelijkheden. Een eenvoudige tabel heeft simpelweg wat rijen en kolommen. Een rij is een TR (table row) en een kolom in een rij is een cell of TD (table data).
 
<table>
  <tr>
    <td>P110</td><td>10 kg</td><td>10 cm</td>
  </tr>
  <tr>
    <td>P200</td><td>11 kg</td><td>20 cm</td>
  </tr>
</table>

 

P11010 kg10 cm
P20011 kg20 cm
 
Dit is tabulaire data, per rij gaat het over één object en elke kolom is een apart soort waarde. In het bovenstaande voorbeeld zie je echter niet om wat voor gegevens het gaat en het is dus niet informatief.

Headers en footers

 
Om de kolommen en rijen beschrijvender te maken, kan je gebruik maken van THEAD, TBODY en TFOOT: header, body en footer van een tabel. In de header en footer kan je informatie opgeven over de tabel of over de specifieke kolommen, zoals de naam van de kolom of een totaalwaarde. Deze elementen worden direct onder TABLE geplaatst en in de elementen komt de data.
 
<table>
        <thead>
                <tr>
                        <th>SKU</th><th>Gewicht</th><th>Breedte</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <th>P110</th><td>10 kg</td><td>10 cm</td>
                </tr>
                <tr>
                        <th>P200</th><td>11 kg</td><td>20 cm</td>
                </tr>
        </tbody>
        <tfoot>
                <tr>
                        <th>Totaal</th><td>21 kg</td><td>30 cm</td>
                </tr>
                <tr>
                        <th>Gemiddelde</th><td>10,5 kg</td><td>15 cm</td>
                </tr>
        </tfoot>
</table>

 

Resultaat:
SKUGewichtBreedte
P11010 kg10 cm
P20011 kg20 cm
Totaal21 kg30 cm
Gemiddelde10,5 kg15 cm

TH

Het is nu duidelijk wat de waardes vertegenwoordigen. In het voorbeeld is tevens het element TH gebruikt, dit staat voor table header. Hiermee geef je aan per kolom of rij dat de betreffende cel een header is en waarmee je de rij of kolom kan identificeren.
 

Geavanceerde tabellen

Dit is een eenvoudige tabel, maar er zijn meer mogelijkheden om je tabel beter te laten passen bij je data en om deze beschrijvender te maken, zoals:
 

Tabellen als layout

In het begin van het web was het lastig om je pagina op te maken zoals je wilde en was een van de manieren om elementen te positioneren TABLE. De ingesloten elementen zijn mooi op elkaar uitgelijnd en je kan ze centreren of juist niet. Dit was een logische keuze toentertijd, maar sindsdien zijn er alternatieven geïntroduceerd, zoals DIV en CSS met verschillende layout-mogelijkheden (flex of grid). Dit heeft ertoe geleid dat TABLEs niet meer gebruikt werden, sterker nog, tabulaire data wordt soms als DIV met display: table; gepresenteerd. Dat is niet juist: Tabellen zij uitermate geschikt voor tabulaire data. Tegenwoordig zijn deze ook goed responsive te stylen.

Andere blogartikelen

  • Het gebruik van await in C#

    Geschreven door: op zaterdag 28 maart 2020

    Binnen applicaties kunnen soms functies voorkomen die lang nodig hebben om te voltooien. Denk bijvoorbeeld aan een call naar een API van een derde partij die veel data teruggeeft die verwerkt moet wor ...

    Bekijk het artikel »
  • Het gebruik van de SemaphoreSlim class in C#

    Geschreven door: op zaterdag 28 maart 2020

    Webapplicaties kunnen meerdere calls vanuit meerdere plekken verwerken zonder dat deze requests op elkaar moeten wachten. Maar soms heb je te maken met een usecase waar je helemaal niet wilt dat funct ...

    Bekijk het artikel »
  • SQL en het gebruik van JOIN

    Geschreven door: op zaterdag 28 maart 2020

    Binnen SQL heb je verschillende manieren om tabellen met elkaar te koppelen om zo data uit beide tabellen terug te krijgen in de resultaten. Maar wat houdt elk van deze joins in?Verschillende typenE ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten