Ultimele tutoriale de dezvoltare web
 

W3.CSS Mese

❮ Anterior Urmatorul capitol ❯

Afișarea unui Tabel

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67
Bo Nilsson 50
Mike Ross 35

Tabelul de bază

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<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>
Încearcă - l singur »

Tabelul Învecinați

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-border">
Încearcă - l singur »

Tabelul Striped

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-striped">
Încearcă - l singur »

Bordered Striped Tabelul

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped">
Încearcă - l singur »

Border în jurul unei mese Striped

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped w3-border">
Încearcă - l singur »

Răsturnarea Stripes

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Pentru a răsturna dungi, trebuie doar să adăugați <thead> în jurul antetul tabelului:

Exemplu

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Încearcă - l singur »

Tabel cu un Titlu colorată

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Încearcă - l singur »

Tabelul Culori

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-blue">
Încearcă - l singur »

Tabelul Hoverable

Clasa-W3 hoverable adaugă o culoare de fundal gri cu mouse-ul:

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Încearcă - l singur »

Dacă doriți o culoare planare specifică, adăugați oricare dintre W3-hover-clase la fiecare <tr> Element:

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<tr class="w3-hover-green">
Încearcă - l singur »

Tabelul ca un card

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped w3-card-4">
Încearcă - l singur »

Tabelul Sensibilă

Un tabel receptiv va afișa o bară de defilare orizontală în cazul în care ecranul este prea mic pentru a afișa întregul conținut.

Încercați să redimensiona ecranul pentru a vedea efectul.

Nume Numele de familie puncte puncte puncte puncte puncte puncte puncte puncte puncte puncte puncte puncte puncte
Jill fierar 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
ajun Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Exemplu

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Încearcă - l singur »

Tabelul Tiny

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped w3-tiny">
Încearcă - l singur »

Tabelul mici

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped w3-small">
Încearcă - l singur »

Tabel mare

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped w3-large">
Încearcă - l singur »

XLARGE Tabelul

Nume Numele de familie puncte
Jill fierar 50
ajun Jackson 94
Adam Johnson 67

Exemplu

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Încearcă - l singur »

XXLarge Tabelul

Nume puncte
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Exemplu

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Încearcă - l singur »

XXXLarge Tabelul

Nume puncte
fierar 50
Jackson 94
Johnson 67
Nilson 35

Exemplu

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Încearcă - l singur »

Tabelul Jumbo

Nume puncte
fierar 50
Jackson 94
Johnson 67
Nilson 35

Exemplu

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Încearcă - l singur »

❮ Anterior Urmatorul capitol ❯