Tafels
Documentatie en voorbeelden voor opt-in-styling van tabellen (gezien hun algemeen gebruik in JavaScript-plug-ins) met Bootstrap.
Vanwege het wijdverbreide gebruik van tabellen in widgets van derden, zoals kalenders en datumkiezers, hebben we onze tabellen ontworpen als opt-in . Voeg gewoon de basisklasse toe .table
aan een willekeurige <table>
, en breid deze vervolgens uit met aangepaste stijlen of onze verschillende meegeleverde modificatieklassen.
Met behulp van de meest elementaire tabelopmaak ziet u hier hoe .table
-gebaseerde tabellen eruitzien in Bootstrap. Alle tabelstijlen worden overgenomen in Bootstrap 4 , wat betekent dat alle geneste tabellen op dezelfde manier worden opgemaakt als de bovenliggende tabellen.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Je kunt de kleuren ook omkeren - met lichte tekst op donkere achtergronden - met .table-dark
.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Gebruik, net als bij tabellen en donkere tabellen, de modificatieklassen .thead-light
of .thead-dark
om <thead>
s licht- of donkergrijs te laten lijken.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Gebruik .table-striped
om zebra-striping toe te voegen aan elke tabelrij binnen het <tbody>
.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Voeg toe .table-bordered
voor randen aan alle kanten van de tabel en cellen.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Voeg toe .table-borderless
voor een tafel zonder randen.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless
kan ook gebruikt worden op donkere tafels.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Toevoegen .table-hover
om een hover-status in te schakelen op tabelrijen binnen een <tbody>
.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Voeg .table-sm
toe om tabellen compacter te maken door de celopvulling in tweeën te snijden.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry de vogel |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Gebruik contextuele klassen om tabelrijen of afzonderlijke cellen te kleuren.
Klas | rubriek | rubriek |
---|---|---|
Actief | Cel | Cel |
Standaard | Cel | Cel |
primair | Cel | Cel |
Ondergeschikt | Cel | Cel |
Succes | Cel | Cel |
Gevaar | Cel | Cel |
Waarschuwing | Cel | Cel |
Info | Cel | Cel |
Licht | Cel | Cel |
Donker | Cel | Cel |
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Normale tafelachtergrondvarianten zijn niet beschikbaar met de donkere tafel, maar u kunt tekst- of achtergrondhulpprogramma's gebruiken om vergelijkbare stijlen te bereiken.
# | rubriek | rubriek |
---|---|---|
1 | Cel | Cel |
2 | Cel | Cel |
3 | Cel | Cel |
4 | Cel | Cel |
5 | Cel | Cel |
6 | Cel | Cel |
7 | Cel | Cel |
8 | Cel | Cel |
9 | Cel | Cel |
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
Betekenis overbrengen aan ondersteunende technologieën
Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .sr-only
klasse.
Maak responsieve tabellen door een willekeurige in te pakken .table
met .table-responsive{-sm|-md|-lg|-xl}
, waardoor de tabel horizontaal schuift bij elk max-width
breekpunt van respectievelijk maximaal (maar niet inclusief) 576px, 768px, 992px en 1120px.
Houd er rekening mee dat aangezien browsers momenteel geen bereikcontextquery's ondersteunen , we de beperkingen van min-
en max-
voorvoegsels en viewports met fractionele breedten omzeilen (die onder bepaalde omstandigheden kunnen voorkomen op apparaten met een hoge dpi, bijvoorbeeld) door waarden met een hogere precisie te gebruiken voor deze vergelijkingen .
A <caption>
functioneert als een kop voor een tabel. Het helpt gebruikers met schermlezers om een tabel te vinden en te begrijpen waar het over gaat en om te beslissen of ze het willen lezen.
# | Eerst | Laatst | Handvat |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Met responsieve tabellen kunnen tabellen gemakkelijk horizontaal worden gescrold. Maak elke tabel responsief in alle viewports door een in te pakken .table
met .table-responsive
. Of kies een maximaal breekpunt waarmee u een responsieve tabel wilt hebben door te gebruiken .table-responsive{-sm|-md|-lg|-xl}
.
Verticaal knippen/afknotten
Responsieve tabellen maken gebruik van overflow-y: hidden
, dat alle inhoud afsnijdt die verder gaat dan de onder- of bovenrand van de tabel. Dit kan met name vervolgkeuzemenu's en andere widgets van derden afsnijden.
Gebruik over elk breekpunt .table-responsive
voor horizontaal scrollende tabellen.
# | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek |
---|---|---|---|---|---|---|---|---|---|
1 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
2 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
3 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Gebruik .table-responsive{-sm|-md|-lg|-xl}
indien nodig om responsieve tabellen te maken tot aan een bepaald breekpunt. Vanaf dat breekpunt zal de tabel zich normaal gedragen en niet horizontaal scrollen.
Deze tabellen kunnen worden weergegeven als gebroken totdat hun responsieve stijlen van toepassing zijn op specifieke viewport-breedten.
# | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek |
---|---|---|---|---|---|---|---|---|
1 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
2 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
3 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek |
---|---|---|---|---|---|---|---|---|
1 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
2 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
3 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek |
---|---|---|---|---|---|---|---|---|
1 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
2 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
3 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek | rubriek |
---|---|---|---|---|---|---|---|---|
1 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
2 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
3 | Cel | Cel | Cel | Cel | Cel | Cel | Cel | Cel |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>