Edytujesz Użytkownik:Lukasvonbayern/Tabele (sekcja)

== W kodzie źródłowym ==
=== Podstawy budowy ===
==== Wersja najprostsza ====
Poniższy kod utworzy prostą tabelę bez zarysowanych krawędzi:
<source lang="text">
{|
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
|}
</source>

Efekt poniżej:
{|
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
|}

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

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

...co daje:
{| class="wikitable"
! wiersz 1, kolumna 1
! wiersz 1, kolumna 2
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
|}

==== Wyrównywanie tekstu w poziomie ====
Jak widać z przykładów w sekcjach poprzednich, domyślnie (bez podania parametrów) zwykłe komórki są wyrównywane do lewej. Dzięki stylowi <code>text-align:XXX</code> można wymusić wyrównywanie zawartości komórek do prawej lub wyśrodkowanie. 
; Przykłady

* Wyrównywanie poszczególnych komórek:
<source lang="text">
{| class="wikitable"
! Nagłówek kolumny<br>nr 1
! Nagłówek kolumny<br>nr 2
! Nagłówek kolumny<br>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<br />nr 1
! Nagłówek kolumny<br />nr 2
! Nagłówek kolumny<br />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<br>nr 1
! Nagłówek kolumny<br>nr 2
! Nagłówek kolumny<br>nr 3
|-
| to do prawej
| i to do prawej
| i to
|}
</source>

...co daje:
{| class="wikitable" style="text-align:right"
! Nagłówek kolumny<br />nr 1
! Nagłówek kolumny<br />nr 2
! Nagłówek kolumny<br />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<br>nr 1
! Nagłówek kolumny<br>nr 2
! Nagłówek kolumny<br>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<br />nr 1
! Nagłówek kolumny<br />nr 2
! Nagłówek kolumny<br />nr 3
|-
| to do prawej
| i to do prawej
| style="text-align:left" | a to do lewej
|}

* Wyrównanie całej kolumny jest możliwe za pomocą zadeklarowania w nagłówku tabeli stylu <code>col-'''''n'''''-text-align-right</code>, gdzie ''n'' oznacza numer kolumny (w zakresie 1–9), w której ma być wprowadzone wyrównanie do prawej.
: Np. w celu wyrównania do prawej kolumn 3 i 4 i pozostawienia pozostałych wyrównanych domyślnie, należy użyć nagłówek 
 {{!}} {| class="wikitable col-3-text-align-right col-4-text-align-right"

...co daje:
{| class="wikitable col-3-text-align-right col-4-text-align-right"
! Kolumna główna<br />(nr 1)
! Nagłówek kolumny<br />nr 2
! Nagłówek kolumny<br />nr 3
! style="text-align:center" | Nagłówek kolumny<br />nr 4
! Nagłówek kolumny<br />nr 5
|-
! Wiersz 1
| do lewej
| a to do prawej
| i to do prawej
| do lewej
|-
! Wiersz 2
| do lewej
| a to do prawej
| i to do prawej
| do lewej
|}
: Uwaga 1: W metodzie tej wyrównanie obejmuje całą kolumnę, łącznie z wierszem nagłówkowym (zob. kolumna nr 3). Nagłówek kolumny<br /> 4 został natomiast wycentrowany za pomocą deklaracji stylu komórki "text-align:center". Podobnie można zmieniać wyrównanie innych pojedynczych komórek w kolumnie.
: Uwaga 2: ten sposób nie działa, jeśli w tabelce będą komórki, które zajmują więcej niż jedną kolumnę (zob. sekcję #W kilku kolumnach – parametr colspan]]), natomiast można go używać w tabelach łączących wiersze (parametr rowspan).

==== Wyrównywanie tekstu w pionie ====
Analogicznie do wyrównywania w poziomie.

Oto wyrównywanie parametrem:<br />
(ewentualnie „vertical-align” można zastąpić krótszym „valign”)
<source lang="text">
{| class="wikitable"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 2
! Nagłówek kolumny nr 3
! Nagłówek kolumny nr 4
|-
| style="vertical-align:top" | do góry
| style="vertical-align:center" | wyśrodkowane
| style="vertical-align:bottom" | do dołu
| ...<br />...<br />...
|}
</source>

...co daje:
{| class="wikitable"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 2
! Nagłówek kolumny nr 3
! Nagłówek kolumny nr 4
|-
| style="vertical-align:top" | do góry
| style="vertical-align:center" | wyśrodkowane
| style="vertical-align:bottom" | do dołu
| ...<br />...<br />...
|}

==== 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 nad tabelą pojawił się jej tytuł, używamy kodu <code>|+</code>, np.:
<source lang="text">
{| class="wikitable" style="text-align:right"
|+ Tytuł tabeli. Pojawia się bez ramki nad tabelą i jest wyśrodkowany
! Pierwsza kolumna
! Druga kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
|-
| wiersz 4, kolumna 1
| wiersz 4, kolumna 2
|}
</source>

...co daje:
{| class="wikitable" style="text-align:right"
|+ Tytuł tabeli. Pojawia się bez ramki nad tabelą i jest wyśrodkowany
! Pierwsza kolumna
! Druga kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
|-
| wiersz 4, kolumna 1
| wiersz 4, kolumna 2
|}

Jak widać szerokość tytułu jest równa tabeli, a nadmiar tekstu się przełamuje.

=== Kolory ===
We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów. 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 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 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''.

==== Kolorowanie tła ====
Żeby uzyskać różne barwy tła komórek, wstawiamy przed każdą komórką <code>style="background-color:LightSteelBlue"|</code>, 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 <code>#</code> przed liczbą np. <code>style="background-color:#ff0000"|</code>. Dodatkowo można stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – i tak zamiast <code>#ff0033</code> można to zapisać skrótowo <code>#f03</code>.

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

==== Kolorowanie tekstu ====
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
|}

==== Kolorowanie obramowania ====
Obramowanie (jednocześnie wszystkie 4 krawędzie) pojedynczej komórki lub całego wiersza kolorujemy poleceniem <code>border-color</code>. Zazwyczaj dla poprawy widoczności trzeba wtedy obramowanie również pogrubić poleceniem <code>border-width</code>, a to z kolei wymusza użycie polecenia <code>border-style</code> określającego rodzaj linii (np. ciągła, przerywana, kropkowana). W efekcie musimy użyć 3 poleceń, np.:
{|
| 1) &nbsp; linia ciągła: || <code>style="border-style: solid;"</code>
|-
| 2) &nbsp; o grubości 4 pikseli: &nbsp; || <code>style="border-width: 4px;"</code>
|-
| 3) &nbsp; i kolorze czerwonym: || <code>style="border-color: Red;"</code>
|}

W kodzie tabeli łączymy te polecenia w jedno polecenie stylu:

<code>style="border-style: solid; border-width: 4px; border-color: Red;"</code>

Wygodniej jednak użyć polecenia <code>border</code>, które grupuje wszystkie 3 powyższe parametry, np.:

<code>style="border: solid 4px Red;"</code>

<source lang="text">{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| style="border: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|- style="border: solid 4px Green;"
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}</source>

...co daje:
{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| style="border: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|- style="border: solid 4px Green;"
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}

Wspólne obramowanie kilku komórek wymaga więcej pracy, bo atrybuty trzeba nadawać w każdej komórce kolejno każdej kolorowanej krawędzi (góra/prawo/dół/lewo). Krawędzi, które pozostaną czarne, nie ruszamy. Polecenia dla poszczególnych krawędzi to:
* <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code> i <code>border-left</code>.

<source lang="text">{| class="wikitable"
| wiersz 1, kolumna 1
| style="border-top: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| wiersz 1, kolumna 2
| style="border-top: solid 4px Red; border-right: solid 4px Red; border-bottom: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|-
| style="border-top: solid 4px Green; border-right: solid 4px Green; border-left: solid 4px Green;"|wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| style="border-right: solid 4px Green; border-bottom: solid 4px Green; border-left: solid 4px Green;"|wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}</source>

...co daje:
{| class="wikitable"
| wiersz 1, kolumna 1
| style="border-top: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| wiersz 1, kolumna 2
| style="border-top: solid 4px Red; border-right: solid 4px Red; border-bottom: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|-
| style="border-top: solid 4px Green; border-right: solid 4px Green; border-left: solid 4px Green;"|wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| style="border-right: solid 4px Green; border-bottom: solid 4px Green; border-left: solid 4px Green;"|wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}

W ten sam sposób (formatując w każdej komórce potrzebną krawędź) robimy oczywiście pojedyncze kreski, np.:
{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| style="border-top: solid 4px Red;"| wiersz 2, kolumna 2
| style="border-top: solid 4px Red;"| wiersz 2, kolumna 3
|-
| style="border-right: solid 4px Green;"|wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| style="border-right: solid 4px Green;"|wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|-
| wiersz 5, kolumna 1
| wiersz 5, kolumna 2
| wiersz 5, kolumna 3
|}

O wiele łatwiej (pojedynczym poleceniem) robi się kreskę wzdłuż całego wiersza:
<source lang="text">{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 3
|- style="border-top: solid 4px Red;"
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|}</source>

...co daje:
{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 3
|- style="border-top: solid 4px Red;"
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|}

Niestety pionowej kreski po całości nie da się zrobić jednym poleceniem. Trzeba formatować potrzebną krawędź w każdej komórce.

==== Tabele kolorów ====
{{osobny artykuł|Pomoc:Kolory}}

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

=== Łączenie komórek ===
==== W kilku wierszach – parametr rowspan ====
<source lang="text">
{| class="wikitable"
| wiersz 1, kolumna 1
| rowspan=2 | wiersz 1 (oraz 2), kolumna 2
| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 3
|}
</source>

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

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

{{clear}}

==== W kilku kolumnach – parametr colspan ====
<source lang="text">
{| class="wikitable"
| wiersz 1, kolumna 1
| colspan=2 | wiersz 1, kolumna 2 (oraz 3)
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|}
</source>

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

<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)
|-
| wiersz 1, kolumna 1
| colspan=2 | wiersz 1, kolumna 2 (oraz 3)
| rowspan=2 | wiersz 1 (oraz 2), kolumna 4
|-
| colspan="3" | wiersz 2, kolumna 1 (oraz 2 i 3)
|-
| wiersz 3, kolumna 1
| colspan="3" rowspan="2" | wiersz 3 (oraz 4), kolumna 2 (oraz 3 i 4)
|-
| wiersz 4, kolumna 1
|}
</source>

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

=== Zagnieżdżanie tabel ===
poniższy kod...
<source lang="text">
{| class="wikitable"
| komórka 1
|
{| class="wikitable" style="background-color:lightblue"
| tabela
|-
| zagnieżdżona
|}
| komórka 3
|}
</source>

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

Uwaga: kod tabeli zagnieżdżonej musi zaczynać się od nowego wiersza.

=== Kilka tabel obok siebie ===
==== Metoda zagnieżdżania ====
Najprostszą metodą jest stworzenie nadrzędnej gołej tabeli bez formatowania (czyli bez „class="wikitable"”) składającej się tylko z jednego wiersza. W kolejnych komórkach tego wiersza umieszczamy normalne, wikipediowe tabele (czyli zawierające „class="wikitable"”), a najlepiej w co drugiej komórce, przeplatając to komórkami z odstępem (np. z &amp;nbsp;). Innymi słowy kilka tabel sformatowanych osadzamy w jednej tabeli niesformatowanej:
<source lang="text">
początek tabeli nadrzędnej:   {|
       komórka z 1. tabelą:   |
                              {| class="wikitable"
                              ...
                              |}
        komórka z odstępem:   | &nbsp;
       komórka z 2. tabelą:   |
                              {| class="wikitable"
                              ...
                              |}
koniec tabeli nadrzędnej:     |}
</source>

Osadzone tabele bez odstępów mają bardzo mały własny odstęp:
{|
|
{| class="wikitable"
|1||1
|-
|1||1
|}
|
{| class="wikitable"
|2||2
|-
|2||2
|}
|}

A tak jest po dodaniu komórki z odstępem (np. z &amp;nbsp;)
{|
|
{| class="wikitable"
| 1 || 1
|-
| 1 || 1
|}
| &nbsp;
|
{| class="wikitable"
| 2 || 2
|-
| 2 || 2
|}
|}

Metoda ta nie sprawdza się przy komórkach o różnej wysokości (a wysokość może się zmieniać w zależności od szerokości okna przeglądarki). Możemy wtedy uzyskać taki efekt:
{|
|
{| class="wikitable"
| inna<br />wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
|
{| class="wikitable"
| inna<br />wysokość
|-
| inna&nbsp;wysokość
|}
| &nbsp;
|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna&nbsp;wysokość
|}
|}

Częściowo można poprawić wygląd poprzez justowanie do góry każdej komórki z osadzoną tabelą:
<source lang="text">
początek tabeli nadrzędnej:   {|
       komórka z 1. tabelą:   | style="vertical-align: top"|
                              {| class="wikitable"
                              ...
                              |}
        komórka z odstępem:   | &nbsp;
       komórka z 2. tabelą:   | style="vertical-align: top"|
                              {| class="wikitable"
                              ...
                              |}
koniec tabeli nadrzędnej:     |}
</source>

{|
| style="vertical-align: top"|
{| class="wikitable"
| inna<br />wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
| style="vertical-align: top"|
{| class="wikitable"
| inna<br />wysokość
|-
| inna&nbsp;wysokość
|}
| &nbsp;
| style="vertical-align: top"|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
| style="vertical-align: top"|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna&nbsp;wysokość
|}
|}

Metoda zagnieżdżania ma jeszcze jedną wadę – powiększa się nieco interlinia przed i po takiej tabeli:

Poniżej jedna tabela: zwykły odstęp ↓
{| class="wikitable"
!
!
|-
|
|
|-
|
|
|}
Poniżej tabele osadzone w tabeli: zwykły odstęp ↑, powiększony odstęp ↓
{|
|
{| class="wikitable"
!
!
|-
|
|
|-
|
|
|}
| &nbsp;
|
{| class="wikitable"
!
!
|-
|
|
|-
|
|
|}
|}
Nowy akapit: powiększony odstęp ↑

==== Metoda białej kolumny ====
Metodą dającą najlepszy efekt wizualny jest symulacja kilku tabel poprzez użycie tylko jednej tabeli, ale z nadaniem niektórym kolumnom białego koloru. W tym celu pierwszą komórkę w białej kolumnie rozciągamy na wszystkie pozostałe wiersze poleceniem <code>rowspan</code> (podając liczbę wierszy), przez co otrzymamy jedną wspólną pionową komórkę biegnącą przez całą tabelę. Tej komórce nadajemy biały kolor tła, ale również na biało musimy pokolorować jej górną i dolną krawędź. Wszystkie formatowania umieszczamy obok siebie w jednym wierszu kodu, np.: 
<source lang="text">{| class="wikitable"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border-top-color: White; border-bottom-color: White; background-color: White;"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}</source>

...co daje:
{| class="wikitable"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border-top-color: White; border-bottom-color: White; background-color: White;"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}

Identyczny efekt można uzyskać nieco innymi poleceniami, umieszczając jedną część w pierwszej linii kodu tabeli, a drugą przy wybranej kolumnie:
<source lang="text">{| class="wikitable" style="border: none"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border: none; background-color: White"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}</source>

...co również daje:
{| class="wikitable" style="border: none"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border: none; background-color: White"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}

W obu przypadkach szerokość pustej białej kolumny jest dostateczna:
{| class="wikitable"
| x
| x
! rowspan=2 style="border-top-color: White; border-bottom-color: White; background-color: White;"|
| x
| x
|-
| x
| x
| x
| x
|}

...aczkolwiek można ją powiększyć np. wypełniając encjami twardej spacji (&amp;nbsp;).

Dodatkową zaletą obu tych rozwiązań niby-dzielonej tabeli jest identyczna wysokość wszystkich komórek w wierszu (de facto jest to wciąż jedna tabela), np.:
{| class="wikitable"
| ta<br />sama<br />wysokość
| rowspan=4 style="border-top-color: White; border-bottom-color: White; background-color: White;"| biała<br />ko-<br />lu-<br />mna
| ta&nbsp;sama&nbsp;wysokość
|-
| ta<br />sama<br />wysokość
| ta&nbsp;sama&nbsp;wysokość
|-
| ta<br />sama<br />wysokość
| ta&nbsp;sama&nbsp;wysokość
|}

==== Metoda „float” ====
Tabele można ułożyć obok siebie tak, aby wraz ze zmianą szerokości ekranu przesuwały się z jednego wiersza do drugiego. Otacza się wtedy kilka tabel elementem <code><nowiki><div></nowiki></code> z opływaniem do lewej (<code>float:left</code>). Dzięki temu, zależnie od rozdzielczości monitora użytkownika, obok siebie widoczna będzie optymalna liczba tabel.

'''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>
{|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>
</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>
{|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>

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

=== Kilka tabel z wyrównanymi kolumnami ===
Tabele z kolumnami o dynamicznej szerokości
{|
|- style="background-color: #CCCCCC"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || "We Got The Party" || Greg Wells, Kara DioGuardi || 3:37
|}

{|
|- style="background-color: #CCCCCC"
! Numer !! Tytuł 
|-
| 1. || "Life's What You Make It" <small>(live)</small>
|}

{|
|- style="background-color: #CCCCCC"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || "See You Again" || Miley Cyrus, Armato, James || 3:10
|}

Tabele z wyrównanymi kolumnami stałej szerokości
{|
|- style="background-color: #CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
! width="250px"| Autor
! width="35px"| Czas
|-
| 1. || "We Got The Party|| Greg Wells, Kara DioGuardi || 3:37
|}

{|
|- style="background-color: #CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
|-
| 1. || "Life's What You Make It" <small>(live)</small>
|}

{|
|- style="background-color: #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">
{|
|- style="background-color: #CCCCCC"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || "We Got The Party" || Greg Wells, Kara DioGuardi || 3:37
|}

{|
|- style="background-color: #CCCCCC"
! Numer !! Tytuł 
|-
| 1. || "Life's What You Make It" <small>(live)</small>
|}

{|
|- style="background-color: #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">
{|
|- style="background-color: #CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
! width="250px"| Autor
! width="35px"| Czas
|-
| 1. || "[We Got The Party" || Greg Wells, Kara DioGuardi || 3:37
|}

{|
|- style="background-color: #CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
|-
| 1. || "Life's What You Make It" <small>(live)</small>
|}

{|
|- style="background-color: #CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
! width="250px"| Autor
! width="35px"| Czas
|-
| 1. || "See You Again (singel Miley Cyrus)" || 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 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
| Literatura
| 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 liczb ====
{{Zobacz też|Szablon:L}}
W przypadku niewłaściwego sortowania liczb w kolumnie, w jej nagłówku należy wstawić parametr '''<code>data-sort-type="number"</code>''':
: <code>!Tytuł kolumny</code> → <code>!data-sort-type="number"|Tytuł kolumny</code>
Przykład:
{| class="sortable wikitable"
|+ Zawartość kofeiny (mg/100 g)
|-
! Produkt
!Bez <code>data-sort-type</code>
!data-sort-type="number"| Z <code>data-sort-type</code>
|-
| Tabletka kofeiny (regular)
| 100
| 100
|-
| Kawa parzona
| 80–135
| 80–135
|-
| Kawa bezkofeinowa
| 5–15
| 5–15
|-
| Herbata czarna
| 50
| 50
|}
Aby prawidłowo sortowały się wyrażenia typu <0,001 można zastosować „łatkę” z wykorzystaniem szablonu {{S|sortkey}}. Należy podać w nim wartość nieco mniejszą, np. <code><nowiki>{{sortkey|0,0009}}</nowiki> 0,001</code>, od właściwej. Rozwiązanie to nie ma charakteru systemowego i wymaga uwagi u edytujących, gdyż np. liczba 0,00095 będzie w powyższym przykładzie sortowała się jako większa niż <0,001.
; Sortowanie liczb rzymskich
W celu poprawnego sortowania liczb rzymskich, przed daną liczbą rzymską należy wstawić szablon pomocniczy {{S|sortkey}}, tj. zamiast <code>XIX</code> wpisz <code><nowiki>{{sortkey|19}}</nowiki> XIX</code>. Przykładowa tabela poniżej zawiera też parametr <code>data-sort-type="number"</code>.
{| class="sortable wikitable"
|-
! Bez <code><nowiki>{{sortkey}}</nowiki></code>
! Z <code><nowiki>{{sortkey}}</nowiki></code>
!data-sort-type="number"| Z <code><nowiki>{{sortkey}}</nowiki></code><br /> i <code>data-sort-type</code>
|-
| I
| {{sortkey|1}} I
| {{sortkey|1}} I
|-
| II
| {{sortkey|2}} II
| {{sortkey|2}} II
|-
| III
| {{sortkey|3}} III
| {{sortkey|3}} III
|-
| IV
| {{sortkey|4}} IV
| {{sortkey|4}} IV
|-
| V
| {{sortkey|5}} V
| {{sortkey|5}} V
|-
| VI
| {{sortkey|6}} VI
| {{sortkey|6}} VI
|-
| VII
| {{sortkey|7}} VII
| {{sortkey|7}} VII
|-
| VIII
| {{sortkey|8}} VIII
| {{sortkey|8}} VIII
|-
| IX
| {{sortkey|9}} IX
| {{sortkey|9}} IX
|-
| X
| {{sortkey|10}} X
| {{sortkey|10}} X
|}

==== Sortowanie dat w tabelach ====
{{Zobacz też|Szablon:Dts}}
Zasadniczo daty w tabelach są prawidłowo sortowane wyłącznie wtedy, 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<br/>(szablon dts)
!Sortowanie dat<br/>(rrrr-mm-dd)
!Sortowanie liczb
|-
! Pozycja 1
| {{dts|01|01|1999}}
| 1999-01-01
| 245
|-
! Pozycja 2
| {{dts|03|07|1995}}
| 1995-07-03
| 127
|-
! Pozycja 3
| {{dts|07|03|1997}}
| 1997-03-07
| 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<br />(szablon dts)
!Sortowanie dat<br />(rrrr-mm-dd)
!Sortowanie liczb
|-
! Pozycja 1
| {{dts|01|01|1999}}
| 1999-01-01
| 245
|-
! Pozycja 2
| {{dts|03|07|1995}}
| 1995-07-03
| 127
|-
! Pozycja 3
| {{dts|07|03|1997}}
| 1997-03-07
| 21
|}

==== Sortowanie nazwisk w tabelach ====
Problemy może sprawiać również sortowanie biogramów w tabelach według nazwisk, ponieważ biogramy 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.

=== Automatyczne numerowanie w pierwszej kolumnie ===
Do automatycznego numerowania w pierwszej kolumnie, np. liczby porządkowej, można wykorzystać szablon {{S|Numerowanie w tabeli}}:

Kod źródłowy:
<pre>
{{Numerowanie w tabeli| class{{=}}"wikitable"
! Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}
</pre>

Wynik:
{{Numerowanie w tabeli| class{{=}}"wikitable"
! Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| tr
}}

Aby w takiej tabeli zastosować sortowanie z zachowaniem Lp. w pierwszej kolumnie, należy zastosować kod:
<pre>
{{Numerowanie w tabeli| class{{=}}"wikitable sortable"
!class{{=}}"unsortable ordinal"| Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}
</pre>

Wynik:
{{Numerowanie w tabeli| class{{=}}"wikitable sortable"
!class{{=}}"unsortable ordinal"| Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}

=== 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>
* <nowiki> |} </nowiki>
|
* Rozpoczyna tabelę (po tych znakach wpisujemy style, klasy itp. dla całej tabeli)
* Dodaje tytuł nad tabelą
* Nowa kolumna nagłówka (pionowe)
* równoważne "<nowiki><br /></nowiki>" (nowy wiersz) + "!" (nowa kolumna nagłówka)
* Nowa kolumna (pionowe)
* równoważne <nowiki>"<br />" (nowy wiersz) + "|"</nowiki> (nowa kolumna)
* Nowy wiersz (poziome)
* Kończy tabelę
|-
|
* class="wikitable"
|
* Określenie klasy tabeli (zalecana właśnie ''wikitable'').<br />Dodatkowe klasy do tej samej tabeli 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;
** vertical-align:top;
** vertical-align:center;
** vertical-align:bottom;
** border: 1px solid #FFFFFF;
** float: right;
** float: left;
* ;"
|
* Otwieranie określeń stylów
** Tabelka zajmie 30% szerokości artykułu
** Wyrównanie tekstu do lewej
** ... do środka (w poziomie)
** ... do prawej
** ... do góry
** ... do środka (w pionie)
** ... do dołu
** Grubość, styl i kolor obramowania komórki
** Wyrównaj tabelę do prawej
** ... do lewej
* 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; style="background-color: 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|tabela-tak}} oraz {{s|tabela-nie}} lub {{s|tabela-tak|jakiś tekst}} oraz {{s|tabela-nie|jakiś przeczący tekst}} – dodające styl komórki
<source lang="text">{| class="wikitable" width="50%"
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{tabela-tak}}
| {{tabela-nie}}
|-
| {{tabela-tak|Raczej tak}}
| {{tabela-nie|Prawdopodobnie nie}}
|}</source>
|
{| class="wikitable" width="50%"
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{tabela-tak}}
| {{tabela-nie}}
|-
| {{tabela-tak|Raczej tak}}
| {{tabela-nie|Prawdopodobnie nie}}
|}
|-
| {{S|L|200}}

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

=== Zwijanie/rozwijanie tabeli ===
Tabele można zdefiniować jako zwijalne (lub inaczej ukrywające zawartość) z użyciem klasy css "collapsible". Domyślnie klasa ta przy pierwszym wywołaniu strony z daną tabelę wyświetla ja jako rozwiniętą. Można wymusić, aby przy pierwszym wyświetleniu tabela była zwinięta – należy w tym celu użyć kolejnej klasy "collapsed". Użycie obu klas ma jedno uwarunkowanie – funkcjonują prawidłowo tylko wtedy, gdy w definicji tabeli jest zdefiniowany wiersz nagłówkowy, w którym umieszczony jest przełączalny przycisk "Pokaż/Ukryj". Brak wiersza nagłówkowego powoduje niedziałanie obu klas i tabela jest wyświetlana bez ich funkcjonalności (nie jest zwijalna). Ponadto wg stanu na listopad 2017 r. w trybie edycji kodu źródłowego na podglądzie dana tabela nie ma dostępnej funkcji zwijania/rozwijania, ale po zapisaniu zmian funkcja ta jest dostępna.

Należy pamiętać, że w przypadku gdy tabela ma więcej niż jedną kolumnę, to wiersz nagłówkowy powinien być rozciągnięty na daną liczbę kolumn, czyli jeśli tabela ma trzy kolumny, to definicja wiersza nagłówkowego powinna być następująca<br /> <code>! colspan=3 | Nagłówek zwijalnej tabeli</code><br /> – w przeciwnym przypadku nagłówek z przyciskiem będzie się rozciągał tylko na pierwszą kolumnę. Ponadto gdy w wielokolumnowej tabeli zdefiniujemy tyle samo nagłówków ile jest kolumn, to przycisk "Pokaż/Ukryj" będzie umieszczony w nagłówku (komórce) pierwszej kolumny.

Poniższy kod:
<pre>
{| class="wikitable collapsible collapsed" style="text-align: center"
! Nagłówek zwijalnej tabeli
|-
|Zwijalna
|-
|zawartość
|}
</pre>
daje w rezultacie tabelę zwijaną/rozwijaną w postaci zwiniętej przy pierwszym wyświetleniu:
{| class="wikitable collapsible collapsed" style="text-align: center"
! Nagłówek zwijalnej tabeli
|-
|Zwijalna
|-
|zawartość
|}

Inną klasą oferującą ww. funkcje jest "mw-collapsible". Można jej używać z klasą "mw-collapsed". Klasa "mw-collapsible" różni się od klasy "collapsible" tym, że:
* przełączane przyciski mają nazwy "zwiń/rozwiń"
* nie wymaga zdefiniowania w tabeli wiersza nagłówkowego – przy jego braku przycisk "zwiń/rozwiń" jest umieszczany w ostatniej komórce pierwszego wiersza
* działa też na podglądzie w trybie edycji kodu źródłowego
* zdefiniowanie dla tabeli wielokolumnowej tyle samo nagłówków ile jest kolumn spowoduje umieszczenie przycisku "zwiń/rozwiń" w nagłówku (komórce) ostatniej kolumny

Poniższy kod obrazuje przypadek wyżej wymieniony (kod <code>&amp;nbsp;</code> w ostatnim nagłówku jest dodany do wymuszenia odstępu przed przyciskiem w postaci zwiniętej):
<pre>
{| class="wikitable mw-collapsible mw-collapsed" style="text-align: center"
! Nagłówek zwijalnej
! tabeli&amp;nbsp;
|-
| Zwijalna
| tabela
|-
| z klasą
| "mw-collapsible"
|}
</pre>
i daje w rezultacie poniższą tabelę zwijaną/rozwijaną:
{| class="wikitable mw-collapsible mw-collapsed" style="text-align: center"
! Nagłówek zwijalnej

! tabeli&nbsp;
|-
| Zwijalna

| tabela
|-
| z klasą

| "mw-collapsible"
|}

=== 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[Apache OpenOffice|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".