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

  • SQL en het gebruik van For XML: Explicit en Path

    Geschreven door: op maandag 30 december 2019

    In mijn vorige blog hebben we For XML Raw en For XML Auto besproken. In deze blog zullen we For XML Explicit en For XML Path doornemen. Hieronder eerst wat uitleg over beide:EXPLICIT: Met ...

    Bekijk het artikel »
  • UX audit: heatmaps

    Geschreven door: op maandag 30 december 2019

    Een UX audit kun je uitvoeren op een digitaal product met als doel er achter te komen waar gebruikers van het product tegenaan lopen in het gebruik van bijvoorbeeld uw site. Door een UX audit te laten ...

    Bekijk het artikel »
  • Definitielijsten

    Geschreven door: op zondag 29 december 2019

    In het vorige blogitem ging het over het semantisch correct gebruikmaken van opsommingen, via <ul>, <ol> en <li>. Deze opsommingen zijn relatief eenvoudige datastructuren, waarin wel ...

    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