W3.CSS Tabelle
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Bo | Nilsson | 50 |
Mike | Ross | 35 |
W3.CSS Tafelklasse
W3.CSS verskaf die volgende klasse vir tabelle:
Klas | Definieer |
---|---|
w3-tafel | Houer vir 'n HTML-tabel |
w3-streep | Gestreepte tafel |
w3-grens | Borderige tafel |
w3-begrens | Begrensde lyne |
w3-gesentreerd | Gesentreerde tabelinhoud |
w3-sweefbaar | Swaaibare tafel |
w3-tabel-alles | Alle eiendomme gestel |
Basiese tabel
Die w3-table klas word gebruik om 'n basiese tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | 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
Die w3-gestreepte klas word gebruik om sebrastrepe by 'n tabel te voeg:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-striped">
Bordered Tafel
Die w3-begrensde klas voeg 'n onderste rand by elke tabelry:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-bordered">
Gestreepte Bordered Tafel
Kombineer die w3-gestreepte klas en die w3-begrensde klas om 'n gestreepte begrensde tabel te skep:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-striped w3-bordered">
Grens om 'n tafel
Die w3-grens klas word gebruik om 'n rand om 'n tafel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-striped w3-border">
Wenk: Die w3-grensklas is nie net vir tafels nie. Dit kan op enige HTML-element gebruik word!
Wys dit alles
Die w3-table-all- klas kombineer al die klasse hierbo:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all">
Flip the Stripes
Om die strepe om te draai (begin met die liggrys kleur), voeg 'n <thead>-element om die tabelopskrif-ry. Jy moet ook 'n kleur definieer om vir die tabelopskrifry te gebruik:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | 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>
Sentreer alle inhoud
Die w3-gesentreerde klas sentreer die inhoud van die tabel:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-centered">
Sentreer een kolom
Die w3-sentrum klas sentreer die inhoud van 'n kolom:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | 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>
Regs Belyn een kolom
Die w3-regs-belyn klas regs belyn die inhoud van 'n kolom:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | 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>
Swaaibare tafel
Die w3-sweefbare klas voeg 'n grys agtergrondkleur by met muis-oor:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all
w3-hoverable">
Beweeg kleure
As jy 'n spesifieke sweefkleur wil hê, voeg enige van die w3-sweef-kleurklasse by elke <tr>-element:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<tr class="w3-hover-green">
Die kombinasie van W3.CSS-klasse
Baie W3.CSS-klasse kan op alle HTML-elemente gebruik word.
Byvoorbeeld: grensklasse, kleurklasse, lettertipeklasse, kaartklasse en meer.
Gekleurde tabelkop
Gebruik enige van die w3- kleurklasse om 'n gekleurde ry te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | 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 enige van die w3- kleurklasse om 'n gekleurde tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table w3-blue">
Responsiewe tabel
Die w3-responsiewe klas skep 'n responsiewe tabel. Die tabel sal dan horisontaal op klein skerms blaai. Wanneer jy op groot skerms kyk, is daar geen verskil nie.
Verander die grootte van die skerm om die effek op die tabel hieronder te sien:
Eerste naam | Van | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 5 000 | 5 000 | 5 000 | 5 000 | 5 000 | 5 000 | 5 000 | 5 000 | 5 000 | 5 000 | 5 000 |
Eva | 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 as 'n kaart
Gebruik 'n w3-kaart klas om 'n tabel as 'n kaart te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-card-4">
Klein tafeltjie
Gebruik die w3-klein klas om 'n klein tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-tiny">
Klein tafeltjie
Gebruik die w3-klein klas om 'n klein tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-small">
Groot Tafel
Gebruik die w3-large klas om 'n groot tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-large">
XLarge tafel
Gebruik die w3-xlarge- klas om 'n xlarge-tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-xlarge">
XXLarge tafel
Gebruik die w3-xxlarge- klas om 'n xxlarge-tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | Jackson | 94 |
Adam | Johnson | 67 |
Voorbeeld
<table class="w3-table-all w3-xxlarge">
XXX Groot tafel
Gebruik die w3-xxxlarge- klas om 'n xxxlarge-tabel te vertoon:
Eerste naam | Van | Punte |
---|---|---|
Jill | Smith | 50 |
Eva | 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">