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 |
