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 |
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
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan | Sosna |
2. Tabela pasiasta (zebra)
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan | Sosna |
3. Tabela z obramowaniem
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jakub | Kowalski | @fat |
3 | Jan Sosna |
4. Tabela skondensowana
# | Imię | Nazwisko | Użytkownik |
---|---|---|---|
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan Sosna |
5. Połączenie wszystkich stylów!
Pełna nazwa | |||
---|---|---|---|
# | Imię | Nazwisko | Użytkownik |
1 | Marek | Otto | @mdo |
2 | Jakub | Kowalski | @fat |
3 | Jan Sosna |