Tabellen in HTML header image

Tabellen in HTML

maandag 30 december 2019 ·Leestijd: 4 minuten
contacteer auteur:
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

Integraties met API's van verschillende partijen
Geschreven door
op donderdag 30 juni 2022
Bij Sigma Solutions maken wij integraties met verschillende partijen, die ervoor zorgen dat jouw bedrijfsproces geautomatiseerd en gedigitaliseerd kan worden. We zijn constant op zoek naar passende oplossingen voor onze klanten.
Wat is B2B Online Advertising?
Geschreven door
op donderdag 30 juni 2022
B2B Online Advertising is een marketingstrategie die bedoeld is om een zakelijke boodschap over te brengen aan andere bedrijven door middel van advertenties.
Als traditioneel bedrijf succesvol blijven in een tijdperk van digitalisering
Geschreven door
op donderdag 30 juni 2022
Wil je als traditioneel bedrijf succesvol blijven in een tijdperk van 'digital natives'? Lees dan deze blogpost!
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º