Najnowsze tutoriale tworzenie stron internetowych
 

W3.CSS stoły

❮ Poprzedni Następny Rozdział ❯

Wyświetlanie tabela

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67
Bo Nilsson 50
Mikrofon Ross 35

Podstawowe Tabela

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<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>
Spróbuj sam "

graniczy Tabela

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-border">
Spróbuj sam "

Rozłożony Tabela

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-striped">
Spróbuj sam "

Z ramką paski Tabela

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped">
Spróbuj sam "

Obramowanie wokół Striped tabeli

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped w3-border">
Spróbuj sam "

Rzut paski

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Aby odwrócić paski, wystarczy dodać <thead> wokół nagłówku tabeli:

Przykład

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Spróbuj sam "

Tablica z kolorowym działu

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Spróbuj sam "

Tabela Kolory

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-blue">
Spróbuj sam "

Hoverable Tabela

Klasa w3-hoverable dodaje szary kolor tła na mouse-over:

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Spróbuj sam "

Jeśli chcesz określonego koloru aktywowania, dodać jeden z W3-hover klasach do każdego <tr> elementu:

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<tr class="w3-hover-green">
Spróbuj sam "

Tabela jak karta

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped w3-card-4">
Spróbuj sam "

Tabela responsive

Dostosowana do tabeli powoduje wyświetlenie poziomego paska przewijania, jeśli ekran jest zbyt mały, aby wyświetlić pełną zawartość.

Spróbuj zmienić rozmiar ekranu, aby zobaczyć efekt.

Pierwsze imię Nazwisko Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica
Jill Kowal 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Przeddzień 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

Przykład

<div class="w3-responsive">

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

</div>
Spróbuj sam "

Tiny Tabela

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped w3-tiny">
Spróbuj sam "

Mały stół

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped w3-small">
Spróbuj sam "

Duży stół

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped w3-large">
Spróbuj sam "

XLarge Tabela

Pierwsze imię Nazwisko Zwrotnica
Jill Kowal 50
Przeddzień Jackson 94
Adam Johnson 67

Przykład

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Spróbuj sam "

Tabela XXLarge

Nazwa Zwrotnica
Jill Smith 50
Ewa Jackson 94
Adam Johnson 67
Bo Nilson 35

Przykład

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Spróbuj sam "

XXXLarge Tabela

Nazwa Zwrotnica
Kowal 50
Jackson 94
Johnson 67
Nilson 35

Przykład

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Spróbuj sam "

Tabela Jumbo

Nazwa Zwrotnica
Kowal 50
Jackson 94
Johnson 67
Nilson 35

Przykład

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Spróbuj sam "

❮ Poprzedni Następny Rozdział ❯