W3.Tabele CSS
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mikrofon | Ross | 35 |
W3.Klasy tabeli CSS
W3.CSS udostępnia następujące klasy dla tabel:
| Klasa | Definiuje |
|---|---|
| w3-stół | Kontener na tabelę HTML |
| w3 w paski | Stół w paski |
| w3-granica | Stół z obramowaniem |
| w3-obramowane | Obramowane linie |
| skoncentrowany na w3 | Wyśrodkowana zawartość tabeli |
| w3-unoszący się | Unoszący się stół |
| w3-stół-wszystko | Zestaw wszystkich właściwości |
Tabela podstawowa
Klasa w3-table służy do wyświetlania podstawowej tabeli:
| 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>
Tabela w paski
Klasa w3-striped służy do dodawania pasków zebry do tabeli:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table w3-striped">
Stół z obramowaniem
Klasa w3-bordered dodaje dolne obramowanie do każdego wiersza tabeli:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table w3-bordered">
Tabela z obramowaniem w paski
Połącz klasę w3 z ramkami i klasę w3 z ramkami, aby utworzyć tabelę z ramkami w paski:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table w3-striped w3-bordered">
Obramowanie wokół stołu
Klasa w3-border służy do wyświetlania ramki wokół tabeli:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table w3-striped w3-border">
Wskazówka: klasa w3-border jest przeznaczona nie tylko dla tabel. Może być użyty na dowolnym elemencie HTML!
Wyświetlam to wszystko
Klasa w3-table-all łączy wszystkie powyższe klasy:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all">
Odwracanie pasków
Aby odwrócić paski (zacznij od jasnoszarego koloru), dodaj element <thead> wokół wiersza nagłówka tabeli. Musisz także zdefiniować kolor, który będzie używany w wierszu nagłówka tabeli:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
Przykład
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Centrowanie całej zawartości
Klasa skoncentrowana na w3 centruje zawartość tabeli:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-centered">
Centrowanie jednej kolumny
Klasa w3-center centruje zawartość kolumny:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Wyrównaj jedną kolumnę do prawej
Klasa w3-right-align right wyrównuje zawartość kolumny:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Unoszący się stół
Klasa w3-hoverable dodaje szary kolor tła po najechaniu myszą:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all
w3-hoverable">
Kolory kursora
Jeśli chcesz mieć określony kolor najechania kursorem, dodaj dowolną z klas w3-hovercolor do każdego elementu <tr>:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<tr class="w3-hover-green">
Łączenie klas W3.CSS
Wiele klas W3.CSS może być używanych na wszystkich elementach HTML.
Na przykład: klasy obramowania, klasy kolorów, klasy czcionek, klasy kart i inne.
Kolorowy nagłówek tabeli
Użyj dowolnej z klas kolorów w3 , aby wyświetlić kolorowy wiersz:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Kolorowy stół
Użyj dowolnej z klas kolorów w3 , aby wyświetlić kolorową tabelę:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table w3-blue">
Responsywna tabela
Klasa responsywna w3 tworzy responsywną tabelę. Tabela będzie następnie przewijać się w poziomie na małych ekranach. Podczas oglądania na dużych ekranach nie ma różnicy.
Zmień rozmiar ekranu, aby zobaczyć efekt w poniższej tabeli:
| Imię | Nazwisko | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Kowal | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| przeddzień | 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 |
Przykład
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Stół jako karta
Użyj klasy w3-card , aby wyświetlić tabelę jako kartę:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-card-4">
Mały stolik
Użyj klasy w3-tiny , aby wyświetlić małą tabelkę:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-tiny">
Mały stół
Użyj klasy w3-small , aby wyświetlić małą tabelkę:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-small">
Duży stół
Użyj klasy w3-large , aby wyświetlić dużą tabelę:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-large">
XL duży stół
Użyj klasy w3-xlarge , aby wyświetlić tabelę xlarge:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-xlarge">
XXDuży Stół
Użyj klasy w3-xxlarge , aby wyświetlić tabelę xxlarge:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-xxlarge">
XXXDuży Stół
Użyj klasy w3-xxxlarge , aby wyświetlić tabelę xxxlarge:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
Przykład
<table class="w3-table-all w3-xxxlarge">
Duży stół
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">