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