Wygląd tabel w szablonach udostępnianych w ramach projektu Kuźnia Dostępnych Stron został zdefiniowany w arkuszach stylów odziedziczonych z ram projektowych Bootstrap. Dowiedz się, jak znakować tabele w swoich artykułach, aby się ładnie prezentowały.
Znakowanie tabeli
Znacznik | Opis |
---|---|
<table> | Obejmuje element wyświetlający dane tabelaryczne. |
<thead> |
Kontener obejmujący nagłówkowy wiersz tabeli (<tr> ) z etykietami kolumn tabeli |
<tbody> |
Kontener obejmujący wiersze tabeli (<tr> ) w głównej części tabeli |
<tr> |
Kontener obejmujący komórki tabeli (<td> or <th> ) widoczne w pojedynczym rzędzie (wierszu) |
<td> | Domyślna komórka tabeli |
<th> | Specjalny rodzaj komórek z etykietami kolumn (lub wierszy, zależnie od zakresu i umieszczenia) Musi być umieszczony wewnątrz <thead> |
<caption> | Opis lub streszczenie tabeli, przydatne szczególnie dla czytników ekranu |
<table> <thead> <tr> <th>…</th> <th>…</th> </tr> </thead> <tbody> <tr> <td>…</td> <td>…</td> </tr> </tbody> </table>
Opcje tabeli
Nazwa | Klasa | Opis |
---|---|---|
Domyślnie | Brak | Bez stylów, tylko kolumny i wiersze |
Podstawowa |
.table | Tylko linie poziome między wierszami |
Obramowanie |
.table-bordered | Zaokrąglone narożniki i obramowanie zewnętrzne |
Zebra - paski |
.table-striped | Lekko szary kolor tła w wierszach nieparzystych (1, 3, 5, etc) |
Skondensowana |
.table-condensed | Zmniejsza dopełnienia pionowe o połowę, z 8px do 4px, wewnątrz wszystkich elementów td oraz th |
Przykłady tabel
1. Domyślny styl tabel
Tabele są stylizowane automatycznie tylko kilkoma krawędziami, aby zapewnić przejrzystość i czytelną strukturę.
With 2.0, the .table
class is required.
<table class="table"> … </table>
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan | Sosna |
2. Tabela pasiasta (zebra)
Popraw nieco wygląd w swojej tabeli, dodając lekko szare tło w wierszach nieparzystych (zebra) —wystarczy dodać klasę .table-striped
.
Uwaga: Tabele pasiaste używają selektora CSS :nth-child
, który jest niedostępny w przeglądarkach IE7-IE8.
<table class="table table-striped"> … </table>
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan | Sosna |
3. Tabela z obramowaniem
Dodaj obramowanie wokół tabeli i zaokrąglone narożniki
<table class="table table-bordered"> … </table>
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jakub | Kowalski | @fat |
3 | Jan Sosna |
4. Tabela skondensowana
Uczyń swą tabelę bardziej skondesowaną, dodając klasę.table-condensed
, aby zmniejszyć o połowę dopełnienia wszystkich komórek.
<table class="table table-condensed"> … </table>
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan Sosna |
5. Połączenie wszystkich stylów!
Masz pełną swobodę w dowolnym łączeniu klas stylizujacych tabelę, by osiągnąć różny wygląd przez wykorzystanie dostępnych klas.
<table class="table table-striped table-bordered table-condensed"> ... </table>
Pełna nazwa | |||
---|---|---|---|
# | Imię | Nazwisko | Użytkownik |
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan Sosna |