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">