Pomoc:Tabele

Hasła Wikipedii mogą zawierać tabele prezentujące różnorodne dane. Do ich tworzenia można użyć znaczników języka HTML, jak np. <table>, <tr>, <td>, <th> i <caption>, ale zamiast tego zalecane jest używanie specjalnych znaczników składni wiki wprowadzonych przez Magnusa Manske. Znaczniki tej składni, za jednym wyjątkiem, muszą zaczynać się od początku nowej linii.

[edytuj] Tabela w przykładach

[edytuj] Wersja podstawowa

{|
| kolumna 1, wiersz 1
| kolumna 2, wiersz 1
|-
| kolumna 1, wiersz 2
| kolumna 2, wiersz 2
|}
 

Powyższy kod utworzy prostą tabelę bez zarysowanych krawędzi:

[edytuj] Zalecany kod tabeli

{| class="wikitable"
! kolumna 1, wiersz 1
! kolumna 2, wiersz 1
|-
| kolumna 1, wiersz 2
| kolumna 2, wiersz 2
|}

Dodanie tej klasy (wikitable) powoduje, że tabelka jest schludnie sformatowana – z ramką i wyróżnieniem pól poprzedzonych wykrzyknikiem (pola nagłówkowe). Czyli coś takiego:

[edytuj] Wyrównywanie tekstu

[edytuj] Użycie parametru align

Parametr ten jest obecnie uważany przez ekspertów za przestarzały, jednak jest krótszy w zapisie niż nowsza wersja.

{| class="wikitable"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 2
! Nagłówek kolumny nr 3
! Nagłówek kolumny nr 4
|-
| align="right" | do prawej
| align="center" | wyśrodkowane
| align="left" | do lewej
| też do lewej
|}

Jak widać, domyślnie (bez podania parametrów) zwykłe komórki są wyrównywane do lewej.

[edytuj] Użycie parametru style do wyrównania

Parametr style jest zalecany przez ekspertów, jednak w tym wypadku jego stosowanie wymaga nieco większego wysiłku.

{| class="wikitable"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 2
! Nagłówek kolumny nr 3
|-
| style="text-align:right" | do prawej
| style="text-align:center" | wyśrodkowane
| style="text-align:left" | do lewej
|}

Użycie tego parametru nabiera znaczenia, gdy chcemy sformatować całą tabelę (lub większość komórek) tak, aby były np. wyrównane do prawej:

{| class="wikitable" style="text-align:right"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 2
! Nagłówek kolumny nr 3
|-
| to do prawej
| i to do prawej
| i to
|}

Wówczas do wyrównania tekstu w poszczególnych komórkach możemy użyć np. atrybutu align.

{| class="wikitable" style="text-align:right"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 2
! Nagłówek kolumny nr 3
|-
| to do prawej
| i to do prawej
| align="left" | a to do lewej
|}

[edytuj] Użycie szablonu dla liczb

W przypadku, gdy tekst w komórce przedstawia liczbę, do jego wyrównywania pomocny może być szablon {{L}}. Opis jego stosowania jest zamieszczony tutaj. Nie należy jednak nadużywać tego szablonu, ponieważ powoduje on zarówno wolniejsze przetwarzanie strony, jak i to, że kod strony znacznie się wydłuża!

[edytuj] Tabela z tytułem

Jeżeli chcemy, aby pojawił się tytuł tabeli nad nią, używamy kodu |+

{| class="wikitable" align=right
|+ '''Tytuł tabeli. Pojawia się bez ramki
nad tabelą i jest wycentrowany'''
! Pierwsza kolumna
! Druga kolumna
|-
| Komórka 1, wiersz 1
| Komórka 2, wiersz 1
|-
| Komórka 1, wiersz 2
| Komórka 2, wiersz 2
|-
| Komórka 1, wiersz 3
| Komórka 2, wiersz 3
|-
| Komórka 1, wiersz 4
| Komórka 2, wiersz 4
|}

Wynikowa tabela jest widoczna po prawej.

[edytuj] Kolory komórek

Żeby uzyskać różne kolory komórek, wstawiamy przed każdą komórką polecenie bgcolor="xxxxxx" |, zamiast xxxxxx wpisując odpowiedni parametr koloru – lista parametrów znajduje się np. na stronie artykułu barwa. Poniżej znajduje się kilka przykładów zastosowania różnych kolorów. Zastosowanie poniższego kodu

{| class="wikitable"
! coś
! coś
! coś
|-
| bgcolor="FFF2B2" | kolor taki
| bgcolor="DBF5FF" | kolor inny
| bgcolor="FAD2B2" | kolor inny
|}

daje taki efekt:

Jeżeli chcemy uzyskać dla całego wiersza jeden kolor, można to zrobić łatwiej:

{| class="wikitable"
! coś
! coś
! coś
|- bgcolor="FFF2B2"
| jeden kolor
| we wszystkich
| komórkach wiersza
|- bgcolor="DBF5FF"
| a w tym wierszu
| inny
| kolor
|}

[edytuj] Zestawienie kolorów

kod dla koloru czarnego #ffffff

[edytuj] Łączenie komórek

[edytuj] W kilku wierszach – parametr rowspan

{| class="wikitable"
| Komórka 1, wiersz 1
| rowspan=2 | Komórka 2, wiersz 1 (oraz 2)
| Komórka 3, wiersz 1
|- bgcolor="FFF2B2"
| Komórka 1, wiersz 2
| Komórka 3, wiersz 2
|}

rowspan powoduje rozciągnięcie komórki na kilka wierszy

[edytuj] W kilku kolumnach – parametr colspan

{| class="wikitable"
| Komórka 1, wiersz 1
| colspan=2 | Komórka 2 (i 3), wiersz 1
|- bgcolor="FFF2B2"
| Komórka 1, wiersz 2
| Komórka 2, wiersz 2
| Komórka 3, wiersz 2
|}

colspan powoduje rozciągnięcie komórki na kilka kolumn.

A teraz przykład z użyciem wszystkich parametrów

{| class="wikitable" align="right"
|+ Tabela kolorowa i bardziej złożona
! Komórka 1, wiersz 1
! Komórka 2, wiersz 1
! Komórka 3, wiersz 1
! Komórka 4, wiersz 1
|-
| bgcolor="ABF2B2" | Komórka 1, wiersz 2
| bgcolor="ABF2B2" colspan=2 | Komórka 2 (i 3), wiersz 2
| bgcolor="ABF2FF" rowspan=3 | Komórka 4, wiersz 2 i 3
|- bgcolor="FFF2B2"
| colspan=3 | Komórka 1, 2 i 3, wiersz 3
|}

[edytuj] Tabela zagnieżdżona

{| border="1"
| coś coś
|
{| border="2" style="background-color:#543210;"
| tabela
|-
| zagnieżdżona
|}
| ciąg dalszy pierwszej tabeli
|}

dodaje tabelę zagnieżdżoną

Uwaga: Jeśli główna tabela ma podany parametr class="wikitable", wówczas kolorowanie tła tabeli zagnieżdżonej nie funkcjonuje poprawnie.

[edytuj] Sortowanie danych w tabelach

Istnieje specjalna opcja, która pozwala na sortowanie danych w kolumnach tabeli. Aby ją uzyskać, należy zastąpić class="wikitable" opcją class="wikitable sortable" tak jak w poniższym kodzie.

{| class="wikitable sortable" style="text-align:right;" align="right" ! width="100px" | Kolumna główna ! width="80px" | Sortowanie alfabetyczne ! width="80px" | Sortowanie wg liczb ! width="80px" | Sortowanie z innymi znakami |- ! Rok 2006 | Muzyka | 245 | 18 |- ! Rok 2005 | Literatura | 127 | - |- ! Rok 2004 | Technika | 52 | 32 |- ! Rok 2003 | Ogrodnictwo | 21 | ? |} Kod ten pozwoli uzyskać poniższą tabelę, w której, klikając w "znaczek" w nagłówku, czytelnik uzyskuje sortowanie zmiennych umieszczonych w kolumnach. Kolumna główna Sortowanie alfabetyczne Sortowanie liczb Sortowanie z innymi znakami Rok 2006 Muzyka 245 18 Rok 2005 technika 127 - Rok 2004 Technika 52 32 Rok 2003 Ogrodnictwo 21  ? Istnieje możliwość wskazania, aby niektóre kolumny nie mogły być użyte do sortowania tabeli: Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb Rok 2006 245 Rok 2005 127 Rok 2003 nie sortujemy 21 Efekt uzyskuje się, dodając class="unsortable" w opisie kolumny w pierwszym wierszu (nagłówku) tabeli: {| class="wikitable sortable" style="text-align:right;" ! width="100px" | Kolumna główna ! width="80px" class="unsortable" | Nie sortujemy ! width="80px" | Sortowanie liczb ... Można również wskazać, aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli: Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb Rok 2006 245 Rok 2005 127 Rok 2003 nie sortujemy 21 Podsumowanie Sortowanie tabel nie jest trudne 45 Tu wystarczy podać atrybut wiersza class="sortbottom": |- ! Rok 2003 | nie sortujemy | 21 |- class="sortbottom" ! Podsumowanie | Sortowanie tabel nie jest trudne | 45 |} [edytuj] Sortowanie dat w tabelach Zobacz też: Szablon:Dts. Zasadniczo, daty w tabelach są prawidłowo sortowane wyłącznie, gdy podane są w cyfrowym formacie rok-miesiąc-dzień, który nie jest powszechnie używany. W tym celu utworzono szablon {{dts}}, który pozwala prawidłowo sortować daty w tabelach. Przykładowo następujący wiki-kod {| class="wikitable sortable" style="text-align:right;" !Kolumna główna !Sortowanie dat !Sortowanie liczb |- ! Pozycja 1 | {{dts|01|01|1999}} | 245 |- ! Pozycja 2 | {{dts|03|07|1995}} | 127 |- ! Pozycja 3 | {{dts|07|03|1997}} | 21 |} produkuje następującą tabelę, w której daty są prawidłowo wyświetlone i mogą być sortowane: Kolumna główna Sortowanie dat Sortowanie liczb Pozycja 1 1999-01-011 stycznia 1999 245 Pozycja 2 1995-07-033 lipca 1995 127 Pozycja 3 1997-03-077 marca 1997 21 [edytuj] Sortowanie nazwisk w tabelach Zobacz też: Szablon:Sortname. Problemy może sprawiać również sortowanie biogramów w tabelach według nazwisk, ponieważ hasła w wikipedii są nazywane w formacie imię-nazwisko. W celu prawidłowego sortowania nazwisk utworzono szablon {{sortname}}, który rozwiązuje ten problem. Przykładowo kod {| class="wikitable sortable" !Imię i nazwisko !Dziedzina !Rok |- |{{sortname|Greg|Walden}} |polityk |1991 |- |{{sortname|Wes|Cooley}} |działacz |1996 |- |{{sortname|Smith|Dennis|Denny Smith}} |aktywista |1994 |- |{{sortname|Pete|Sampras}} |sportowiec |1993 |} daje tabelę, w której nazwiska mogą być sortowane według nazwisk: Imię i nazwisko Dziedzina Rok Walden, GregGreg Walden polityk 1991 Cooley, WesWes Cooley działacz 1996 Dennis, SmithSmith Dennis aktywista 1994 Sampras, PetePete Sampras sportowiec 1993 [edytuj] Zestawienie i objaśnienia kodów tabeli Kod Zastosowanie {| |+ ! | || |- |} Rozpoczyna tabelę (po tych znakach wpisujemy style, klasy itp. dla całej tabelki) Dodaje tytuł nad tabelą Nowa kolumna nagłówka (pionowe) Nowa kolumna (pionowe) równoważne "<br />" (nowy wiersz) + "|" (nowa kolumna) Nowy wiersz (poziome) Kończy tabelę align="right" valign="top" border="1" cellspacing="0" cellpadding="3" Wyrównanie tabelki (right/left – do prawej/do lewej) Wyrównanie zawartości tabelki do góry Grubość krawędzi tabelki Odstępy między komórkami tabelki Odstępy między tekstem a krawędziami komórki class="wikitable" Określenie klasy tabelki (zalecana właśnie wikitable). Dodatkowe klasy do tej samej tabelki można ewentualnie podać po spacji (np. class="wikitable error" da w wyniku tabelkę z dużymi czerwonymi napisami) class="sortable" Włączenie sortowania tabeli po wybranych kolumnach – do użycia po {| class="unsortable" Wyłączenie kolumny z sortowania – do użycia w kolumnie, w pierwszym wierszu class="sortbottom" Wyłączenie wiersza z sortowania – do użycia w opisie wiersza, zaraz po |- style=" width: 30%; text-align:left; text-align:center; text-align:right; border: 1px solid #000000;  ;" Otwieranie określeń stylów Tabelka zajmie 30% szerokości artykułu Wyrównanie tekstu do lewej ... do środka ... do prawej Grubość, styl i kolor obramowania komórki Po każdej wartości stawiamy średnik (;), a na końcu wszystko zamykamy cudzysłowem ("). | wartość | | rowspan=n | | colspan=n | | bgcolor="FFF2B2" | W ten sposób możemy wstawić, styl, tło, klasę, dla pojedynczego wersu, np. Scala n kratek w pionie Scala n kratek w poziomie Zabarwia tło komórki na kolor ciemnożółty {{clear}} Powoduje, że tabelka jest wyrównywana względem tekstu, np. względem kolejnej sekcji artykułu [edytuj] Szablony do użycia w tabelach Kod i zastosowanie Efekt {{tak}} oraz {{nie}} Do prostych zestawień np. {| class="wikitable" width="50%" |- | {{tak}} | {{nie}} |} {{L|200}} Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach Wartość &&&&&&&&&&&&0200.&&&&&0200 Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej kategorii. [edytuj] Tabela w pigułce Pierwsza utworzona tabela jest dokładnie opisana, druga zawiera te same dane, lecz ma zmienione parametry. Warto porównać te parametry i zwrócić uwagę na skutki ich użycia w utworzonych tabelach. [edytuj] Zobacz też Uwagi na temat korzystania ze znaczników HTML