Tekst źródłowy strony Almanach:Tabele

Poniższy tekst jest kopia znajdującego się na [[wikipedia:pl:Pomoc:Tabele|Wikipedia.org]]

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

== Tabela w przykładach ==
=== Wersja podstawowa ===
<source lang="text">
{|
| kolumna 1, wiersz 1
| kolumna 2, wiersz 1
|-
| kolumna 1, wiersz 2
| kolumna 2, wiersz 2
|}
</source>

Powyższy kod utworzy prostą tabelę bez zarysowanych krawędzi:
{|
| kolumna 1, wiersz 1
| kolumna 2, wiersz 1
|-
| kolumna 1, wiersz 2
| kolumna 2, wiersz 2
|}

=== Zalecany kod tabeli ===
Tabele powinny być skromne, wyraźne i jednolite. Polecenie '''class="wikitable"''' ustawia zalecany styl tabeli. Zastosowanie klasy <tt>wikitable</tt> 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:

<source lang="text">
{| class="wikitable"
! kolumna 1, wiersz 1
! kolumna 2, wiersz 1
|-
| kolumna 1, wiersz 2
| kolumna 2, wiersz 2
|}
</source>

...co daje:

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

=== 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:

<source lang="text">
{| 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
|}
</source>

... co daje:

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

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:

<source lang="text">
{| 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
|}
</source>

...co daje:

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

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

<source lang="text">
{| 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
|}
</source>

...co daje:

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

=== Użycie szablonu dla liczb ===
W przypadku, gdy tekst w komórce przedstawia liczbę, do jego wyrównywania pomocny może być szablon <nowiki>{{L}}</nowiki>. 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!

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

<source lang="text">
{| class="wikitable" style="text-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
|}
</source>

...co daje:

{| class="wikitable" style="text-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
|}

== Kolory komórek ==
We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów [http://www.ranking.pl/Newsletter/pl/2008-10-16/#_link24]. W starszych niektóre barwy mogą zostać zastąpione zbliżoną lub wyświetlić się ziarniście (zob. [[dithering (grafika komputerowa)|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 [[ślepota barw|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 <em>nie bić czytelników po oczach</em>.

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

Barwy samego tekstu reguluje atrybut <tt>color:</tt>, np. dodanie <tt><nowiki>style="color: PaleGreen"</nowiki></tt> 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. <tt><nowiki>style="background-color:Maroon; color:White"</nowiki></tt>.

=== Przykłady kolorowania ===
Zastosowanie poniższego kodu...
<source lang="text">
{| 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
|}
</source>

...daje taki efekt:

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

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:
<source lang="text">
{| 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
|}
</source>

...co daje:

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

===Tabele kolorów===
{{main|Pomoc:Kolory}}

== Łączenie komórek ==
=== W kilku wierszach – parametr rowspan ===
<source lang="text">
{| 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
|}
</source>

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

<code>rowspan</code> powoduje rozciągnięcie kolumny na kilka wierszy

{{clear}}

=== W kilku kolumnach – parametr colspan ===
<source lang="text">
{| 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
|}
</source>

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

<code>colspan</code> powoduje rozciągnięcie komórki na kilka kolumn.

=== Mieszane łączenie ===
<source lang="text">
{| 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
|}
</source>

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

=== Tabela zagnieżdżona ===
poniższy kod...
<source lang="text">
{| border=1
| komórka 1 tabeli zewnętrznej
|
{| border=1 style="background:blue"
| tabela
|-
| zagnieżdżona
|}
| komórka 3 tabeli zewnętrznej
|}
</source>

...dodaje tabelę zagnieżdżoną w drugiej komórce tabeli zewnętrznej
{| border=1
| komórka 1 tabeli zewnętrznej
|
{| border=1 style="background:blue"
| tabela
|-
| zagnieżdżona
|}
| komórka 3 tabeli zewnętrznej
|}

== 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 <tt><nowiki><div></nowiki></tt> z opływaniem do lewej (<tt>float:left</tt>). Dzięki temu, zależnie od rozdzielczości monitora użytkownika, obok siebie widoczna będzie optymalna liczba tabelek.

'''Przykładowy kod:'''
<div style="height:300px; overflow:scroll">
<source lang="xml">
<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 style="float:left">
{|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>
<br clear="left" />
</source>
</div><br />

'''Efekt widoczny poniżej:'''
<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 style="float:left">
{|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>
<br clear="left" />

; Pamiętaj!
: Zwróć uwagę, że po takich tabelkach należy dodać znacznik <tt><nowiki><br clear="left" /></nowiki></tt>, który powoduje wyświetlanie dalszego tekstu poniżej, a nie z prawej strony tabelek.

==Kilka tabel z wyrównanymi kolumnami==
Tabele z kolumnami o dynamicznej szerokości 
{|
|- 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
|}
 
Tabele z wyrównanymi kolumnami stałej szerokości 
{|
|- 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
|}


'''Kody'''
{| class="wikitable"
|-
| style="background-color:MintCream" | Kod tabel z kolumnami o dynamicznej szerokości
|-
|<source lang="xml">
{|
|- 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
|}
</source>
|-
| style="background-color:MintCream" |Kod tabel z wyrównanymi kolumnami stałej szerokości 
|-
|<source lang="xml">
{|
|- 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
|}
</source>
|}

== 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.

<table>
<tr><td><source lang="text">
{| 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
| ?
|}
</source>

Kod ten pozwoli uzyskać poniższą tabelę, w której, klikając w "znaczek [[klepsydra|klepsydry]]" w nagłówku, czytelnik uzyskuje sortowanie zmiennych umieszczonych w kolumnach.

{| class="wikitable sortable" style="text-align:right"
! style="width:100px" | Kolumna główna
! style="width:80px" | Sortowanie alfabetyczne
! style="width:80px" | Sortowanie liczb
! style="width:80px" | 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
| ?
|}

{{clear}}

Istnieje możliwość wskazania, aby niektóre kolumny nie mogły być użyte do sortowania tabeli:
{| class="wikitable sortable" style="text-align:right"
! style="width:100px" | Kolumna główna
! style="width:80px" class="unsortable" | Po tej kolumnie nie sortujemy
! style="width:80px" | Sortowanie liczb
|-
! Rok 2006
| {{tak}}
| 245
|-
! Rok 2005
| {{nie}}
| 127
|-
! Rok 2003
| nie sortujemy
| 21
|}

Efekt uzyskuje się, dodając '''class="unsortable"''' w opisie kolumny w pierwszym wierszu (nagłówku) tabeli:
<source lang="text">
{| class="wikitable sortable" style="text-align:right"
! width="100px" | Kolumna główna
! width="80px" class="unsortable" | Nie sortujemy
! width="80px" | Sortowanie liczb
...
</source>

Można również wskazać, aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli:
{| class="wikitable sortable" style="text-align:right"
! width="100px" | Kolumna główna
! width="80px" class="unsortable" | Po tej kolumnie nie sortujemy
! width="80px" | Sortowanie liczb
|-
! Rok 2006
| {{tak}}
| 245
|-
! Rok 2005
| {{nie}}
| 127
|-
! Rok 2003
| nie sortujemy
| 21
|- class="sortbottom"
! Podsumowanie
| Sortowanie tabel nie jest trudne
| 45
|}

Tu wystarczy podać atrybut wiersza '''class="sortbottom"''':

<source lang="text">
|-
! Rok 2003
| nie sortujemy
| 21
|- class="sortbottom"
! Podsumowanie
| Sortowanie tabel nie jest trudne
| 45
|}
</source>

=== Sortowanie dat w tabelach ===
{{seealso|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 {{s|dts}}, który pozwala prawidłowo sortować daty w tabelach. Przykładowo następujący wiki-kod...

<source lang="text">
{| 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
|}
</source>

...produkuje następującą tabelę, w której daty są prawidłowo wyświetlone i mogą być sortowane:

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

=== Sortowanie nazwisk w tabelach ===
{{seealso|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 {{s|sortname}}, który rozwiązuje ten problem. Przykładowo kod...

<source lang="text">
{| 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
|}
</source>

...daje tabelę, w której nazwiska mogą być sortowane według nazwisk:

{| 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|nolink=tak}}
|sportowiec
|1993
|}

=== Sortowanie tabel zawierających grafiki ===
Szablon {{s|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]].

== Zestawienie i objaśnienia kodów tabeli ==
{|class="wikitable"
! Kod
! Zastosowanie
|-
|
* <nowiki> {| </nowiki>
* <nowiki> |+ </nowiki>
* <nowiki> ! </nowiki>
* <nowiki> | </nowiki>
* <nowiki> || </nowiki>
* <nowiki> |- </nowiki>
* <nowiki> |} </nowiki>
|
* 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 <nowiki>"<br />" (nowy wiersz) + "|"</nowiki> (nowa kolumna)
* Nowy wiersz (poziome)
* Kończy tabelę
|-
|
* <nowiki> align="right" </nowiki>
* <nowiki>valign="top"</nowiki>
* <nowiki> border="1" </nowiki>
* <nowiki> cellspacing="0" </nowiki>
* <nowiki> cellpadding="3" </nowiki>
|
* 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'').<br />Dodatkowe klasy do tej samej tabelki można ewentualnie podać po spacji<br />(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 <nowiki>{|</nowiki>
|-
|
* 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 <nowiki>|-</nowiki>
|-
|
* 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 ('''"''').
|-
|
* &#124; ''wartość'' &#124;
** &#124; rowspan=''n'' &#124;
** &#124; colspan=''n'' &#124;
** &#124; bgcolor="FFF2B2" &#124;
|
* 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
|-
|
* {{s|clear}}
| Powoduje, że tabelka jest wyrównywana względem tekstu,<br />np. względem kolejnej sekcji artykułu
|}

== Szablony do użycia w tabelach ==
Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej [[:Kategoria:Szablony do zastosowania w tabelach|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.

{| class="wikitable topalign"
! style="width: 30%" | Kod i zastosowanie
! Efekt
|-
| {{s|tak}} oraz {{s|nie}} - wstawiające grafikę<br />
{{s|yes}} oraz {{s|no}} lub {{s|yes|jakiś tekst}} oraz {{s|no|jakiś przeczący tekst}} - dodające styl komórki
<source lang="text">{| class="wikitable" width="50%"
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{yes}}
| {{no}}
|-
| {{yes|Raczej tak}}
| {{no|Prawdopodobnie nie}}
|}</source>
|
{| class="wikitable" width="50%"
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{yes}}
| {{no}}
|-
| {{yes|Raczej tak}}
| {{no|Prawdopodobnie nie}}
|}
|-
| {{S|L|200}}

Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach
|
{| class="wikitable" width="50%"
|-
| Wartość
| {{L|200}}
|}
|}

== Ukrywanie tekstu w tabeli ==

<pre>{| class="wikitable collapsible collapsed"
! Nagłowek
|-
|Ukryty tekst...
|-
|...dalszy ciąg.
|}
</pre>
co daje w rezultacie:
{| class="wikitable collapsible collapsed"
! Nagłówek
|-
|Ukryty tekst...
|-
|...dalszy ciąg.
|}


== Informacje dla osób znających znaczniki (X)HTML ==
{| class="wikitable"
|+ style="font-weight:bold" | Odpowiedniki znaczników HTML i formatowania Wiki
! HTML !! Wiki
|-
! colspan="2" | bez parametrów
|-
| <nowiki><table></nowiki> || <nowiki>{|</nowiki>
|-
| <nowiki></table></nowiki> || <nowiki>|}</nowiki>
|-
| <nowiki><caption></nowiki> || <nowiki>|+</nowiki>
|-
| <nowiki><tr></nowiki> || <nowiki>|-</nowiki>
|-
| <nowiki><th></nowiki> || <nowiki>!</nowiki>
|-
| <nowiki><td></nowiki> || <nowiki>|</nowiki>
|-
! colspan="2" | z parametrami
|-
| <nowiki><table parametr="coś"></nowiki> || <nowiki>{| parametr="coś"</nowiki>
|-
| <nowiki><caption parametr="coś">zawartość...</nowiki> || <nowiki>|+ parametr="coś" | zawartość...</nowiki>
|-
| <nowiki><tr parametr="coś"></nowiki> || <nowiki>|- parametr="coś"</nowiki>
|-
| <nowiki><th parametr="coś">zawartość...</nowiki> || <nowiki>! parametr="coś" | zawartość...</nowiki>
|-
| <nowiki><td parametr="coś">zawartość...</nowiki> || <nowiki>| parametr="coś" | zawartość...</nowiki>
|}
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).
{| class="wikitable"
|+ style="font-weight:bold" | Wiele komórek w jednym wierszu
! HTML !! Wiki
|-
| <nowiki><td>1</td><td>2</td><td>3</td></nowiki> || <nowiki>| 1 || 2 || 3</nowiki>
|-
| <nowiki><th>1</th><th>2</th><th>3</th></nowiki> || <nowiki>! 1 !! 2 !! 3</nowiki>
|-
| <nowiki><td>1</td><td style="color:green">2</td><td>3</td></nowiki> || <nowiki>| 1 ||style="color:green"|2 || 3</nowiki>
|-
| <nowiki><th>1</th><th style="color:green">2</th><th>3</th></nowiki> || <nowiki>! 1 !!style="color:green"|2 !! 3</nowiki>
|}
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.

== Jak przerobić istniejącą tabelę na format wiki ==
=== Jeśli tabela jest w formacie (X)HTML ===
Pomocne będą następujące narzędzia:
* [http://www.uni-bonn.de/~manfear/html2wiki-tables.php HTML to Wiki Converter - tables], dostępny też [http://toolserver.org/~magnus/html2wiki.php mirror] (narzędzia online)
* [http://cpan.uwinnipeg.ca/dist/HTML-WikiConverter-MediaWiki HTML::WikiConverter] (rozszerzenie Media Wiki)

=== 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 [[OpenOffice.org|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 [http://extensions.services.openoffice.org/project/wikipublisher Sun Wiki Publisher].
* Dla bardzo prostych tabel, można skorzystać z narzędzi: [http://excel2wiki.net Copy & Paste Excel-to-Wiki Converter] lub [http://toolserver.org/~magnus/tab2wiki.php 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".

<br>
[[Kategoria:Pomoc|Tabele]]