Artykuł z danymi tabelarycznymi

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
1	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