Het element <table>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

De volgende attributen zijn verouderd en mogen niet meer worden gebruikt. Ze worden hieronder gedocumenteerd ter referentie bij het bijwerken van bestaande code en voor historisch belang.

Visuele opmaak van tabelinhoud

De volgende elementen maken deel uit van de tabelstructuur:

• <caption>
• <thead>
• <colgroup>
• <col>
• <th>
• <tbody>
• <tr>
• <td>
• <tfoot>

Het <table>-vak creëert een tabel-opmaakcontext. Elementen binnen de <table> genereren rechthoekige vakken. Elk vak beslaat een aantal tabelcellen volgens de volgende regels:

1. De rijvakken vullen de tabel in de volgorde van de broncode van boven naar beneden. Elk rijvak beslaat één rij cellen.
2. Een rijgroepvak beslaat een of meer rijvakken.
3. Kolomvakken worden naast elkaar geplaatst in de volgorde van de broncode. Afhankelijk van de waarde van het dir-attribuut worden de kolommen van links naar rechts of van rechts naar links weergegeven. Een kolomvak beslaat een of meer kolommen tabelcellen.
4. Een kolomgroepvak beslaat een of meer kolomvakken.
5. Een celvak kan zich uitstrekken over meerdere rijen en kolommen. User-agents snijden cellen bij om te passen binnen het beschikbare aantal rijen en kolommen.

Tabelcellen hebben wel padding. De vakken waaruit een tabel bestaat, hebben geen marges.

Tabellagen en transparantie

Voor stylingdoeleinden kunnen de tabelelementen worden gezien als geplaatst op zes op elkaar liggende lagen:

De achtergrond die op een element in een laag is ingesteld, is alleen zichtbaar als de lagen erboven een transparante achtergrond hebben. Een ontbrekende cel wordt weergegeven alsof een anoniem table-cell-vak die plaats innam.

Toegankelijkheid

Bijschriften

Door een <caption>-element op te geven waarvan de waarde het doel van de tabel duidelijk en beknopt beschrijft, kunnen mensen beslissen of ze de rest van de tabelinhoud moeten controleren of kunnen overslaan.

Dit helpt mensen die navigeren met behulp van ondersteunende technologie zoals een schermlezer, mensen met verminderd zicht, en mensen met cognitieve beperkingen.

Bereik van rijen en kolommen

Het scope-attribuut op koptekstcellen (<th>-elementen) is overbodig in eenvoudige contexten, omdat het bereik wordt afgeleid. Sommige ondersteunende technologieën slagen er echter mogelijk niet in om de juiste conclusies te trekken, dus het specificeren van het bereik van de koptekst kan de gebruikerservaring verbeteren. In complexe tabellen kan scope worden opgegeven om noodzakelijke informatie te verstrekken over de cellen die aan een koptekst gerelateerd zijn.

Ingewikkelde tabellen

Ondersteunende technologieën zoals schermlezers kunnen moeite hebben met het verwerken van tabellen die zo complex zijn dat kopcellen niet op een strikt horizontale of verticale manier kunnen worden geassocieerd. Dit wordt doorgaans aangegeven door de aanwezigheid van de colspan- en rowspan-attributen.

Overweeg idealiter alternatieve manieren om de inhoud van de tabel te presenteren, waaronder het opsplitsen ervan in een verzameling kleinere, verwante tabellen die niet hoeven te steunen op het gebruik van de colspan- en rowspan-attributen. Naast het helpen van mensen die gebruikmaken van ondersteunende technologie om de inhoud van de tabel te begrijpen, kan dit ook mensen met cognitieve beperkingen ten goede komen die moeite kunnen hebben met het begrijpen van de associaties die de tabelindeling beschrijft.

Als de tabel niet kan worden opgesplitst, gebruik dan een combinatie van de id- en headers-attributen om elke tabelcel programmatisch te associëren met de koptekst(en) (<th>-elementen) waarmee de cel is geassocieerd.

Voorbeelden

De onderstaande voorbeelden bevatten tabellen van geleidelijk toenemende complexiteit. Zie ook onze beginnersgids Tabellen stylen voor informatie over het stylen van tabellen, inclusief veelvoorkomende, bruikbare technieken.

Vanwege de manier waarop de structuur van een <table> het gebruik van verschillende tabelgerelateerde HTML-elementen samen met diverse bijbehorende attributen omvat, zijn de volgende voorbeelden bedoeld om een vereenvoudigde uitleg te geven die de basisprincipes en veelvoorkomende standaarden behandelt. Aanvullende en meer gedetailleerde informatie is te vinden op de bijbehorende gelinkte pagina's.

Deze tabelvoorbeelden laten zien hoe je een toegankelijke tabel maakt die gestructureerd is met HTML en gestyled met CSS.

Vanwege de manier waarop HTML-tabellen zijn gestructureerd, kan de markup snel groeien. Om deze reden is het belangrijk om het doel en het uiteindelijke uiterlijk van de tabel duidelijk te bepalen om de juiste structuur te creëren. Een logische structuur ontwikkeld met semantische markup is niet alleen gemakkelijker te stylen, maar maakt ook bruikbare en toegankelijke tabellen mogelijk die door iedereen kunnen worden begrepen en doorlopen, inclusief zoekmachines en gebruikers van ondersteunende technologie.

Het eerste voorbeeld is eenvoudig, waarbij volgende voorbeelden in complexiteit toenemen. Eerst ontwikkelen we een zeer eenvoudige HTML-tabelstructuur voor de tabel. De eerste twee voorbeelden bevatten geen tabelsectiegroepen zoals een gedefinieerde kop, hoofdtekst of voettekst, en er is geen sprake van celoverspanning of expliciet gedefinieerde celrelaties. Zelfs een bijschrift wordt niet gegeven. Terwijl we door de voorbeelden werken, worden ze geleidelijk uitgebreid om alle tabelfuncties te bevatten die een complexe gegevenstabel zou moeten hebben.

Basistabel

Dit voorbeeld bevat een zeer eenvoudige tabel met drie rijen en twee kolommen. Om de standaard tabelstijlen van de browser te demonstreren, is er geen CSS in dit voorbeeld opgenomen.

HTML

De tabelrijen worden gedefinieerd met <tr>-elementen, en de kolommen worden gedefinieerd met koptekst- en gegevenscellen daarbinnen. De eerste rij bevat de kopcellen (<th>-elementen) die dienen als kolomkoppen voor de gegevenscellen (<td>-elementen). Elk element (<th> of <td>) per rij bevindt zich in de bijbehorende kolom — dat wil zeggen, het eerste element van een rij staat in de eerste kolom, en het tweede element van die rij staat in de tweede kolom.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>

Resultaat

Er is geen aangepaste CSS of gebruikersstylesheet toegepast op deze tabel. De styling is puur het resultaat van de user-agent-stylesheet.

Uitgebreide tabel met kopcellen

Dit voorbeeld breidt de basistabel uit door de inhoud uit te breiden en basis-CSS-stijlen toe te voegen.

HTML

De tabel bestaat nu uit vier rijen (<tr>-elementen), elk met vier kolommen. De eerste rij is een rij kopcellen (de eerste rij bevat alleen <th>-elementen). Volgende rijen bevatten een kopkolom (<th>-elementen als de eerste onderliggende elementen van elke rij) en drie gegevenskolommen (<td>-elementen). Omdat er geen tabelsectie-elementen worden gebruikt, definieert de browser automatisch de inhoudsgroepstructuur, d.w.z. alle rijen worden verpakt binnen de hoofdtekst van de tabel in een impliciet <tbody>-element.

<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

Met CSS voorzien we in de basisstyling om lijnen rondom de onderdelen van de tabel te creëren om de gegevensstructuur duidelijker te maken. De CSS voegt een solide rand toe rondom de <table> en rondom elk van de cellen van de tabel, inclusief de cellen die zijn opgegeven met zowel <th>- als <td>-elementen, waardoor elke kop- en gegevenscel wordt afgebakend.

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Resultaat

Relaties tussen tabelcellen specificeren

Voordat we doorgaan om de tabel op meer geavanceerde manieren uit te breiden, is het raadzaam om de toegankelijkheid te verbeteren door relaties tussen de kop- en gegevenscellen (<th>- en <td>-elementen) te definiëren.

HTML

Dit wordt bereikt door het scope-attribuut op de <th>-elementen te introduceren en de waarden in te stellen op de bijbehorende col- (kolom) of row-waarde.

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">ID</th>
    <th scope="col">Member Since</th>
    <th scope="col">Balance</th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

De CSS en het visuele resultaat zijn ongewijzigd — de aanpassing biedt waardevolle contextuele informatie voor ondersteunende technologieën zoals schermlezers om te helpen bepalen met welke cellen de kopteksten verband houden.

Tabelsectiegroepen expliciet specificeren

Naast het verbeteren van de toegankelijkheid door celrelaties te specificeren, kan de semantiek van de tabel worden verbeterd door tabelsectiegroepen te introduceren.

HTML

Aangezien de eerste rij (<tr>-element) alleen kolomkopcellen bevat en de koptekst vormt voor de rest van de inhoud van de tabel, kan deze worden omsloten door het <thead>-element om die rij expliciet als de kopsectie van de tabel aan te duiden. Bovendien kan wat automatisch door de browser wordt bewerkstelligd, ook expliciet worden gedefinieerd — de hoofdtekstsectie van de tabel, die de hoofdgegevens van de tabel bevat, wordt gespecificeerd door de bijbehorende rijen te omsluiten met het <tbody>-element. Het expliciete gebruik van het <tbody>-element helpt de browser om de beoogde tabelstructuur te creëren en ongewenste resultaten te voorkomen.

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">ID</th>
      <th scope="col">Member Since</th>
      <th scope="col">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Nogmaals, de CSS en het visuele resultaat zijn ongewijzigd — het specificeren van dergelijke tabelsectiegroepen biedt waardevolle contextuele informatie voor ondersteunende technologieën, waaronder schermlezers en zoekmachines, evenals voor styling in de CSS, wat in een later voorbeeld zal worden getoond.

Kolom- en rijoverspanning

In dit voorbeeld breiden we de tabel nog verder uit door een kolom toe te voegen en een kopsectie met meerdere rijen te introduceren.

HTML

Voortbouwend op de tot nu toe gemaakte tabel wordt een nieuwe kolom voor "Membership End Date" toegevoegd aan elke rij van de hoofdtekst met het <td>-element. Er wordt ook een extra rij (<tr>-element) toegevoegd binnen de kopsectie (<thead>-element) om een "Membership Dates"-kop te introduceren als heading voor de kolommen "Joined" en "Canceled".

Het creëren van de tweede koprij omvat het toevoegen van colspan- en rowspan-attributen aan de <th>-elementen om de kopcellen aan de juiste kolommen en rijen toe te wijzen.

<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Resultaat

De kopsectie heeft nu twee rijen, één met de kopteksten (<th>-elementen) "Name", "ID", "Membership Dates" en "Balance", en een "Membership Dates"-koptekst met twee subkoppen die zich in een tweede rij bevinden: "Joined" en "Canceled". Dit wordt bereikt door:

• De kopcellen "Name", "ID" en "Balance" van de eerste rij overspannen beide tabelkoprijen door gebruik te maken van het rowspan-attribuut, waardoor ze elk twee rijen hoog zijn.
• De kopcel "Membership Dates" van de eerste rij overspant twee kolommen met behulp van het colspan-attribuut, waardoor deze twee kolommen breed is.
• De tweede rij bevat alleen de twee kopcellen "Joined" en "Canceled", omdat de andere drie kolommen zijn samengevoegd met de cellen in de eerste rij die twee rijen overspannen. De twee kopcellen zijn correct gepositioneerd onder de koptekst "Membership Dates".

Tabelbijschrift en kolomoverzicht

Het is een gangbare en aan te raden praktijk om een overzicht van de inhoud van de tabel te geven, zodat gebruikers snel de relevantie van de tabel kunnen bepalen. Bovendien wordt de kolom "Balance" samengevat door de som van de saldi van de individuele leden weer te geven.

HTML

Er wordt een tabeloverzicht toegevoegd met behulp van een tabelbijschrift (<caption>-element) als het eerste onderliggende element van de <table>. Het bijschrift levert de accessible name of accessible description voor de tabel.

Ten slotte wordt een tabelvoetsectie (<tfoot>-element) toegevoegd onder de hoofdtekst, met een rij die de kolom "Balance" samenvat door een som weer te geven. De eerder geïntroduceerde elementen en attributen worden toegepast.

<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Resultaat

Basisstyling van de tabel

Laten we een basisstijl toepassen op de tabel om het lettertype aan te passen en een background-color toe te voegen aan de kop- en voetrijen. De HTML blijft deze keer ongewijzigd, dus laten we meteen naar de CSS gaan.

<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

CSS

Terwijl hier een font-eigenschap wordt toegevoegd aan het <table>-element om een visueel aantrekkelijker lettertype in te stellen (of een verschrikkelijk schreefloos lettertype, afhankelijk van je persoonlijke mening), is het interessante deel de tweede stijl, waarin de <tr>-elementen die zich binnen de <thead> en <tfoot> bevinden, worden gestyled door een lichtblauwe background-color toe te voegen. Dit is een manier om snel een achtergrondkleur toe te passen op alle cellen in specifieke secties tegelijk.

table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Resultaat

Geavanceerde tabelstyling

Nu gaan we alles uit de kast halen, met stijlen op rijen in zowel het kop- als het hoofdtekstgebied, inclusief afwisselende rijkleuren, cellen met verschillende kleuren afhankelijk van hun positie binnen een rij, enzovoort. Laten we deze keer eerst naar het resultaat kijken.

Resultaat

Zo ziet de uiteindelijke tabel eruit:

Er is opnieuw geen wijziging in de HTML. Zie je wat een goede voorbereiding van de HTML-structuur kan opleveren?

<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

CSS

De CSS is deze keer veel uitgebreider. Het is niet ingewikkeld, maar er gebeurt veel. Laten we het opsplitsen.

Hier worden de eigenschappen border-collapse en border-spacing toegevoegd om de ruimte tussen cellen te elimineren en randen die elkaar raken samen te voegen tot één rand in plaats van dubbele randen te krijgen. Bovendien wordt het <caption> onderaan de tabel geplaatst met behulp van de caption-side-eigenschap:

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

Vervolgens wordt de padding-eigenschap gebruikt om alle tabelcellen ruimte rondom hun inhoud te geven. De vertical-align-eigenschap lijnt de inhoud van de kopcellen uit aan de onderkant van de cel, wat te zien is bij de cellen in de kop die twee rijen overspannen:

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

De volgende CSS-regel stelt de background-color in van alle <tr>-elementen in de kop van de tabel (zoals opgegeven met <thead>). Vervolgens wordt de onderrand van de kop ingesteld als een twee pixels brede lijn. Merk echter op dat we de :nth-of-type-selector gebruiken om de border-bottom-eigenschap toe te passen op de tweede rij in de kop. Waarom? Omdat de kop bestaat uit twee rijen die door sommige cellen worden overspannen. Dat betekent dat er daadwerkelijk twee rijen zijn; het toepassen van de stijl op de eerste rij zou niet het verwachte resultaat opleveren:

thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

Laten we de twee kopcellen "Joined" en "Canceled" stylen met groene en rode tinten om het "goede" van een nieuw lid en de "domper" van een geannuleerd lidmaatschap weer te geven. Hier duiken we in de laatste rij van de kopsectie van de tabel met behulp van de :last-of-type-selector en geven we de eerste kopcel daarin (de "Joined"-kop) een groenachtige kleur, en de tweede kopcel daarin (de "Canceled"-kop) een roodachtige tint:

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

Aangezien de eerste kolom ook moet opvallen, wordt hier eveneens wat aangepaste styling toegevoegd. Deze CSS-regel styleert de eerste kopcel in elke rij van de hoofdtekst van de tabel met de text-align-eigenschap om de namen van de leden links uit te lijnen, en met een enigszins andere background-color:

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

Het is gebruikelijk om de leesbaarheid van tabelgegevens te verbeteren door afwisselende rijkleuren te gebruiken — dit wordt ook wel "zebra striping" genoemd. Laten we wat background-color toevoegen aan elke even rij:

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

Aangezien het gebruikelijk is om valutawaarden in tabellen rechts uit te lijnen, doen we dat hier ook. Dit stelt eenvoudigweg de text-align-eigenschap in voor de laatste <td> in elke rij van de hoofdtekst op right:

tbody > tr > td:last-of-type {
  text-align: right;
}

Ten slotte wordt een stijl vergelijkbaar met de kop toegepast op de voetsectie van de tabel om deze ook te laten opvallen:

tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

Grote tabellen weergeven in kleine ruimtes

Een veelvoorkomend probleem met tabellen op het web is dat ze van nature niet erg goed werken op kleine schermen wanneer de hoeveelheid inhoud groot is, en de manier om ze scrollbaar te maken is niet vanzelfsprekend, vooral wanneer de markup afkomstig kan zijn van een CMS en niet kan worden aangepast om een wrapper te bevatten.

Dit voorbeeld biedt één manier om tabellen weer te geven in kleine ruimtes. We hebben de HTML-inhoud verborgen omdat deze erg groot is en er niets bijzonders aan is. De CSS is in dit voorbeeld nuttiger om te bekijken.

<table>
  <thead>
    <tr>
      <th>1<sup>3</sup> equals:</th>
      <th>2<sup>3</sup> equals:</th>
      <th>3<sup>3</sup> equals:</th>
      <th>4<sup>3</sup> equals:</th>
      <th>5<sup>3</sup> equals:</th>
      <th>6<sup>3</sup> equals:</th>
      <th>7<sup>3</sup> equals:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1: 1</td>
      <td>row 1: 8</td>
      <td>row 1: 27</td>
      <td>row 1: 64</td>
      <td>row 1: 125</td>
      <td>row 1: 216</td>
      <td>row 1: 343</td>
    </tr>
    <tr>
      <td>row 2: 1</td>
      <td>row 2: 8</td>
      <td>row 2: 27</td>
      <td>row 2: 64</td>
      <td>row 2: 125</td>
      <td>row 2: 216</td>
      <td>row 2: 343</td>
    </tr>
    <tr>
      <td>row 3: 1</td>
      <td>row 3: 8</td>
      <td>row 3: 27</td>
      <td>row 3: 64</td>
      <td>row 3: 125</td>
      <td>row 3: 216</td>
      <td>row 3: 343</td>
    </tr>
    <tr>
      <td>row 4: 1</td>
      <td>row 4: 8</td>
      <td>row 4: 27</td>
      <td>row 4: 64</td>
      <td>row 4: 125</td>
      <td>row 4: 216</td>
      <td>row 4: 343</td>
    </tr>
    <tr>
      <td>row 5: 1</td>
      <td>row 5: 8</td>
      <td>row 5: 27</td>
      <td>row 5: 64</td>
      <td>row 5: 125</td>
      <td>row 5: 216</td>
      <td>row 5: 343</td>
    </tr>
    <tr>
      <td>row 6: 1</td>
      <td>row 6: 8</td>
      <td>row 6: 27</td>
      <td>row 6: 64</td>
      <td>row 6: 125</td>
      <td>row 6: 216</td>
      <td>row 6: 343</td>
    </tr>
    <tr>
      <td>row 7: 1</td>
      <td>row 7: 8</td>
      <td>row 7: 27</td>
      <td>row 7: 64</td>
      <td>row 7: 125</td>
      <td>row 7: 216</td>
      <td>row 7: 343</td>
    </tr>
    <tr>
      <td>row 8: 1</td>
      <td>row 8: 8</td>
      <td>row 8: 27</td>
      <td>row 8: 64</td>
      <td>row 8: 125</td>
      <td>row 8: 216</td>
      <td>row 8: 343</td>
    </tr>
    <tr>
      <td>row 9: 1</td>
      <td>row 9: 8</td>
      <td>row 9: 27</td>
      <td>row 9: 64</td>
      <td>row 9: 125</td>
      <td>row 9: 216</td>
      <td>row 9: 343</td>
    </tr>
    <tr>
      <td>row 10: 1</td>
      <td>row 10: 8</td>
      <td>row 10: 27</td>
      <td>row 10: 64</td>
      <td>row 10: 125</td>
      <td>row 10: 216</td>
      <td>row 10: 343</td>
    </tr>
    <tr>
      <td>row 11: 1</td>
      <td>row 11: 8</td>
      <td>row 11: 27</td>
      <td>row 11: 64</td>
      <td>row 11: 125</td>
      <td>row 11: 216</td>
      <td>row 11: 343</td>
    </tr>
    <tr>
      <td>row 12: 1</td>
      <td>row 12: 8</td>
      <td>row 12: 27</td>
      <td>row 12: 64</td>
      <td>row 12: 125</td>
      <td>row 12: 216</td>
      <td>row 12: 343</td>
    </tr>
    <tr>
      <td>row 13: 1</td>
      <td>row 13: 8</td>
      <td>row 13: 27</td>
      <td>row 13: 64</td>
      <td>row 13: 125</td>
      <td>row 13: 216</td>
      <td>row 13: 343</td>
    </tr>
    <tr>
      <td>row 14: 1</td>
      <td>row 14: 8</td>
      <td>row 14: 27</td>
      <td>row 14: 64</td>
      <td>row 14: 125</td>
      <td>row 14: 216</td>
      <td>row 14: 343</td>
    </tr>
    <tr>
      <td>row 15: 1</td>
      <td>row 15: 8</td>
      <td>row 15: 27</td>
      <td>row 15: 64</td>
      <td>row 15: 125</td>
      <td>row 15: 216</td>
      <td>row 15: 343</td>
    </tr>
    <tr>
      <td>row 16: 1</td>
      <td>row 16: 8</td>
      <td>row 16: 27</td>
      <td>row 16: 64</td>
      <td>row 16: 125</td>
      <td>row 16: 216</td>
      <td>row 16: 343</td>
    </tr>
    <tr>
      <td>row 17: 1</td>
      <td>row 17: 8</td>
      <td>row 17: 27</td>
      <td>row 17: 64</td>
      <td>row 17: 125</td>
      <td>row 17: 216</td>
      <td>row 17: 343</td>
    </tr>
    <tr>
      <td>row 18: 1</td>
      <td>row 18: 8</td>
      <td>row 18: 27</td>
      <td>row 18: 64</td>
      <td>row 18: 125</td>
      <td>row 18: 216</td>
      <td>row 18: 343</td>
    </tr>
    <tr>
      <td>row 19: 1</td>
      <td>row 19: 8</td>
      <td>row 19: 27</td>
      <td>row 19: 64</td>
      <td>row 19: 125</td>
      <td>row 19: 216</td>
      <td>row 19: 343</td>
    </tr>
    <tr>
      <td>row 20: 1</td>
      <td>row 20: 8</td>
      <td>row 20: 27</td>
      <td>row 20: 64</td>
      <td>row 20: 125</td>
      <td>row 20: 216</td>
      <td>row 20: 343</td>
    </tr>
  </tbody>
</table>

CSS

Wanneer je naar deze stijlen kijkt, zul je zien dat de display-eigenschap van de tabel is ingesteld op block. Hoewel dit scrollen mogelijk maakt, verliest de tabel een deel van zijn samenhang, en proberen tabelcellen zo klein mogelijk te worden. Om dit probleem te beperken hebben we white-space op nowrap gezet voor de <tbody>. Dit doen we echter niet voor de <thead>, om te voorkomen dat lange titels de kolommen breder maken dan nodig is om de gegevens weer te geven.

Om de tabelkoppen op de pagina te houden tijdens het naar beneden scrollen, hebben we position ingesteld op sticky voor de <th>-elementen. Merk op dat we border-collapse niet hebben ingesteld op collapse, aangezien de kop dan niet correct kan worden gescheiden van de rest van de tabel.

Aangezien de <table> een vaste grootte heeft, is de overflow ingesteld op auto het belangrijkste onderdeel hier, omdat het de tabel scrollbaar maakt.

table,
th,
td {
  border: 1px solid black;
}

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: white;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

Resultaat

Technische samenvatting

Zie ook

• <caption>
• <col>
• <colgroup>
• <tbody>
• <td>
• <tfoot>
• <th>
• <thead>
• <tr>