Pomoc:Tabele

Skrót: WP:T, WP:Tabela

Hasła Wikipedii mogą zawierać tabele prezentujące różnorodne dane. Do ich tworzenia można użyć znaczników języka (X)HTML (nie zalecane), jak np. <table>, <tr>, <td>, <th> czy <caption>. Jeśli umiesz tworzyć tabele w HTML, zajrzyj do sekcji Informacje dla osób znających znaczniki (X)HTML.

Zalecane jest używanie specjalnych znaczników składni wiki wprowadzonych przez Magnusa Manske. Znaczniki tej składni w większości wypadków 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

Tabele powinny być skromne, wyraźne i jednolite. Polecenie class="wikitable" ustawia zalecany styl tabeli. Zastosowanie klasy wikitable powoduje, że tabelka jest schludnie sformatowana – z subtelną ramką i standardowym wyróżnieniem pól poprzedzonych wykrzyknikiem (pola nagłówkowe), domyślnie wyrównana po lewej:

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

...co daje:

[edytuj] Wyrównywanie tekstu

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

Oto wyrównywanie parametrem:

{| 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|}

... co daje:

Oto użycie wyrównania raz i tylko raz w nagłówku, gdy chcemy sformatować całą tabelę (lub większość komórek) tak, aby wszystkie 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|}

...co daje:

Przykładowe ustawienie wyrównania tekstu raz na nagłówku dla całej tabeli, z wyjątkami w poszczególnych komórkach:

{| 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| style="text-align:left" | a to do lewej|}

...co daje:

[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: Szablon:L/opis.

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" style="text-align:right"|+ Tytuł tabeli. Pojawia się bez ramkinad 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|}

...co daje:

[edytuj] Kolory komórek

We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów [1]. W starszych niektóre barwy mogą zostać zastąpione zbliżoną lub wyświetlić się ziarniście (zob. dithering). W skrajnych wypadkach, szczególnie, gdy barwy tła i koloru tekstu mają zbliżoną jasność, może się zdarzyć, że kolor tła i tekstu będzie identyczny. Barw o zbliżonej jasności należy unikać również ze względu na osoby z zaburzeniami postrzegania barw.

W większości wypadków powinno się stosować wypracowane zestawienia kolorystyczne np. tabel z class="wikitable", co pomaga zachować spójny wygląd i ułatwia globalne zmiany. W wypadku konieczności wyróżnienia komórek w szczególny sposób, powinno się stosować barwy z tabelek w Pomoc:Kolory. Wprawdzie nie daje to zupełnej pewności do stabilnego wyglądu na różnych komputerach, ale istnieje wysokie prawdopodobieństwo, że nowe przeglądarki nie wyświetlą ich źle. Zawsze należy przy tym pamiętać, aby nie bić czytelników po oczach.

[edytuj] Kolorowanie komórek

Żeby uzyskać różne barwy tła komórek, wstawiamy przed każdą komórką style="background-color:LightSteelBlue"|, zamiast LightSteelBlue wpisując odpowiednią nazwę koloru (lista rozpoznawanych nazw podana jest w Pomoc:Kolory). Można również podać barwę jako kombinację trzech szesnastkowych liczb podających jasność poszczególnych składowych koloru (czerwony, zielony, niebieski) z obowiązkowym znakiem "#" przed liczbą np. style="background-color:#ff0000"|. Dodatkowo można stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – i tak zamiast #ff0033 można to zapisać skrótowo #f03.

Barwy samego tekstu reguluje atrybut color:, np. dodanie style="color: PaleGreen" spowoduje, że tekst będzie jasnozielony. Spacja po dwukropku jest opcjonalna, podobnie wielkość liter w nazwie barwy nie ma znaczenia. W przykładach wyróżnienie wielkimi literami zostało zastosowane jedynie dla zwiększenia czytelności.

Określenia barwy tła i tekstu można oczywiście zestawiać razem (przedzielając je średnikiem) np. style="background-color:Maroon; color:White".

[edytuj] Przykłady kolorowania

Zastosowanie poniższego kodu...

{| class="wikitable"|-| style="background-color:PowderBlue" | kolor szaroniebieski| style="background-color:Khaki" | kolor khaki| style="color:DarkKhaki" | ciemny kolor khaki (tekstu)| style="color:#00f" | niebieski podany szesnastkowo|}

...daje taki efekt:

Jeżeli chcemy ustalić kolor dla całego wiersza, to można zrobić to, wpisując określenie stylu po znakach rozpoczęcia nowego wiersza "|-". Na przykład:

{| class="wikitable"|- style="background-color:PaleGreen"| jeden kolor| we wszystkich| czterech komórkach| tego wiersza|- style="background-color:Maroon; color:White"| tu kolor wg wiersza| tu też domyślny wybrany| style="background-color:Chocolate" | a tu zmiana domyślnego koloru tła| a tu znowu jest domyślny|}

...co daje:

[edytuj] Tabele kolorów

 Osobna strona: Pomoc:Kolory.

[edytuj] Właściwości tekstu

Teksty w tabeli da się modyfikować tak samo jak zwykły tekst. Dodatkowo do całego wiersza da się zastosować:

{| class="wikitable"|- style="font-style:italic"| kursywa | we wszystkich| czterech komórkach| tego wiersza|- a style="font-weight:bold"| pogrubienie| we wszystkich| czterech komórkach| tego wiersza|- a style="color:Green"| zielony tekst| we wszystkich| czterech komórkach| tego wiersza|- a style="color:Green"| tu nadany kolor tego wiersza| tu też kolor tego wiersza| a style="font-weight:bold" | a tu pogrubienie jednej komórki| a tu znowu jest nadany|- style="font-size:125%"| powiększony (125%) tekst| we wszystkich| czterech komórkach| tego wiersza|- style="font-size:75%"| pomniejszony (75%) tekst| we wszystkich| czterech komórkach| tego wiersza|- a style="font-weight:bold; font-style:italic"| jednocześnie pogrubiony i kursywa| we wszystkich| czterech komórkach| tego wiersza|- a style="font-weight:bold; font-style:italic; color:Green"| jednocześnie pogrubiony; kursywa i zielony| we wszystkich| czterech komórkach| tego wiersza|}

[edytuj] Łączenie komórek

[edytuj] W kilku wierszach – parametr rowspan

{| class="wikitable"| Kolumna 1, wiersz 1| rowspan=2 | Kolumna 2, wiersz 1 (oraz 2)| Kolumna 3, wiersz 1|-| Kolumna 1, wiersz 2| Kolumna 3, wiersz 2|}

rowspan powoduje rozciągnięcie kolumny na kilka wierszy

[edytuj] W kilku kolumnach – parametr colspan

{| class="wikitable"| Kolumna 1, wiersz 1| colspan=2 | Kolumna 2 (i 3), wiersz 1|-| Kolumna 1, wiersz 2| Kolumna 2, wiersz 2| Kolumna 3, wiersz 2|}

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

[edytuj] Mieszane łączenie

{| class="wikitable" style="text-align:left"! kolumna 1 (nagłówek)! kolumna 2 (nagłówek)! kolumna 3 (nagłówek)! kolumna 4 (nagłówek)|-| kolumna 1, wiersz 1| colspan=2 | kolumna 2 i 3, wiersz 1| rowspan=2 | kolumna 4, wiersz 1 i 2|-| colspan="3" | kolumna 1, 2 i 3, wiersz 2|-| kolumna 1, wiersz 3| colspan="3" rowspan="2" | kolumna 2, 3 i 4, wiersz 3 i 4|-| kolumna 1, wiersz 4|}

[edytuj] Tabela zagnieżdżona

poniższy kod...

{| border=1| komórka 1 tabeli zewnętrznej|{| border=1 style="background:blue"| tabela|-| zagnieżdżona|}| komórka 3 tabeli zewnętrznej|}

...dodaje tabelę zagnieżdżoną w drugiej komórce tabeli zewnętrznej

[edytuj] Kilka tabel obok siebie

Często się pojawia to pytanie – jak ułożyć obok siebie, a nie pod sobą. Można użyć do tego nadrzędnej tabeli, ale to powoduje problemy dla użytkowników, którzy mają małą rozdzielczość ekranu. Znacznie lepiej jest otoczyć tabelki elementem <div> z opływaniem do lewej (float:left). Dzięki temu, zależnie od rozdzielczości monitora użytkownika, obok siebie widoczna będzie optymalna liczba tabelek.

Przykładowy kod:

<div style="float:left">{|class="wikitable"|tab1 A|tab1 B|tab1 C|tab1 D|-|A coś tam|B coś tam|C coś tam|D coś tam|}</div><div style="float:left">{|class="wikitable"|tab2 A|tab2 B|tab2 C|tab2 D|-|A coś tu i tam|B coś tu i tam|C coś tu i tam|D coś tu i tam|}</div><div style="float:left">{|class="wikitable"|tab3 A|tab3 B|tab3 C|tab3 D|-|A coś tu i tu|B coś tu i tu|C coś tu i tu|D coś tu i tu|}</div><div>{|class="wikitable"|tab4 A|tab4 B|tab4 C|tab4 D|-|A coś tam i tam|B coś tam i tam|C coś tam i tam|D coś tam i tam|}</div>

Efekt widoczny poniżej:

Pamiętaj!

Zwróć uwagę, że do ostatniej tabelki nie należy dodawać float: left, co powoduje wyświetlanie dalszego tekstu poniżej, a nie z prawej strony tabelek.

[edytuj] Kilka tabel z wyrównanymi kolumnami

Tabele z kolumnami o dynamicznej szerokości

Tabele z wyrównanymi kolumnami stałej szerokości

Kody

{||- bgcolor="#CCCCCC"! Numer !! Tytuł !! Autor !! Czas|-| 1. || "[[We Got the Party|We Got The Party]]" || Greg Wells, Kara DioGuardi || 3:37|} {||- bgcolor="#CCCCCC"! Numer !! Tytuł !!|-| 1. || "Life's What You Make It" <small>(live)</small>|} {||- bgcolor="#CCCCCC"! Numer !! Tytuł !! Autor !! Czas|-| 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10|}

{||- bgcolor="#CCCCCC"! width="30px"| Numer! width="180px"| Tytuł! width="250px"| Autor! width="35px"| Czas|-| 1. || "[[We Got the Party|We Got The Party]]" || Greg Wells, Kara DioGuardi || 3:37|} {||- bgcolor="#CCCCCC"! width="30px"| Numer! width="180px"| Tytuł|-| 1. || "Life's What You Make It" <small>(live)</small>|} {||- bgcolor="#CCCCCC"! width="30px"| Numer! width="180px"| Tytuł! width="250px"| Autor! width="35px"| Czas|-| 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10|}

[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"! style="width:100px" | Kolumna główna! style="width:80px" | Sortowanie alfabetyczne! style="width:80px" | Sortowanie wg liczb! style="width:80px" | Sortowanie z innymi znakami|-! Rok 2006| Muzyka| 245| 18|-! Rok 2005| Literatura| 127| -|-! Rok 2004| Technika| 52| 32|-! Rok 2006| Łucznictwo| 21,12| 987|-! Rok 2003| Ogrodnictwo| 21| ?|} Kod ten pozwoli uzyskać poniższą tabelę, w której, klikając w "znaczek klepsydry" 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 2006 Łucznictwo 21,12 987 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 T 245 Rok 2005 N 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 T 245 Rok 2005 N 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] Sortowanie tabel zawierających grafiki Szablon {{sortkey}} pozwala na poprzedzenie zawartości komórki kluczem sortowania i uczynienie go niewidzialnym. Jest to przydatne, kiedy kolumna zawiera np. grafiki, a nie nazwiska. Przykładowe zastosowanie: polskie lotniska. [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 (należy wpisać w każdej kolumnie - po "|", której treść ma być wyrównana 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 #FFFFFF;  ;" 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 komórek w pionie Scala n komórek 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 Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej kategorii. Należy przy tym zwrócić uwagę, że nadużywanie tych szablonów może znacznie spowolnić generowanie stron i niepotrzebnie obciążać serwery. Kod i zastosowanie Efekt {{tak}} oraz {{nie}} - wstawiające grafikę {{tabela-tak}} oraz {{tabela-nie}} lub {{tabela-tak|jakiś tekst}} oraz {{tabela-nie|jakiś przeczący tekst}} - dodające styl komórki {| class="wikitable" width="50%"|-| {{tak}} za| {{nie}} przeciw|-| {{tabela-tak}}| {{tabela-nie}}|-| {{tabela-tak|Raczej tak}}| {{tabela-nie|Prawdopodobnie nie}}|} T za N przeciw Tak Nie Raczej tak Prawdopodobnie nie {{L|200}} Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach Wartość &0000000000000200.000000200 [edytuj] Ukrywanie tekstu w tabeli {| class="wikitable collapsible collapsed"! Nagłówek|-|Ukryty tekst...|-|...dalszy ciąg.|} co daje w rezultacie: Nagłówek Ukryty tekst... ...dalszy ciąg. [edytuj] Informacje dla osób znających znaczniki (X)HTML Odpowiedniki znaczników HTML i formatowania Wiki HTML Wiki bez parametrów <table> {| </table> |} <caption> |+ <tr> |- <th> ! <td> | z parametrami <table parametr="coś"> {| parametr="coś" <caption parametr="coś">zawartość... |+ parametr="coś" | zawartość... <tr parametr="coś"> |- parametr="coś" <th parametr="coś">zawartość... ! parametr="coś" | zawartość... <td parametr="coś">zawartość... | parametr="coś" | zawartość... Wszystkie podane powyżej elementy formatowania Wiki należy zawsze zaczynać w nowym wierszu w przeciwnym wypadku nie zostaną rozpoznane. Można jednak wstawiać wiele komórek w jednym wierszu, wówczas kolejne komórki są oddzielane podwójną kreską pionową (lub wykrzyknikami w wypadku nagłówka). Wiele komórek w jednym wierszu HTML Wiki <td>1</td><td>2</td><td>3</td> | 1 || 2 || 3 <th>1</th><th>2</th><th>3</th> ! 1 !! 2 !! 3 <td>1</td><td style="color:green">2</td><td>3</td> | 1 ||style="color:green"|2 || 3 <th>1</th><th style="color:green">2</th><th>3</th> ! 1 !!style="color:green"|2 !! 3 Spacje przed i po znakami formatowania Wiki nie mają znaczenia, jednak (podobnie jak wcześnie) przed pierwszym elementem (tutaj "|" lub "!") muszą znajdować się znaki nowego wiersza. Innymi słowy muszą być pierwszym znakiem w wierszu. [edytuj] Jak przerobić istniejącą tabelę na format wiki [edytuj] Jeśli tabela jest w formacie (X)HTML Pomocne będą następujące narzędzia: HTML to Wiki Converter - tables, dostępny też mirror (narzędzia online) HTML::WikiConverter (rozszerzenie Media Wiki) [edytuj] Jeśli tabela jest w formacie arkusza kalkulacyjnego Można zapisać tabelę jako (X)HTML i skorzystać z konwerterów (powyżej) Można skorzystać z Open Office w wersji 2.4 i wyższej i wybrać Plik → Eksport, a następnie z listy formatów: MediaWiki. Uwaga! W wersji 3.2 możliwość eksportu została przeniesiona do rozszerzenia Sun Wiki Publisher. Dla bardzo prostych tabel, można skorzystać z narzędzi: Copy & Paste Excel-to-Wiki Converter lub Tab2Wiki - wklejamy komórki i naciskamy przycisk. Uwaga: po skorzystaniu z takich narzędzi i wklejeniu tabeli do artykułu, warto zawsze użyć przycisku "Pokaż podgląd". [edytuj] Zobacz też Pomoc:Kolory Opis tworzenia tabel w anglojęzycznym Wikibooks Uwagi na temat korzystania ze znaczników HTML Szablony do zastosowania w tabelach Przypisy