CSS Tabel

Gebruik CSS om het uiterlijk van HTML-tabellen aanzienlijk te verbeteren:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Probeer het zelf uit

Tabelranden

Om tabelranden in CSS in te stellen, gebruik je border Eigenschap.

Het volgende voorbeeld bepaalt de zwarte rand voor de <table>, <th> en <td>-elementen:

Voornaam Achternaam
Bill Gates
Steve Jobs

Voorbeeld

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

Probeer het zelf uit

Opmerking:De tabel in het voorbeeld hierboven heeft dubbele randen. Dit komt omdat de table en de <th> en <td>-elementen aparte randen hebben.

Volledige breedte tabel

In sommige gevallen lijkt de bovenstaande tabel klein. Als je een tabel nodig hebt die de hele scherm (volledige breedte) beslaat, voeg dan width: 100% toe aan het <table>-element:

Voorbeeld

table {
  width: 100%;
}

Probeer het zelf uit

Dubbele randen

Let op de tabel hierboven heeft dubbele randen. Dit komt omdat de tabel en de th- en td-elementen aparte randen hebben.

Zie het volgende voorbeeld om dubbele randen te verwijderen.

Samenvoegen van tabelranden

border-collapse Eigenschap stelt in of de tabelranden worden samengevoegd tot één enkele rand:

Voornaam Achternaam
Bill Gates
Steve Jobs

Voorbeeld

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

Probeer het zelf uit

Als je alleen een rand om de tabel wilt, moet je alleen <table> specificeren: border padding

Voornaam Achternaam
Bill Gates
Steve Jobs

Voorbeeld

table {
  border: 1px solid black;
}

Probeer het zelf uit

Tabelbreedte en -hoogte

De breedte en hoogte van de tabel worden bepaald door width en height Eigenschap definieert.

Het volgende voorbeeld stelt de breedte van de tabel in op 100%, en stelt de hoogte van het <th>-element in op 50px:

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Voorbeeld

table {
  width: 100%;
}
th {
  height: 50px;
}

Probeer het zelf uit

Om een tabel te maken die slechts de helft van de pagina beslaat, gebruik dan width: 50%:

Voorbeeld

table {
  width: 50%;
}
th {
  height: 70px;
}

Probeer het zelf uit

Horizontale uitlijning

text-align Eigenschap stelt de horizontale uitlijning van de inhoud in <th> of <td> in (links, rechts of centrisch).

Standaard is de inhoud van het <th>-element centrisch uitgelijnd, terwijl de inhoud van het <td>-element links uitgelijnd is.

Om de inhoud van het <td>-element ook centrisch uit te lijnen, gebruik dan text-align: center:

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Voorbeeld

th {
  text-align: center;
}

Probeer het zelf uit

Het volgende voorbeeld maakt de tekst in het <th>-element links uitgelijnd:

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Voorbeeld

th {
  padding: 15px;
}

Probeer het zelf uit

Verticale uitlijning

vertical-align Eigenschap stelt de verticale uitlijning van de inhoud in <th> of <td> in (boven, onder of centrisch).

Standaard is de verticale uitlijning van de inhoud in de tabel centrisch ( zarówno <th> als <td>-elementen zijn centrisch uitgelijnd).

De volgende voorbeeld stelt de verticale tekstuitlijning van het <td>-element in op onderaf.

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Voorbeeld

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

Probeer het zelf uit

tabelinbuis

tabelbinnenafstand Om de afstand tussen de rand en de tabelinhoud te controleren, gebruik dan padding

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Voorbeeld

eigenschappen, om horizontale scheidingslijnen te realiseren:
  eigenschappen:
  padding: 15px;
}

Probeer het zelf uit

text-align: left;

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

horizontale scheidingslijn voeg een horizontale scheidingslijn toe aan de <th> en <td> elementen: border-bottom

Voorbeeld

eigenschappen, om horizontale scheidingslijnen te realiseren:
  th, td {
}

Probeer het zelf uit

border-bottom: 1px solid #ddd;

hoverbare tabel Gebruik op het <tr>-element :hover

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Voorbeeld

tr:hover {background-color: #f5f5f5;}

Probeer het zelf uit

streep tabel

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Om een zebra-streep tabel effect te bereiken, gebruik dan nth-child() selector, en voeg een achtergrondkleur toe aan alle eveneens (of oneven) tabelregels: background-color:

Voorbeeld

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

Probeer het zelf uit

Tabelkleur

Het volgende voorbeeld specificeert de achtergrondkleur en tekstkleur van de <th>-elementen:

Voornaam Achternaam Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Voorbeeld

th {
  background-color: #4CAF50;
  color: white;
}

Probeer het zelf uit

Responsieve tabel

Als het scherm te klein is om alle inhoud weer te geven, wordt een responsieve tabel een horizontale schuifbalk weergegeven:

Voornaam Achternaam Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

Voeg om de <table>-elementen heen een container toe met overflow-x:auto van de container-elementen (bijvoorbeeld <div>), om een responsief effect te bereiken:

Voorbeeld

<div style="overflow-x:auto;">
<table>
... tabelinhoud ...
</table>
</div>

Probeer het zelf uit

Opmerking:In OS X Lion (op de Mac) zijn de schuifbalken standaard verborgen en worden ze alleen weergegeven wanneer ze worden gebruikt (zelfs als "overflow:scroll" is ingesteld).

Meer voorbeelden

Maak een aantrekkelijke tabel
Dit voorbeeld toont hoe je een aantrekkelijke tabel kunt maken.
Stel de positie van de tabelkop in
Dit voorbeeld toont hoe je een tabelkop kunt plaatsen.

CSS-tabel-eigenschappen

eigenschappen beschrijving
border Korte eigenschap. Alle randeigenschappen worden in één verklaring ingesteld.
border-collapse Bepaalt of de randen van de tabel moeten worden gefold.
border-spacing Bepaalt de afstand tussen de randen van aangrenzende cellen.
caption-side Bepaalt de positie van de tabeltitel.
empty-cells Bepaalt of randen en achtergronden in de lege cellen van de tabel worden weergegeven.
table-layout Instellen van het layout-algoritme voor tabellen.