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 |
Rozłożony Tabela
Pierwsze imię | Nazwisko | Zwrotnica |
---|
Jill | Kowal | 50 |
Przeddzień | Jackson | 94 |
Adam | Johnson | 67 |
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 |
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 |
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 "