CSS Basis

Selectors

Geavanceerd

Online HTML Editor

CSS Basis

Selectors

Geavanceerd

< >

CSS Tabellen

Tabellen worden gebruikt wanneer je "gegevens in tabelvorm" wil bekijken, dwz dat informatie in rijen en kolommen wordt weergegeven. Tabellen worden in HTML vaak gebruikt en met CSS kan je het uiterlijk van je tabellen aanzienlijk verbeteren.

Naam	Leeftijd	Stad
Alex de vries	31	Utrecht
Monique huisman	28	Arnhem
Marc huizinga	52	Deventer
Henny bolink	64	Enschede
Dennis modderman	48	Haarlem

Voorbeeld van tabellen

Tabel randen

De eigenschap border wordt gebruikt om tabelranden in CSS op te geven. In het volgende voorbeeld wordt een zwarte rand ingesteld voor de elementen <table>, <th> en <td>.

Voorbeeld:

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

Tabel in volledige breedte

Indien gewenst is het ook mogelijk om de tabel in volledige breedte te weergeven. Je kunt dit makkelijk doen door de eigenschap width: 100% aan het <table> element toe te voegen.

Voorbeeld:

table {
  width: 100%;
}

Zoals je in de bovenstaande voorbeelden hebt gezien hebben de tabellen dubbele randen. Dit komt omdat zowel de tabel als de elementen <th> en <td> aparte randen hebben. Dubbele randen in een tabel kun je eenvoudig verwijderen.

Samenvallende tabelranden

Met de CSS eigenschap border-collapse kun je aangeven of de tabelranden moeten worden samenvallen tot een enkele rand. Op deze manier heb je geen dubbele randen in je tabel zitten.

Voorbeeld:

table {
  border-collapse: collapse;
}

Als je alleen een rand rond de tabel wilt hebben, geef dan alleen de eigenschap border op voor <table>.

Voorbeeld:

table {
  border: 1px solid black;
}

Ruimte in tabellen aanpassen

Standaard maakt de browser de tabelcellen net groot genoeg zodat de gegevens in de cellen passen. Om meer ruimte te creëren tussen de inhoud van de tabelcel en de celranden, kun je eenvoudig de CSS eigenschap padding gebruiken.

Voorbeeld:

th, td {
  padding: 15px;
}

Je kunt ook de afstand tussen de randen van de cellen aanpassen met behulp van de CSS border-spacing eigenschap. De border-spacing eigenschap bepaalt bij een tabel met gescheiden tabelranden hoe breed de ruimte moet zijn tussen de randen van aan elkaar grenzende cellen.

Voorbeeld:

table {
  border-spacing: 10px;
}

Tabel breedte en hoogte

Een tabel wordt standaard net breed en hoog genoeg weergegeven waar alle gegevens in passen. Indien gewenst kan je ook de breedte en de hoogte van een tabel en de cellen ervan aanpassen met behulp van de CSS eigenschap width en height.

Voorbeeld:

table {
  width: 100%;
}

th {
  height: 40px;
}

Tekst in de tabel uitlijnen

De tekstinhoud binnen de tabelcellen kan je horizontaal of verticaal uitlijnen.

Horizontale uitlijning

De eigenschap text-align stelt de horizontale uitlijning van de inhoud <th> en <td> in. Standaard wordt de inhoud van de <th> elementen gecentreerd uitgelijnd en de inhoud van de <td> elementen links uitgelijnd. Om de inhoud van de elementen <td> ook in het midden uit te lijnen, gebruik je text-align: center;

Voorbeeld:

td {
  text-align: center;
}

Om de inhoud links uit te lijnen, gebruik je de eigenschap text-align: left; voor de <th> elementen.

Voorbeeld:

th {
  text-align: left;
}

Verticale uitlijning

De eigenschap vertical-align stelt de verticale uitlijning van de inhoud <th> en <td> in. Standaard is de verticale uitlijning van de inhoud in een tabel in het midden dit geldt voor zowel de <th> als de <td> elementen.

Voorbeeld:

td {
  height: 40px;
  vertical-align: bottom;
}

Positie van het bijschrift

Om de verticale positie van het bijschrift in te stellen kun je de CSS eigenschap caption-side gebruiken. Je kunt de positie van het bijschrift voor een tabel bepalen zodat het boven of onder de tabel wordt geplaatst. De standaardpositie is boven.

Voorbeeld:

caption {
  caption-side: bottom;
}

Lege cellen verbergen

De empty-cells eigenschap bepaalt bij een tabel met gescheiden tabelranden of de randen en achtergrond van lege cellen wel of niet moeten worden weergegeven. Deze eigenschap accepteert een waarde van show of hide. De standaardwaarde is show.

Voorbeeld:

table {
  border-collapse: separate;
  empty-cells: hide;
}

Tabel met horizontale lijnen

Om een tabel met alleen horizontale scheidingslijnen te weergeven dien je de eigenschap border-bottom toe te voegen aan de <th> en <td> elementen.

Voorbeeld:

th, td {
  border-bottom: 1px solid silver;
}

Een mouse over maken

Om van een tabel een mouse over te maken gebruik je de :hover selector op het <tr> element om de tabelrijen te markeren.

Voorbeeld:

tr:hover { 
  background-color: tomato;
}

Gestreepte tabellen

Het instellen van verschillende achtergrondkleuren voor rijen is om de leesbaarheid van tabellen met een grote hoeveelheid gegevens te verbeteren. Dit staat algemeen bekend als zebrastrepen van een tabel. Om tabellen met zebrastrepen te maken dien je de :nth-child() selector toe te voegen samen met een achtergrondkleur aan alle even of oneven tabelrijen.

Voorbeeld:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Tabel kleuren

Om een tabel nog wat overzichtelijker te maken kun je een achtergrondkleur of een tekstkleur opgeven. In het onderstaande voorbeeld hebben we een achtergrondkleur en een tekstkleur opgegeven voor de <th> elementen.

Voorbeeld:

th {
  color: white;
  background-color: #CE621A;
}

Responsive tabel

Tabellen zijn standaard niet responsief. Om mobiele apparaten te ondersteunen, kun je echter responsiviteit aan de tabellen toevoegen door horizontaal scrollen op kleine schermen in te schakelen. Voeg het element <div> toe met overflow-x: auto; rond het <table> element om het responsief te maken.

Voorbeeld:

<div style="overflow-x: auto;">

<table>
...Tabel inhoud...
</table>

</div>

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.