W3.CSS- tabellen
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mike | Ross | 35 |
W3.CSS-tabelklassen
W3.CSS biedt de volgende klassen voor tabellen:
| Klas | definieert |
|---|---|
| w3-tafel | Container voor een HTML-tabel |
| w3-gestreept | Gestreepte tafel |
| w3-rand | Begrensde tafel |
| w3-omrand | omzoomde lijnen |
| w3-gecentreerd | Inhoud van gecentreerde tabel |
| w3-zwevend | Zweefbare tafel |
| w3-table-all | Alle eigenschappen ingesteld |
Basistafel
De klasse w3-table wordt gebruikt om een basistabel weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Gestreepte tafel
De klasse w3-striped wordt gebruikt om zebrastrepen aan een tabel toe te voegen:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-striped">
Begrensde tafel
De klasse w3- border voegt een onderrand toe aan elke tabelrij:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-bordered">
Tafel met gestreepte randen
Combineer de klasse w3-striped en de klasse w3-bordered om een tabel met gestreepte randen te maken:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-striped w3-bordered">
Rand rond een tafel
De klasse w3-border wordt gebruikt om een rand rond een tabel weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-striped w3-border">
Tip: De klasse w3-border is niet alleen voor tabellen. Het kan op elk HTML-element worden gebruikt!
Alles weergeven
De klasse w3-table-all combineert alle bovenstaande klassen:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all">
De strepen omdraaien
Om de strepen om te draaien (begin met de lichtgrijze kleur), voegt u een <thead> -element toe rond de tabelkoprij. U moet ook een kleur definiëren die moet worden gebruikt voor de tabelkopregel:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
Voorbeeld
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Alle inhoud centreren
De w3-gecentreerde klasse centreert de inhoud van de tabel:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-centered">
Eén kolom centreren
De klasse w3-center centreert de inhoud van een kolom:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Eén kolom rechts uitlijnen
De w3-right-align class right lijnt de inhoud van een kolom uit:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Zweefbare tafel
De klasse w3-hoverable voegt een grijze achtergrondkleur toe bij mouse-over:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all
w3-hoverable">
Zweefkleuren
Als je een specifieke hover-kleur wilt, voeg dan een van de w3-hover- color - klassen toe aan elk <tr>-element:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<tr class="w3-hover-green">
W3.CSS-klassen combineren
Veel W3.CSS-klassen kunnen op alle HTML-elementen worden gebruikt.
Bijvoorbeeld: randklassen, kleurklassen, lettertypeklassen, kaartklassen en meer.
Gekleurde tabelkoptekst
Gebruik een van de w3 -kleurklassen om een gekleurde rij weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Gekleurde Tafel
Gebruik een van de w3 -kleurklassen om een gekleurde tabel weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-blue">
Responsieve tabel
De klasse w3-responsive maakt een responsieve tabel. De tabel zal dan horizontaal scrollen op kleine schermen. Bij het kijken op grote schermen is er geen verschil.
Verklein het scherm om het effect op de onderstaande tabel te zien:
| Voornaam | Achternaam | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smit | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Vooravond | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Voorbeeld
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Tafel als kaart
Gebruik een w3-kaartklasse om een tafel als een kaart weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-card-4">
Kleine tafel
Gebruik de klasse w3-tiny om een kleine tabel weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-tiny">
Kleine tafel
Gebruik de klasse w3-small om een kleine tabel weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-small">
Grote tafel
Gebruik de klasse w3-large om een grote tafel weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-large">
XLGrote Tafel
Gebruik de klasse w3-xlarge om een xlarge-tabel weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-xlarge">
XXLgrote Tafel
Gebruik de klasse w3-xxlarge om een tabel xxlarge weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-xxlarge">
XXXGrote tafel
Gebruik de klasse w3-xxxlarge om een tabel xxxlarge weer te geven:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-xxxlarge">
Jumbo Tafel
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">