Tekst źródłowy strony Pomoc:Tabele

{{Skrót|WP:T, WP:Tabela}}
{{Pomoc:Edytowanie/Nawigacja}}
{{Główka strony pomocy|edytor=oba}}
'''Tabele''' można edytować zarówno w kodzie źródłowym, jak i za pomocą edytora wizualnego. Jeśli chodzi o kod źródłowy, zalecane jest używanie znaczników składni wiki (znaczniki te w większości muszą zaczynać się na początku nowej linii).

= W edytorze wizualnym =
{{#lsth:Pomoc:VisualEditor|Edycja tabel}}

= W kodzie źródłowym =
== Podstawy budowy ==
Wikipediowe tabele są tabelami HTML, w których podstawowe znaczniki mają uproszczoną postać i nie wymagają znaczników zamykających dany element. Wyjątkiem jest tylko znacznik otwierający tabelę, który wymaga znacznika zamykającego tabelę, czyli para znaczników <code>{|</code> i <code>|}</code>.

Poniżej porównanie obu składni:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
<syntaxhighlight lang="text">
Kod HTML:

<table>
  <caption>Tytuł</caption>
  <tr>
    <th>Nagłówek A</th>
    <th>Nagłówek B</th>
  </tr>
  <tr>
    <td>Komórka 1A</td>
    <td>Komórka 1B</td>
  </tr>
  <tr>
    <td>Komórka 2A</td>
    <td>Komórka 2B</td>
  </tr>
</table>
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
Wikikod:

{|
|+ Tytuł
! Nagłówek A
! Nagłówek B
|-
| Komórka 1A
| Komórka 1B
|-
| Komórka 2A
| Komórka 2B
|}
</syntaxhighlight>
|}

...co daje w wikipediowym artykule ten sam efekt:
{|
|+ Tytuł
! Nagłówek A
! Nagłówek B
|-
| Komórka 1A
| Komórka 1B
|-
| Komórka 2A
| Komórka 2B
|}

== Tabela niesformatowana ==
Tabela z poprzedniej sekcji artykułu nie jest zbyt czytelna, przede wszystkim brakuje w niej ramek. Na Wikipedii takie rozwiązanie nazywamy '''tabelą niesformatowaną'''.

W następnej sekcji jest opisany sposób tworzenia '''tabeli sformatowanej''' – rozwiązania stosowanego powszechnie w wikipediowych artykułach.

Tu zatrzymajmy się na moment i zastanówmy, czy taka „surowa” tabela może być do czegoś przydatna. Okazuje się, że tak. Co prawda niezbyt często, ale jest wykorzystywana do tzw. tabulacji, czyli mechanizmu wyrównywania fragmentów w kolejnych akapitach.

Oto przykład przepisu na chleb. Jest to tabela niesformatowana z 2 kolumnami:
{|
|-
| mąka pszenna &nbsp;
| – 250 gramów
|-
| mąka żytnia
| – 200 gramów
|-
| woda
| – 400 ml
|-
| zakwas
| – 3 duże łyżki
|-
| sól
| – 1 łyżeczka
|}

Jak widać, tekst został wyrównany na półpauzach (na początku drugiej kolumny tabeli).

Zazwyczaj wszystko umieszcza się w tabelach sformatowanych (opisanych poniżej), ale osoba edytująca artykuł może mieć inne priorytety (spowodowane np. nadmiarem tabel w artykule albo prezentacją różnych rodzajów informacji).

== Tabela sformatowana (zalecany kod tabeli) ==
Na Wikipedii stosowane są klasy zawierające cały szereg parametrów usprawniających wyświetlanie tabeli. Wikipediowe klasy różnią się między sobą różnymi dodatkowymi funkcjonalnościami, ale wszystkie dają ten sam podstawowy i spójny wygląd, charakterystyczny dla wikipediowych artykułów.

Podstawowa klasa, zalecana i stosowana w przeważającej większości tabel na Wikipedii, to polecenie wstawiane w pierwszej linii kodu tabeli zaraz za znacznikiem początku tabeli.

Wygląda ono tak:
<syntaxhighlight lang="text">
{| class="wikitable"
</syntaxhighlight>

Właśnie tak, jak powyżej, powinna zaczynać się każda tabela na Wikipedii, o ile nie mamy wyraźnych powodów do wprowadzania dodatkowych funkcjonalności związanych np. z sortowaniem kolumn czy zbiorczym modyfikowaniem wybranych parametrów wyglądu. Zresztą te dodatkowe klasy (opisane w innych miejscach poradnika) są tylko drobnymi modyfikacjami zalecanej klasy.

Poniżej przykład całego kodu tabeli opatrzonej zalecaną klasą:
<syntaxhighlight lang="text">
{| class="wikitable"
|+ Tytuł
! Nagłówek A
! Nagłówek B
|-
| Komórka 1A
| Komórka 1B
|-
| Komórka 2A
| Komórka 2B
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
|+ Tytuł
! Nagłówek A
! Nagłówek B
|-
| Komórka 1A
| Komórka 1B
|-
| Komórka 2A
| Komórka 2B
|}

Jak widać, różnica między tabelą niesformatowaną (opisaną wcześniej) a tabelą sformatowaną jest olbrzymia. Przede wszystkim wszystko jest dobrze widoczne.

== Zasady układania kodu ==
=== Znaczniki ===
Poniżej wszystkie znaczniki wikikodu. Zastępują one podstawowe znaczniki HTML:
* <code>{|</code> – początek tabeli – zastępuje <code>&lt;table></code>
* <code>|+</code> – początek tytułu tabeli – zastępuje <code>&lt;caption></code> (i nie potrzebuje odpowiednika <code>&lt;/caption></code>)
* <code>|-</code> – początek nowego wiersza tabeli – zastępuje <code>&lt;tr></code> (i nie potrzebuje odpowiednika <code>&lt;/tr></code>)
* <code>!</code> – początek komórki nagłówka – zastępuje <code>&lt;th></code> (i nie potrzebuje odpowiednika <code>&lt;/th></code>)
* <code>|</code> – początek komórki zwykłej – zastępuje <code>&lt;td></code> (i nie potrzebuje odpowiednika<code>&lt;/td></code>)
* <code>|}</code> – koniec tabeli – zastępuje <code>&lt;/table></code>

Jak widać, nie ma ich wiele. W trudniejszych sytuacjach do wikikodu można natywnie dopisywać inne znaczniki, polecenia i parametry HTML, aczkolwiek wiele rzeczy w wikikodzie jest rozwiązanych selektorami klas (<code>class=...</code>).

=== Początek kodu tabeli ===
Kod tabeli musi zawsze zaczynać się na początku akapitu, przy czym może to być akapit zwykły lub akapit z wcięciem. Poniżej przykłady:
<syntaxhighlight lang="text">
{| class="wikitable"
: {| class="wikitable"
:: {| class="wikitable"
::: {| class="wikitable"
</syntaxhighlight>

Natomiast nie ma możliwości umieszczania tabeli w listach wypunktowanych (wiersz zaczyna się gwiazdką <code>*</code>) i listach numerowanych (wiersz zaczyna się kratką <code>#</code>). Ciąg takiej listy można tylko przerwać i umieścić tabelę w osobnym akapicie.

Spacje pomiędzy początkiem akapitu (czyli początkiem linii kodu) i początkiem kodu tabeli są pomijane przez oprogramowanie, natomiast inne znaki tam umieszczone (niż użyte powyżej dwukropki) spowodują błąd – w artykule zamiast tabeli wyświetli się jawnie jej kod.

Pusty znacznik tytułu tabeli można pominąć. Również pusty znacznik pierwszego wiersza tabeli można pominąć (ale tylko pierwszego wiersza). Obecność tych znaków nie przeszkadza, ale lepiej je usunąć dla uproszczenia kodu. Dopiero znaczniki kolejnych wierszy są konieczne.
<syntaxhighlight lang="text">
{| class="wikitable"
|+                     znacznik pusty (zbędna linia kodu)
|-                     znacznik pusty (zbędna linia kodu)
|
...

{| class="wikitable"
|+ Tytuł tabeli        znacznik z tekstem (potrzebny)
|- align=right         znacznik z poleceniem (potrzebny)
|
...
</syntaxhighlight>

=== Koniec kodu tabeli ===
Znacznik końca tabeli musi zawsze stać na początku nowej linii kodu (nie licząc ewentualnych spacji).

Pominięcie znacznika końca tabeli spowoduje błąd – w dole tabeli znajdzie się cała reszta artykułu.

W poprzednim wierszu przed znacznikiem końca tabeli powinna być zdefiniowana komórka, ewentualnie znacznik końca tabeli osadzonej. Z logicznego punktu widzenia nie ma tam miejsca na nic innego, czasami tylko edytujący wstawiają tam pusty wiersz (który nic nie robi) mający pomóc w orientacji osoby piszącej podczas tworzenia wyjątkowo skomplikowanej konstrukcji. Jednak zaskakująco często zdarza się, że jest tam umieszczony znacznik nowego wiersza – prawdopodobnie wstawiany podczas kopiowania fragmentu kodu. Znacznik ten w tym miejscu nic nie robi i należy go usunąć, bo jest tylko balastem.
<syntaxhighlight lang="text">
lepiej:     gorzej:

|...        |...
|...        |...
|...        |...
|}          |-      <- zbędne
            |}
</syntaxhighlight>

Po znaczniku końca tabeli można wpisywać wszystko w dowolnej konfiguracji, bo i tak zawsze zostanie to wyświetlone niżej jako nowy akapit.

Tak więc mamy tutaj 3 możliwości układania kodu – bez wpływu na wygląd artykułu:
<syntaxhighlight lang="text">
|} tekst po tabeli        |}                     |}
                          tekst po tabeli
                                                 tekst po tabeli
</syntaxhighlight>

Trzecie z powyższych rozwiązań wydaje się najbardziej eleganckie (po dwóch enterach) i przede wszystkim najbardziej czytelne dla innych osób zaglądających do kodu.

=== Układanie kodu w pionie i poziomie ===
Zasadniczo wszystkie wymienione powyżej znaczniki muszą się zaczynać od nowej linii kodu. Jest jednak jeden wyjątek: druga i następne komórki (nagłówka i zwykłe) mogą zaczynać się w kodzie od nowego wiersza, ale równie dobrze można je układać w tej samej linii. Każda następna komórka umieszczona w tej samej linii musi być jednak poprzedzona dwiema pałkami (a nie jedną, jak na początku linii).

Poniżej przykłady obu sposobów układania kodu:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
<syntaxhighlight lang="text">
{| class="wikitable"
|+ Tytuł tabeli
! Nagłówek A
! Nagłówek B
! Nagłówek C
|-
| Komórka A
| Komórka B
| Komórka C
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
|+ Tytuł tabeli
! Nagłówek A || Nagłówek B || Nagłówek C
|-
| Komórka A || Komórka B || Komórka C
|}
</syntaxhighlight>
|}

...co daje ten sam efekt:
{| class="wikitable"
|+ Tytuł tabeli
! Nagłówek A || Nagłówek B || Nagłówek C
|-
| Komórka A || Komórka B || Komórka C
|}

Pierwszy sposób jest wygodny i bardziej przejrzysty, gdy mamy wiele komórek o zróżnicowanej treści. Drugi sposób jest dobry przy dużych zestawieniach podobnych informacji (np. tabela wyników rozgrywek sportowych).

W przypadku kolejnych komórek nagłówka zamiast dwóch pałek można też użyć dwóch wykrzykników, byle konsekwentnie w ramach tej samej linii kodu. Oba poniższe zapisy są równoważne:
<syntaxhighlight lang="text">
! Nagłówek A || Nagłówek B || Nagłówek C
! Nagłówek A !! Nagłówek B !! Nagłówek C
</syntaxhighlight>

Można mieszać porządki i układać sąsiednie komórki trochę w pionie, trochę w poziomie. Poniżej fragment kodu z 3 komórkami w wierszu. Wszystkie 4 kombinacje dają dokładnie ten sam wygląd tabeli:
<syntaxhighlight lang="text">
|-          |-                   |-
| Kom.1     | Kom.1 || Kom.2     | Kom.1 || Kom.2 || Kom.3
| Kom.2     | Kom.3
| Kom.3
</syntaxhighlight>

Powyższe to tylko przykład mieszania porządków, możliwa jest każda kombinacja.

Poniżej wybór różnych układów kodu jednego wiersza z 6 komórkami:
<syntaxhighlight lang="text">
|-            |-                 |-                 |-
| x || x      | x || x || x      | x || x           | x
| x || x      | x || x || x      | x                | x || x || x || x
| x || x                         | x || x || x      | x
</syntaxhighlight>

=== Wstawianie dodatkowych poleceń ===
==== Po znaczniku początku tabeli ====
Nie ma lepszego przykładu niż polecenie nadania tabeli stylu zalecanego na Wikipedii:
<syntaxhighlight lang="text">
{| class="wikitable"
</syntaxhighlight>

Oczywiście w praktyce można znaleźć w tym miejscu znacznie więcej poleceń definiujących wygląd całej tabeli.

==== Po znaczniku tytułu tabeli ====
Znacznik tytułu tabeli to znacznik, po którym wpisuje się tekst. W związku z tym każde polecenie po tym znaczniku musi być zakończone pałką, która oddziela polecenia od tekstu.

Oto przykład wyrównania tekstu tytułu tabeli do prawej:
<syntaxhighlight lang="text">
|+ style="text-align:right"| Tytuł tabeli
</syntaxhighlight>

Jak widać powyżej, zastosowano polecenie stylu. Oprócz poleceń stylu istnieją również ich uproszczone wersje<ref name="deprecated"/>, które widać niżej w sekcji dotyczącej poleceń dla komórki, ale np. w przypadku znacznika tytułu tabeli polecenia uproszczone nie działają:

<syntaxhighlight lang="text">
|+ style="text-align:right"| ...     polecenie działa
|+ align="right"| ...                polecenie nie działa
</syntaxhighlight>

Trzeba zawsze uważać z poleceniami uproszczonymi<ref name="deprecated"/>, a w przypadku problemów stosować polecenia stylu, jako bezpieczniejsze.

==== Po znaczniku nowego wiersza ====
Po tym znaczniku w jego linii kodu już nic nie ma, bo komórki mogą być definiowane dopiero od następnej linii, w związku z tym polecenia wpisuje się tutaj zwyczajnie (tak jak po znaczniku początku tabeli). Nie trzeba pomagać sobie znakiem pałki (jak przy znaczniku tytułu tabeli).

W poniższym przykładzie wszystkie komórki w tym wierszu będą wyrównane do prawej. Podano obie wersje poleceń – pełną i uproszczoną, bo w odróżnieniu od znacznika tytułu tabeli obie tutaj zadziałają..., choć nie do końca. Wyjaśnienie pod przykładem.
<syntaxhighlight lang="text">
|- style="text-align:right"     polecenie działa
|- align=right                  polecenie też działa
</syntaxhighlight>

Uwaga: oba powyższe warianty zadziałają w komórkach zwykłych, natomiast w komórkach nagłówka niektórych rzeczy nie da się zrobić zbiorczo (po znaczniku wiersza), a wtedy trzeba formatować każdą komórkę osobno. Tu mamy właśnie taką sytuację. Jednak niektóre inne polecenia zadziałają tutaj nawet na komórki nagłówka. Zawsze trzeba sprawdzać, czy komórki nagłówka przyjmą dane polecenie zbiorczo (po znaczniku wiersza), podczas gdy komórki zwykłe przyjmą je zbiorczo zawsze.

Na końcu poradnika znajduje się tabela ze wszystkimi poleceniami i miejscami, w których one działają.

==== Po znaczniku komórki ====
Po każdym znaczniku każdej komórki (nagłówka lub zwykłej) można wstawić dodatkowe polecenie lub nawet ich zestaw, które będą modyfikować wygląd zawartości komórki. Można tak zmieniać kolory, kierunek wyrównywania tekstu itd., a nawet scalać kilka komórek.

Robi się to poprzez wstawienie polecenia i zakończenie go kolejnym znakiem pałki.

Przykłady dla pierwszej komórki w linii kodu:
<syntaxhighlight lang="text">
! tekst                       <- tekst komórki nagłówka domyślnie
!style="color:Red"| tekst     <- tekst komórki nagłówka czerwony

| tekst                       <- tekst komórki zwykłej domyślnie
|style="color:Red"| tekst     <- tekst komórki zwykłej czerwony
</syntaxhighlight>

Przykłady dla którejś z kolejnych komórek w linii kodu:
<syntaxhighlight lang="text">
! tekst || tekst                       <- tekst 2. komórki nagłówka domyślnie
! tekst ||style="color:Red"| tekst     <- tekst 2. komórki nagłówka czerwony

| tekst || tekst                       <- tekst 2. komórki zwykłej domyślnie
| tekst ||style="color:Red"| tekst     <- tekst 2. komórki zwykłej czerwony
</syntaxhighlight>

Uwaga: w przypadku komórek nagłówka separatorem drugiej i następnych komórek mogą być dwie pałki lub dwa wykrzykniki, jednak zawsze po dodaniu polecenia musi być pałka:
<syntaxhighlight lang="text">
! tekst ||style="color:Red"| tekst ||...| tekst   <- dobrze
! tekst !!style="color:Red"| tekst !!...| tekst   <- dobrze
! tekst !!style="color:Red"! tekst !!...! tekst   <- źle
                           ↑            ↑
</syntaxhighlight>

W powyższym przykładzie strzałki pokazują omawiane miejsca, a wielokropek symbolizuje miejsce na jakieś polecenie. Pierwsze dwa przykłady (poprawne) dają taki sam efekt:
{| class="wikitable"
! tekst ||style="color:Red"| tekst ||...| tekst
|}

Trzeci przykład (z błędem) wyświetli się tak:
{| class="wikitable"
! tekst !!style="color:Red"! tekst !!...! tekst
|}

Jeżeli zrezygnujemy ze wstawienia polecenia, ale pozostawimy miejsce dla niego przewidziane – nic się nie stanie. W kodzie będzie balast, ale tabela wyświetli się normalnie:
<syntaxhighlight lang="text">
|align=right| tekst             <- składnia poprawna
| tekst                         <- składnia poprawna
|| tekst                        <- balast: nadmiarowa pałka
| | tekst                       <- balast: nadmiarowe spacja i pałka
</syntaxhighlight>
<syntaxhighlight lang="text">
| tekst ||align=right| tekst    <- składnia poprawna
| tekst || tekst                <- składnia poprawna
| tekst ||| tekst               <- balast: nadmiarowa pałka
| tekst || | tekst              <- balast: nadmiarowe spacja i pałka
</syntaxhighlight>

Oczywiście takie wady składni należy poprawiać, usuwając nadmiarowe znaki.

Dopiero przy 4 pałkach tabela zareaguje inaczej – w zależności od tego, czy pojawią się tam tylko pałki, czy też dodatkowe spacje – utworzeniem nowej komórki lub pojawieniem się w treści komórki znaku pałki.

Powyższe przykłady dotyczą również komórek nagłówka i znaków wykrzyknika.

=== Białe znaki ===
Białe znaki to odstępy poziome i pionowe, czyli spacje, tabulatory i entery. Tabulatorów na Wikipedii nie używa się (mimo że działają), ich ewentualne pojawienie się w kodzie artykułu boty zmieniają na spacje.

==== Entery ====
Wprowadzenie entera do tekstu komórki powoduje utworzenie nowego akapitu tekstu, ale odstęp pomiędzy tymi akapitami będzie powiększony. Użycie entera ma uzasadnienie tylko przy prezentacji dłuższych tekstów, gdy chcemy wyraźnie zaznaczyć pojawienie się nowego akapitu, np.:
{| class="wikitable" style="text-width: 400px"
| Zapisując zmiany, wyrażasz nieodwołalną zgodę na udostępnianie Twojego wkładu na licencjach CC-BY-SA 3.0 i GFDL oraz na wykorzystanie go w dowolnej formie.
Treść ta musi być dostępna na tych zasadach, jeśli nie jest wynikiem Twojej samodzielnej pracy. Zobacz szczegółowe informacje o warunkach korzystania.
|}

Tworzenie akapitów odbywa się w skomplikowany sposób:
* dla wiersza pod znacznikiem otwierającym komórkę wystarczy jeden enter,
* kolejne akapity robi się dwoma enterami (bo jeden enter zrobi spację):
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
| tekst w komórce
tekst w komórce

tekst w komórce
tekst w komórce

tekst w komórce
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| tekst w komórce      1 enter  (akapit)
tekst w komórce        2 entery (akapit)

tekst w komórce        1 enter  (daje spację)
tekst w komórce        2 entery (akapit)

tekst w komórce
|}
</syntaxhighlight>
|}

Zazwyczaj jednak zależy nam na zwykłym przełamaniu tekstu, a wtedy lepiej używać znacznika „line break” <code>&#60;br /></code>, który robi dokładnie takie same odstępy, jak tekst po samoczynnym przełamaniu:
* najlepiej znaczniki „line break” układać w jednej linii kodu (komórka 1),
* jeżeli chcemy każdy wiersz oddzielnie w kodzie, to musimy zacząć poniżej znacznika otwierającego komórkę, ale komórka dostanie trochę większy odstęp od góry i dołu (komórka 2),
* inaczej się nie da, bo po pierwszym wierszu powstanie większy odstęp (komórka 3):
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
| tekst w komórce 1<br />tekst w komórce 1<br />tekst w komórce 1
|-
|
tekst w komórce 2<br />
tekst w komórce 2<br />
tekst w komórce 2
|-
| tekst w komórce 3<br />
tekst w komórce 3<br />
tekst w komórce 3
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| tekst w komórce 1<br />tekst w komórce 1<br />tekst w komórce 1
|-
|
tekst w komórce 2<br />
tekst w komórce 2<br />
tekst w komórce 2
|-
| tekst w komórce 3<br />
tekst w komórce 3<br />
tekst w komórce 3
|}
</syntaxhighlight>
|}

Różnica w działaniu pomiędzy enterami i znacznikami „line break” jest taka:
<syntaxhighlight lang="text">
{| class="wikitable"
| tekst w komórce 1<br />tekst w komórce 1<br />tekst w komórce 1<br />tekst w komórce 1
| tekst w komórce 2
tekst w komórce 2

tekst w komórce 2

tekst w komórce 2
|
tekst w komórce 3

tekst w komórce 3

tekst w komórce 3

tekst w komórce 3
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
| tekst w komórce 1<br />tekst w komórce 1<br />tekst w komórce 1<br />tekst w komórce 1
| tekst w komórce 2
tekst w komórce 2

tekst w komórce 2

tekst w komórce 2
|
tekst w komórce 3

tekst w komórce 3

tekst w komórce 3

tekst w komórce 3
|}

Natomiast wprowadzanie dodatkowych enterów do kodu (a nie treści) tabeli nic nie robi. W poniższym przykładzie:
: a) normalnie,
: b) enter po znaczniku wiersza nic nie robi (nawet wiele enterów),
: c) enter (ale tylko jeden) w treści komórki... nadal nic nie robi (wymyślono to dla możliwości rozdzielania dużych fragmentów kodu w celu ich lepszej czytelności dla osoby piszącej),
: d) dwa entery w treści komórki to już za dużo i w komórce pojawi się nowy pusty akapit.
<syntaxhighlight lang="text">
a)           b)           c)           d)
| tekst      | tekst      | tekst      | tekst
|-           |-
| tekst                   |-
             | tekst      | tekst      |-
                                       | tekst
</syntaxhighlight>

A tak powyższe wygląda w praktyce:
{|
|- valign="top"
| a)
{| class="wikitable"
| tekst
|-
| tekst
|}
|style="padding-left:2em"| b)
{| class="wikitable"
| tekst
|-

| tekst
|}
|style="padding-left:2em"| c)
{| class="wikitable"
| tekst

|-
| tekst
|}
|style="padding-left:2em"| d)
{| class="wikitable"
| tekst

|-
| tekst
|}
|}

==== Spacje ====
Tekst w komórce zachowuje się tak samo jak w pozostałej części artykułu:
* spacje na początku (po znaczniku komórki) nie są wyświetlane,
* spacje na końcu akapitu też nie są wyświetlane,
* spacje przed i po znaczniku przełamania wiersza, czyli <code>&#60;br /></code>, też nie są wyświetlane,
* natomiast:
 spacja po enterze daje tekst techniczny.

Jeżeli chcemy coś poszerzyć, trzeba użyć encji twardej spacji <code>&amp;nbsp;</code>.

W przypadku znaczników kodu spacje też są niepotrzebne, ale wprowadza się je dla lepszej czytelności kodu, np.:
<syntaxhighlight lang="text">
{|class="wikitable"         <- gorzej
{| class="wikitable"        <- lepiej

|-align=right               <- gorzej
|- align=right              <- lepiej

!1||2||3||4                 <- gorzej
! 1 || 2 || 3 || 4          <- lepiej

|tekst||tekst||tekst        <- gorzej
| tekst || tekst || tekst   <- lepiej
</syntaxhighlight>

Jednak dobrą praktyką jest odróżnianie wyglądu poleceń przypisanych do komórki od wyglądu wyświetlanej zawartości komórki. Chodzi o większenie czytelności kodu. Polecenia niech przylegają do znaków pałki, a zawartość niech będzie między spacjami, bo początkowa i kończąca spacja i tak są pomijane przy wyświetlaniu komórki:
<syntaxhighlight lang="text">
  polecenie     zawartość     polecenie    zawartość

|align=center| tekst tekst ||align=right| tekst tekst
              ↑           ↑              ↑
</syntaxhighlight>

Powyższe rozwiązanie, oprócz czytelności kodu, pozwala uniknąć błędów składniowych, gdy chcemy wyświetlić na początku komórki niektóre znaki stosowane w składni, np. dywiz czy znak dodawania.

W zwykłym tekście spacja na początku akapitu wyświetla tzw. tekst techniczny, czyli czcionką stałopozycyjną i w ramce z tłem, wykorzystywany np. do prezentacji kodu programowania. W kodzie komórki można to zrobić dopiero od następnej linii kodu, ale z powodu podobnego tła i tak wygląd tekstu technicznego będzie słabo odróżnialny:

Przykład poza tabelą:
<syntaxhighlight lang="text">
to jest tekst techniczny
</syntaxhighlight>

Przykład w tabeli:
<syntaxhighlight lang="text">
{| class="wikitable"
| przykładowy tekst
 przykładowy tekst     <- tu jest tekst techniczny
przykładowy tekst
 przykładowy tekst     <- tu jest tekst techniczny
przykładowy tekst
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
| przykładowy tekst
 przykładowy tekst
przykładowy tekst
 przykładowy tekst
przykładowy tekst
|}

=== Problemy z innymi znakami ===
Poniższe zestawienie pokazuje, że warto wstawiać spacje w kodzie:
{| class="wikitable"
| &#124;+
| znacznik tytułu tabeli
|-
| &#124; +
| na początku komórki wyświetla symbol dodawania
|-
|colspan=2 style="border-right-color: White; border-left-color: White; background: White"|
|-
| &#124;-
| znacznik początku wiersza
|-
| &#124; -
| na początku komórki wyświetla dywiz
|-
|colspan=2 style="border-right-color: White; border-left-color: White; background: White"|
|-
| &#124;#
| ma działanie podczas sortowania
|-
| &#124; #
| na początku komórki wyświetla kratkę (hash)
|-
|colspan=2 style="border-right-color: White; border-left-color: White; background: White"|
|-
| &#124;}
| zamyka tabelę
|-
| &#124; }
| na początku komórki wyświetla prawą klamrę
|}

Powyższe znaki, jak również kilka innych, potrafią czasami „namieszać” w kodzie tabeli (lub w kodzie artykułu). Warto znać ich zamienniki w postaci encji HTML. Poniżej wszystkie znaki ze zbioru ASCII inne niż spacja, cyfry i litery (bo nie wiadomo, co jeszcze w przyszłości przyjdzie programistom do głowy).

Szczególnie przydatne mogą okazać się zamienniki wykrzyknika i pałki, gdy będzie trzeba je wstawić na początku lub końcu treści komórki.
{| style="margin-top:-1ex; margin-bottom:-1ex"
|style="vertical-align: top"|
{| class="wikitable"
|style="border: solid 4px Red"| &amp;#33; || &amp;#x021; || !
|-
| &amp;#34; || &amp;#x22; || "
|-
| &amp;#35; || &amp;#x23; || #
|-
| &amp;#36; || &amp;#x24; || $
|-
| &amp;#37; || &amp;#x25; || %
|-
| &amp;#38; || &amp;#x26; || &amp;
|-
| &amp;#39; || &amp;#x27; || '
|}
| &nbsp;
|style="vertical-align: top"|
{| class="wikitable"
| &amp;#40; || &amp;#x28; || (
|-
| &amp;#41; || &amp;#x29; || )
|-
| &amp;#42; || &amp;#x2A; || *
|-
| &amp;#43; || &amp;#x2B; || +
|-
| &amp;#44; || &amp;#x2C; || ,
|-
| &amp;#45; || &amp;#x2D; || -
|-
| &amp;#46; || &amp;#x2E; || .
|-
| &amp;#47; || &amp;#x2F; || /
|}
| &nbsp;
|style="vertical-align: top"|
{| class="wikitable"
| &amp;#58; || &amp;#x3A; || :
|-
| &amp;#59; || &amp;#x3B; || ;
|-
| &amp;#60; || &amp;#x3C; || <
|-
| &amp;#61; || &amp;#x3D; || =
|-
| &amp;#62; || &amp;#x3E; || >
|-
| &amp;#63; || &amp;#x3F; || ?
|-
| &amp;#64; || &amp;#x40; || @
|}
| &nbsp;
|style="vertical-align: top"|
{| class="wikitable"
| &amp;#91; || &amp;#x5B; || [
|-
| &amp;#92; || &amp;#x5C; || \
|-
| &amp;#93; || &amp;#x5D; || ]
|-
| &amp;#94; || &amp;#x5E; || ^
|-
| &amp;#95; || &amp;#x5F; || _
|-
| &amp;#96; || &amp;#x60; || `
|}
| &nbsp;
|style="vertical-align: top"|
{| class="wikitable"
| &amp;#123; || &amp;#x7B; || {
|-
|style="border: solid 4px Red"| &amp;#124; || &amp;#x7C; || &#124;
|-
| &amp;#125; || &amp;#x7D; || }
|-
| &amp;#126; || &amp;#x7E; || ~
|}
|}

Niektóre z powyższych znaków mają również bardziej mnemoniczne wersje encji:
{| class="wikitable"
|&amp;quot; || &quot;
|-
|&amp;amp; || &amp;
|-
|&amp;apos; || &apos;
|-
|&amp;lt; || &lt;
|-
|&amp;gt; || &gt;
|}

== Tytuł tabeli ==
; 1. Tytuł tabeli – składnia
<!-- początek ramki sekcji -->{| style="background:Wheat; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Jeżeli chcemy, aby nad tabelą pojawił się jej tytuł, używamy kodu <code>|+</code>, np.:
<syntaxhighlight lang="text">
{| class="wikitable"
|+ Tytuł tabeli. Pojawia się bez ramki nad tabelą i jest wyśrodkowany
! Nagłówek A || Nagłówek B
|-
| Komórka 1A || Komórka 1B
|-
| Komórka 2A || Komórka 2B
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
|+ Tytuł tabeli. Pojawia się bez ramki nad tabelą i jest wyśrodkowany
! Nagłówek A || Nagłówek B
|-
| Komórka 1A || Komórka 1B
|-
| Komórka 2A || Komórka 2B
|}

* Jak widać, szerokość tytułu mieści się w szerokości tabeli, a ewentualny nadmiar tekstu ulega przełamaniu do następnych wierszy.
* Jak widać, pominięto pierwszy znacznik początku wiersza (gdy nie ma przy nim polecenia, jest zbędny).
* Tytułu tabeli używa się niezbyt często, zazwyczaj wiadomo o co chodzi z treści komórek nagłówka. Nie ma jednak przeciwwskazań do stosowania tytułu tabeli.
* Znacznik tytułu tabeli powinien być umieszczony w kodzie tabeli w drugiej linii. Co prawda można linię kodu z tym znacznikiem umieścić w innym miejscu – nad lub pod znacznikiem nowego wiersza, a nawet przed końcem tabeli, ale byłoby to robienie bałaganu w składni.
* Linia kodu tylko z samym znacznikiem tytułu tabeli, ale bez treści, nie wyświetla się i nie generuje odstępu. Jest balastem w kodzie i można ją usunąć.
* W przypadku omyłkowego wstawienia dwóch (lub więcej) linii kodu z tytułem tabeli, wyświetlana będzie zawartość pierwszej.
* Komórce tytułu można nadawać wszystkie atrybuty koloru i obramowania.
* Można zmieniać prawie wszystkie atrybuty tekstu, ale...
** Nie da się zlikwidować pogrubienia. Można co najwyżej zmienić bold na bold italic. 
* Istnieje możliwość ułożenia tytułu tabeli pod tabelą: <code>|+ style="caption-side:bottom"| Tytuł tabeli na dole</code>. Pozostałe możliwości, czyli z lewej lub prawej, są niestandardowe (wspiera tylko Firefox), a więc nie należy ich używać.

<!-- koniec ramki sekcji -->|}

== Komórki nagłówka i zwykłe ==
; 1. Składnia
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Wiersz 1: Nie ma czegoś takiego jak specjalne „wiersze nagłówkowe”. Wystarczy, że komórka nagłówka będzie stać jako pierwsza w linii kodu, a wszystkie komórki zwykłe stojące za nią w tej samej linii kodu też są wyświetlane jako nagłówkowe.
* Wiersz 2: Alternatywnie można wszystkie następne komórki nagłówka w tej samej linii kodu rozpocząć parą znaków <code>!!</code>.
* Wiersz 3: Gdy linia kodu zaczyna się komórką nagłówka, to para znaków <code>!!</code> w tylko niektórych kolejnych komórkach w linii kodu nic nie zmieni (np. 3C), mamy jednak bałagan składniowy.
* Wiersz 4, 5, 6 i 7: W dalszych komórkach kombinacje znaków (<code>!|</code> lub <code>|!</code>) powodują błędy,
* Wiersz 8: Próba wstawienia komórki nagłówka po komórce zwykłej – w tej samej linii kodu – też powoduje błąd.
{|
|- style="vertical-align:top"
|
{| class="wikitable"
! 1A || 1B || 1C || 1D
|-
! 2A !! 2B !! 2C !! 2D
|-
! 3A || 3B !! 3C || 3D
|-
! 4A || 4B !| 4C || 4D
|-
! 5A || 5B |! 5C || 5D
|-
| 6A || 6B !| 6C || 6D
|-
| 7A || 7B |! 7C || 7D
|-
| 8A || 8B !! 8C || 8D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 1A || 1B || 1C || 1D
|-
! 2A !! 2B !! 2C !! 2D
|-
! 3A || 3B !! 3C || 3D
|-
! 4A || 4B !| 4C || 4D
|-
! 5A || 5B |! 5C || 5D
|-
| 6A || 6B !| 6C || 6D
|-
| 7A || 7B |! 7C || 7D
|-
| 8A || 8B !! 8C || 8D
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 2. Mieszanie komórek zwykłych i nagłówka
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Aby kolejne komórki w tym samym wierszu tabeli zmienić z nagłówkowych na zwykłe (lub w drugą stronę), trzeba nimi rozpocząć nową linię kodu:
{|
|- style="vertical-align:top"
|
{| class="wikitable"
! 1A || 1B
| 1C
! 1D || 1E
|-
| 2A || 2B || 2C || 2D || 2E
|-
| 3A || 3B
! 3C || 3D || 3E
|-
| 4A || 4B || 4C || 4D || 4E
|-
! 5A
| 5B
! 5C
| 5D
! 5E
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 1A || 1B
| 1C
! 1D || 1E
|-
| 2A || 2B || 2C || 2D || 2E
|-
| 3A || 3B
! 3C || 3D || 3E
|-
| 4A || 4B || 4C || 4D || 4E
|-
! 5A
| 5B
! 5C
| 5D
! 5E
|}
</syntaxhighlight>
|}

* W sposób opisany powyżej konstruuje się tzw. lewy (lub prawy) boczek tabeli:
{|
|- style="vertical-align:top"
|
{| class="wikitable"
! 1A || 1B || 1C || 1D
|-
! 2A
| 2B || 2C || 2D
|-
! 3A
| 3B || 3C || 3D
|-
! 4A
| 4B || 4C || 4D
|}
{| class="wikitable"
! 1A || 1B || 1C || 1D
|-
| 2A || 2B || 2C
! 2D
|-
| 3A || 3B || 3C
! 3D
|-
| 4A || 4B || 4C
! 4D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 1A || 1B || 1C || 1D
|-
! 2A
| 2B || 2C || 2D
|-
! 3A
| 3B || 3C || 3D
|-
! 4A
| 4B || 4C || 4D
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 1A || 1B || 1C || 1D
|-
| 2A || 2B || 2C
! 2D
|-
| 3A || 3B || 3C
! 3D
|-
| 4A || 4B || 4C
! 4D
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 3. Wstawianie poleceń
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px 10px; width:1000px"
|<!-- aż dotąd -->
Poniżej przykłady dla pierwszej i którejś z kolejnych komórek w wierszu – w każdej parze wiersz bez poleceń i z poleceniami:<br />
a) komórki nagłówka – tyko jeden wykrzyknik na początku,<br />
b) komórki nagłówka – zapis równoważny – wszędzie wykrzykniki,<br />
c) komórki zwykłe,<br />
* na końcu polecenia zawsze stoi znak pałki, nigdy wykrzyknika.
<syntaxhighlight lang="text">
a)  ! 1A || 1B || 1C || 1D
    !width=100| 1A || 1B ||width=100| 1C || 1D

b)  ! 2A !! 2B !! 2C !! 2D
    !width=100| 2A !! 2B !!width=100| 2C !! 2D

c)  | 3A || 3B || 3C || 3D
    |width=100| 3A || 3B ||width=100| 3C || 3D
</syntaxhighlight>
<!-- koniec ramki sekcji -->|}

== Komórki puste lub brakujące ==
; 1. Różnica pomiędzy pustymi i brakującymi
<!-- początek ramki sekcji -->{| style="background: MistyRose; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Komórki puste – komórki zdefiniowane w kodzie, ale pozbawione treści.
* Komórki brakujące – komórki na końcu wiersza, których zdefiniowanie pominięto.
{| class="wikitable"
!colspan=3| Z treścią ||colspan=3| Puste ||colspan=3| Brakujące
|-
! 01A || 01B || 01C || 01D || 01E || 01F || 01G || 01H || 01I
|-
! 02A || 02B || 02C || || ||
|-
| 1A || 1B || 1C || || ||
|-
| 2A || 2B || 2C || || ||
|}
<!-- koniec ramki sekcji -->|}

; 2. Puste komórki
<!-- początek ramki sekcji -->{| style="background:MistyRose; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Komórki pozbawione treści można definiować na dwa sposoby: we wspólnej linii kodu lub w oddzielnych liniach. Jak widać, pałka lub wykrzyknik jako jedyny znak w linii kodu wystarcza, aby komórka się wyświetliła:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
! 1A || || 1C
|-
| 2A || 2B ||
|-
| || || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 1A
!
! 1C
|-
| 2A
| 2B
|
|-
|
|
| 3C
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 1A || || 1C
|-
| 2A || 2B ||
|-
| || || 3C
|}
</syntaxhighlight>
|}

W przypadku pustych komórek definiowanych obok siebie w jednej linii kodu – można wstawiać znaki pałki na styk, jednak dla przejrzystości kodu lepiej dodawać spacje w miejscach przeznaczonych na treść (samotne spacje i tak są pomijane przez program, można to sprawdzić, zaznaczając wyświetloną poniżej tabelę):
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
| 1A || 1B || 1C || 1D || 1E || 1F
|-
||||||| 2D |||| 2F
|-
| || || || 3D || || 3F
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| 1A || 1B || 1C || 1D || 1E || 1F
|-
||||||| 2D |||| 2F       <- gorzej
|-
| || || || 3D || || 3F   <- lepiej
|}
</syntaxhighlight>
|}

Krawędzie sąsiadujących pustych komórek można ukryć poprzez [[#Scalanie komórek|scalanie komórek]].
<!-- koniec ramki sekcji -->|}

; 3. Pusty wiersz lub pusta kolumna
<!-- początek ramki sekcji -->{| style="background:MistyRose; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Wiersz zawierający tylko puste komórki jest bardzo niski.
* Kolumna zawierająca tylko puste komórki jest bardzo wąska.

W obu powyższych przypadkach brak jakiegokolwiek znaku choćby w jednej komórce powoduje, że działa tylko sam domyślny padding (szerokość .4em, wysokość .2em). Wstawienie jednej lub więcej samotnych spacji nic nie zmieni (oprogramowanie tego nie zauważy). Dopiero wstawienie niewidocznego znaku encji twardej spacji „&amp;nbsp;” spowoduje, że oprogramowanie zobaczy, że komórka już nie jest pusta.

Sprawę rozwiązuje wstawienie do jednej z komórek (najlepiej do pierwszej w szeregu):
* w przypadku wiersza – jednej encji twardej spacji <code>&amp;nbsp;</code>,
* w przypadku kolumny – czterech encji twardej spacji <code>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</code>.

Poniżej przykład dla wiersza pustych komórek:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
| 1A || 1B || 1C
|-
| || ||
|-
| &nbsp; || ||
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| 1A
| 1B
| 1C
|-
|
|
|
|-
| &nbsp;
|
|
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| 1A || 1B || 1C
|-
| || ||
|-
| &nbsp; || ||
|}
</syntaxhighlight>
|}

Poniżej przykład dla kolumny pustych komórek:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
| 1A || || &nbsp;&nbsp;&nbsp;&nbsp; || 1D
|-
| 2A || || || 2D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| 1A
|
| &nbsp;&nbsp;&nbsp;&nbsp;
| 1D
|-
| 2A
|
|
| 2D
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| 1A || || &nbsp;&nbsp;&nbsp;&nbsp; || 1D
|-
| 2A || || || 2D
|}
</syntaxhighlight>
|}

Obecność encji możemy zauważyć, gdy zaznaczymy tabelę.

Problem zbyt małej szerokości lub wysokości można rozwiązać też innymi metodami, np. poleceniami <code>padding</code> lub <code>height</code>, ale użycie encji jest najłatwiejsze, najbezpieczniejsze i najłatwiej zrozumiane przez innych edytujących.
<!-- koniec ramki sekcji -->|}

; 4. Brakujące komórki
<!-- początek ramki sekcji -->{| style="background:MistyRose; border:solid 1px; margin-bottom:1em; padding:0px 10px 10px; width:1000px"
|<!-- aż dotąd -->
Można pominąć zdefiniowanie niektórych komórek, ale tylko na prawym końcu wiersza tabeli. Zazwyczaj wygląda to niezbyt estetycznie, ale czasami autorzy znajdują uzasadnienie dla takiego rozwiązania.
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C
|-
| 1A
|-
| 2A || 2B
|-
| 3A || 3B || 3C || 3D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 01A
! 01B
! 01C
|-
| 1A
|-
| 2A
| 2B
|-
| 3A
| 3B
| 3C
| 3D
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! 01A || 01B || 01C
|-
| 1A
|-
| 2A || 2B
|-
| 3A || 3B || 3C || 3D
|}
</syntaxhighlight>
|}

Uwaga: w zależności od przeglądarki, fragment obramowania tabeli może zniknąć w miejscu brakujących komórek (np. Firefox wyświetla, Chrome wycina).

Po uzupełnieniu brakujących komórek z powyższego układu, wygląda to tak:
{| class="wikitable"
! 01A || 01B || 01C ||
|-
| 1A || || ||
|-
| 2A || 2B || ||
|-
| 3A || 3B || 3C || 3D
|}

Nie da się zrobić całego wiersza brakujących komórek poprzez zdublowanie samego znacznika początku wiersza. Poniższy układ nie zadziała, drugi znacznik nowego wiersza (jako ostatni) będzie ważny dla programu, wcześniejszy to balast. Całej brakującej kolumny nie da się zrobić tym bardziej. Ale po co? Wystarczy jedna pusta kolumna lub wiersz przez całą wysokość lub szerokość tabeli. Można co najwyżej na styku kolumny i wiersza (dla symulacji) nadpisać w pustej komórce krawędzie kolorem tła lub stylem obramowania „hidden” (opisane w sekcji o [[#Scalanie komórek|scalaniu]]).
<syntaxhighlight lang="text">
| komórka
|-           <- balast (można usunąć)
|-           <- znacznik ważny dla programu
| komórka
</syntaxhighlight>
<!-- koniec ramki sekcji -->|}

; 5. Puste i brakujące – inna metoda
<!-- początek ramki sekcji -->{| style="background:MistyRose; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Puste komórki można też ukryć, tzn. ukryć ich obramowanie, ale tylko w tabeli z rozsuniętymi komórkami:
* polecenie <code>empty-cells: hide</code> działa tylko z <code>border-collapse: separate</code>,
** zestaw powyższych poleceń działa tylko na całą tabelę,
* ukryto tylko: 01C, 1A, 2C, 3A i 3B, natomiast 1C i 1D to komórki brakujące.
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable" style="border-collapse: separate; empty-cells: hide"
! 01A || 01B || || 01D
|-
| || 1B
|-
| 2A || 2B || || 2D
|-
| || || 3C || 3D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="border-collapse: separate; empty-cells: hide"
! 01A || 01B || || 01D
|-
| || 1B
|-
| 2A || 2B || || 2D
|-
| || || 3C || 3D
|}
</syntaxhighlight>
|}

Teraz można ten niewielki domyślny odstęp powiększyć, dodając polecenie <code>border-spacing</code>:<br />
<code>{| class="wikitable" style="border-collapse: separate; border-spacing: 1ex; empty-cells: hide"</code>

...wybranym komórkom, np. ze strzałkami, ukryć obramowanie:<br />
<code>|style="border-style:hidden"| →</code>

...komórkom ze strzałkami w dół dodatkowo dać padding na zero i wyrównywanie w poziomie:<br />
<code>|style="border-style:hidden; padding:0; text-align:center"| ↓</code>

by uzyskać coś takiego:
{| class="wikitable" style="border-collapse:separate; border-spacing:1ex; empty-cells:hide"
| 1A ||style="border-style:hidden"| → || 1B
|-
|style="border-style:hidden; padding:0; text-align:center"| ↓ || ||style="border-style:hidden; padding:0; text-align:center"| ↓
|-
| 2A ||style="border-style:hidden"| → || 2B
|}
<!-- koniec ramki sekcji -->|}

== Scalanie komórek ==
; 1. Scalanie komórek – zasada działania
<!-- początek ramki sekcji -->{| style="background:LightYellow; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Kilka sąsiednich komórek tabeli (w pionie lub poziomie) można wyświetlić jako jedną wspólną komórkę. Czynność taka nazywana jest scalaniem lub łączeniem komórek. Pomimo że obu nazw używa się powszechnie, z technicznego punktu widzenia są to określenia mylące. W rzeczywistości pierwsza komórka w grupie (górna lub lewa) jest powiększana (rozciągana) w ten sposób, że zajmuje również miejsce sąsiednich komórek. W związku z tym zasłonięte komórki trzeba usunąć z kodu tabeli. Nieusunięcie ich skutkuje błędem przesunięcia reszty komórek w prawo lub na dół.
{| class=wikitable
|colspan=3| 1 (colspan=3) || 2(?) || 3(?) || &nbsp;4&nbsp; || &nbsp;5&nbsp;
|- align=center
| 1 || 2 || 3 || 4 || 5
|}
Angielskie słowo {{K|en|span}} znaczy po polsku „zakres, rozpiętość, rozciąganie”, co może pomóc w rozumieniu działania polecenia.
<!-- koniec ramki sekcji -->|}

; 2. Scalanie w pionie – polecenie „rowspan”
<!-- początek ramki sekcji -->{| style="background:LightYellow; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Poniżej fragment kodu ze scaleniem 3 komórek w pionie.<br />Jak widać, podczas scalania usunięto z kodu komórki 3 i 4:
 <nowiki>przed scaleniem:      po scaleniu:

 | Komórka 1           | Komórka 1
 |-                    |-
 | Komórka 2           |rowspan=3| Komórka 2
 |-                    |-
 | </nowiki><span style="color: Red">Komórka 3</span><nowiki>           | Komórka 5
 |-
 | </nowiki><span style="color: Red">Komórka 4</span><nowiki>
 |-
 | Komórka 5</nowiki>

Przykład całej tabeli z 2 komórkami scalonymi w pionie (usunięto komórkę 2B):
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
<syntaxhighlight lang="text">
{| class="wikitable"
| Komórka 1A
|rowspan=2| Komórka 1B
| Komórka 1C
|-
| Komórka 2A
| Komórka 2C
|-
| Komórka 3A
| Komórka 3B
| Komórka 3C
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| Komórka 1A ||rowspan=2| Komórka 1B || Komórka 1C
|-
| Komórka 2A || Komórka 2C
|-
| Komórka 3A || Komórka 3B || Komórka 3C
|}
</syntaxhighlight>
|}

...co daje:
{| class="wikitable"
| Komórka 1A
|rowspan=2| Komórka 1B
| Komórka 1C
|-
| Komórka 2A
| Komórka 2C
|-
| Komórka 3A
| Komórka 3B
| Komórka 3C
|}
<!-- koniec ramki sekcji -->|}

; 3. Scalanie w poziomie – polecenie „colspan”
<!-- początek ramki sekcji -->{| style="background:LightYellow; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Poniżej fragment kodu ze scaleniem 3 komórek w poziomie.<br />Jak widać, podczas scalania usunięto z kodu komórki 3 i 4:
<syntaxhighlight lang="text">
przed scaleniem:      po scaleniu:

| Komórka 1           | Komórka 1
| Komórka 2           |colspan=3| Komórka 2
| Komórka 3           | Komórka 5
| Komórka 4
| Komórka 5
</syntaxhighlight>

Przykład całej tabeli z 2 komórkami scalonymi w poziomie:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
<syntaxhighlight lang="text">
{| class="wikitable"
| Komórka 1A
| Komórka 1B
| Komórka 1C
| Komórka 1D
|-
| Komórka 2A
|colspan=2| Komórka 2B
| Komórka 2D
|-
| Komórka 3A
| Komórka 3B
| Komórka 3C
| Komórka 3D
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
| Komórka 1A || Komórka 1B || Komórka 1C || Komórka 1D
|-
| Komórka 2A ||colspan=2| Komórka 2B || Komórka 2D
|-
| Komórka 3A || Komórka 3B || Komórka 3C || Komórka 3D
|}
</syntaxhighlight>
|}

...co daje:
{| class="wikitable"
| Komórka 1A
| Komórka 1B
| Komórka 1C
| Komórka 1D
|-
| Komórka 2A
|colspan=2| Komórka 2B
| Komórka 2D
|-
| Komórka 3A
| Komórka 3B
| Komórka 3C
| Komórka 3D
|}
<!-- koniec ramki sekcji -->|}

; 4. Scalanie w pionie i poziomie – jednocześnie
<!-- początek ramki sekcji -->{| style="background:LightYellow; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Ten sam zakres komórek można opatrzyć jednocześnie oboma poleceniami scalania. W efekcie nowo powstała komórka będzie rozciągnięta w obu kierunkach.

W poniższym przykładzie podczas scalania usunięto komórki 1B, 1C oraz 2A, 2B i 2C:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|colspan=3 rowspan=2| 1A || 1D || 1E
|-
| 2D || 2E
|-
| 3A || 3B || 3C || 3D || 3E
|-
| 4A || 4B || 4C || 4D || 4E
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
|colspan=3 rowspan=2| 1A || 1D || 1E
|-
| 2D || 2E
|-
| 3A || 3B || 3C || 3D || 3E
|-
| 4A || 4B || 4C || 4D || 4E
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 5. Scalanie kształtów innych niż prostokątne
<!-- początek ramki sekcji -->{| style="background:LightYellow; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Scalenie grupy komórek o innym kształcie niż prostokąt jest niemożliwe, ale można zasymulować taki kształt, nadając wybranym krawędziom wartość „hidden”, czyli ukrywając je. Komórki te nadal nie będą scalone, więc wypełnienie ich treścią będzie utrudnione, ale można też zostawić je puste.

<syntaxhighlight lang="text" style="font-size: 90%">
{| class="wikitable"
|-
| 1A || 1B || 1C || 1D || 1E
|-
| 2A ||style="border-bottom: hidden; border-right: hidden"| ||colspan=2| || 2E
|-
| 3A ||rowspan=2| || 3C || 3D || 3E
|-
| 4A || 4C || 4D || 4E
|-
| 5A || 5B || 5C || 5D || 5E
|}
</syntaxhighlight>

...co daje:
{| style="margin-top:-1ex"
|
{| class="wikitable"
|-
| 1A || 1B || 1C || 1D || 1E
|-
| 2A ||style="border-bottom: solid 4px Red; border-right: solid 4px Red"| <span style="color: Red">2B</span> ||colspan=2 align=center| <span style="color: Red">2C</span> || 2E
|-
| 3A ||rowspan=2| <span style="color: Red">3B</span> || 3C || 3D || 3E
|-
| 4A || 4C || 4D || 4E
|-
| 5A || 5B || 5C || 5D || 5E
|}
|style="padding-left:1em"|
{| class="wikitable"
|-
| 1A || 1B || 1C || 1D || 1E
|-
| 2A ||style="border-bottom: hidden; border-right: hidden"| ↓→ ||colspan=2| || 2E
|-
| 3A ||rowspan=2| || 3C || 3D || 3E
|-
| 4A || 4C || 4D || 4E
|-
| 5A || 5B || 5C || 5D || 5E
|}
|}

Więcej przykładów nietypowych kształtów znajduje się na końcu podstrony: [[Pomoc:Tabele (scalanie)]].
<!-- koniec ramki sekcji -->|}

; 6. Inne przykłady
<!-- początek ramki sekcji -->{| style="background:LightYellow; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
1) Scalenie wielopoziomowych nagłówków:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
!colspan=4| 01A ||colspan=4| 01E
|-
!colspan=2| 02A ||colspan=2| 02C ||colspan=2| 02E ||colspan=2| 02G
|-
! 03A || 03B || 03C || 03D || 03E || 03F || 03G || 03H
|-
| 1A || 1B || 1C || 1D || 1E || 1F || 1G || 1H
|-
| 2A || 2B || 2C || 2D || 2E || 2F || 2G || 2H
|-
| 3A || 3B || 3C || 3D || 3E || 3F || 3G || 3H
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text" style="font-size: 90%">
{| class="wikitable"
!colspan=4| 01A ||colspan=4| 01E
|-
!colspan=2| 02A ||colspan=2| 02C ||colspan=2| 02E ||colspan=2| 02G
|-
! 03A || 03B || 03C || 03D || 03E || 03F || 03G || 03H
|-
| 1A || 1B || 1C || 1D || 1E || 1F || 1G || 1H
|-
| 2A || 2B || 2C || 2D || 2E || 2F || 2G || 2H
|-
| 3A || 3B || 3C || 3D || 3E || 3F || 3G || 3H
|}
</syntaxhighlight>
|}

2) Struktura hierarchiczna, licząc od lewej strony:
{| style="margin-top:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C || 01D || 01E || 01F
|-
|rowspan=8| 1A ||rowspan=4| 1B ||rowspan=2| 1C || 1D || 1E || 1F
|-
| 2D || 2E || 2F
|-
|rowspan=2| 3C || 3D || 3E || 3F
|-
| 4D || 4E || 4F
|-
|rowspan=4| 5B ||rowspan=2| 5C || 5D || 5E || 5F
|-
| 6D || 6E || 6F
|-
|rowspan=2| 7C || 7D || 7E || 7F
|-
| 8D || 8E || 8F
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text" style="font-size: 90%">
{| class="wikitable"
! 01A || 01B || 01C || 01D || 01E || 01F
|-
|rowspan=8| 1A ||rowspan=4| 1B ||rowspan=2| 1C || 1D || 1E || 1F
|-
| 2D || 2E || 2F
|-
|rowspan=2| 3C || 3D || 3E || 3F
|-
| 4D || 4E || 4F
|-
|rowspan=4| 5B ||rowspan=2| 5C || 5D || 5E || 5F
|-
| 6D || 6E || 6F
|-
|rowspan=2| 7C || 7D || 7E || 7F
|-
| 8D || 8E || 8F
|}
</syntaxhighlight>
|}

Więcej przykładów znajduje się na podstronie: [[Pomoc:Tabele (scalanie)]].
<!-- koniec ramki sekcji -->|}

== Marginesy (wewnętrzne i zewnętrzne)==
; 1. Marginesy – składnia
<!-- początek ramki sekcji -->{| style="background:Moccasin; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Marginesy to odstępy na zewnątrz lub do wewnątrz obramowania. Można je traktować jak odpychanie.
* Można odpychać od wszystkich krawędzi obramowania lub tylko od wybranej:
{| class="wikitable"
! Margin<br />(na zewnątrz)
! Padding<br />(do wewnątrz)
|-
| '''zbiorczo:'''<br />style="margin: wartość"<br />
'''indywidualnie:'''<br />style="margin-top: wartość"<br />
style="margin-right: wartość"<br />
style="margin-bottom: wartość"<br />
style="margin-left: wartość"
| '''zbiorczo:'''<br />style="padding: wartość"<br />
'''indywidualnie:'''<br />style="padding-top: wartość"<br />
style="padding-right: wartość"<br />
style="padding-bottom: wartość"<br />
style="padding-left: wartość"
|}

'''W poleceniach zbiorczych można podawać:'''
* tę samą wartość w każdym kierunku,
* dwie pary wartości, kolejno: pion, poziom,
* trzy wartości zgodnie ze wskazówkami zegara: góra, prawo (i lewo), dół,
* cztery wartości zgodnie ze wskazówkami zegara: góra, prawo, dół, lewo:
 style="parametr: wartość"
 style="parametr: wartość1 wartość2"
 style="parametr: wartość1 wartość2 wartość3"
 style="parametr: wartość1 wartość2 wartość3 wartość4"

Poniżej przykłady dla „margin”, ale dotyczą też „padding”.

Przykład dla 4 różnych wartości:
 style="margin: 6px 20px 4px 10px"

Warto jednak zauważyć, że:
 style="margin: 20px"                 <- to samo
 style="margin: 20px 20px"            <- to samo
 style="margin: 20px 20px 20px"       <- to samo
 style="margin: 20px 20px 20px 20px"  <- to samo

Tak samo w parach pion-poziom:
 style="margin: 5px 10px"           <- to samo
 style="margin: 5px 10px 5px"       <- to samo
 style="margin: 5px 10px 5px 10px"  <- to samo

Istnieje jednak różnica pomiędzy podawaniem zera i podawaniem jednego kierunku:
 style="margin-right: 20px"
 style="margin: 0 20px 0 0"

...w pierwszym przypadku nastąpi zmiana tylko przy prawej krawędzi z zachowaniem domyślnych wartości przy pozostałych krawędziach, w drugim domyślne wartości zostaną zmniejszone do zera.
<!-- koniec ramki sekcji -->|}

; 2. Co i jak można odpychać?
<!-- początek ramki sekcji -->{| style="background:Moccasin; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
{| class="wikitable" style="text-align:left"
! Znacznik || Parametr
|-
|align=left| Po znaczniku początku tabeli || margin<sup>*</sup>
|-
|align=left| Po znaczniku tytułu || margin i padding
|-
|align=left| Po znaczniku komórki nagłówka lub zwykłej || padding
|-
|colspan=2|
|-
|align=left| Po znaczniku początku wiersza ||colspan=2| ''nie dotyczy''
|}
<sup>*</sup> Zobacz uwaga na końcu ramki.

...ponadto:
{| class="wikitable"
| margin || wartości ujemne i/lub dodatnie
|-
| padding || tylko wartości dodatnie
|}

'''Wartości domyślne:'''
{| class="wikitable"
!colspan=3| Wikitabela
|-
| Tabela || style="margin: 1em 0 1em 0" || style="margin: 1em 0"
|-
| Tytuł tabeli || style="margin: 0 0 0 0; padding: 0 0 0 0" || style="margin: 0; padding: 0"
|-
| Komórka nagłówka i zwykła || style="padding: .2em .4em .2em .4em" || style="padding: .2em .4em"
|-
!colspan=3| Tabela niesformatowana
|-
| Tabela || style="margin: 0 0 0 0" || style="margin: 0"
|-
| Tytuł tabeli || style="margin: 0 0 0 0; padding: 0 0 0 0" || style="margin: 0; padding: 0"
|-
| Komórka nagłówka i zwykła || style="padding: 1px 1px 1px 1px" || style="padding: 1px"
|}

{|
|style="vertical-align:top; text-align:center"| Tabela sformatowana<br />"margin: 1em 0"<br />(''domyślnie'')
  {| style="background:Cornsilk; border: dotted 3px"
  |style="padding:0"|
    {| class="wikitable"
    |+ Tytuł
    ! Nagłówek || Nagłówek
    |-
    | Komórka || Komórka
    |}
  |}
|style="vertical-align:top; text-align:center; padding-left:1em"| Tabela niesformatowana<br />"margin: 0"<br />(''domyślnie'')
  {| style="background:Cornsilk; border: dotted 3px"
  |style="padding:0"|
    {|
    |+ Tytuł
    ! Nagłówek || Nagłówek
    |-
    | Komórka || Komórka
    |}
  |}
|}

Co ciekawe, padding działa nawet na tabelę zawierającą tylko jedną pustą komórkę:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
|style="padding:20px"|
|}

{| class="wikitable"
|
|}
|style="padding-left: 20px"|
<syntaxhighlight lang="text">
{| class="wikitable"
|style="padding:20px"|
|}

{| class="wikitable"
|
|}
</syntaxhighlight>
|}

'''* Padding po znaczniku początku tabeli:'''<br />Tak naprawdę padding po znaczniku początku tabeli, czyli margines wewnętrzny obramowania tabeli, też jest możliwy (chodzi o ramkę samej tabeli bez obramowania komórek). Trzeba jednak użyć sztuczki w postaci dwóch pozornie sprzecznych poleceń – tabeli typu „separate” i ustawienia wartości tej separacji („border-spacing”) na zero, np.:
<syntaxhighlight lang="text">
{| class="wikitable" style="border-collapse:separate; border-spacing: 0; padding: 5px 10px 15px 30px"
</syntaxhighlight>

{| class="wikitable" style="border-collapse:separate; border-spacing: 0; padding: 5px 10px 15px 30px"
| 1A || 1B
|-
| 2A || 2B
|}

Rozwiązanie to ma jednak wadę – nie da się uzyskać tak cienkiego obrysu komórek, jak w normalnej wikitabeli – tutaj obrys będzie podwójny, bo krawędzie będą się stykać, a nie nachodzić na siebie.

Wikitabela ma parametr „border-collapse” domyślnie ustawiony na wartość „collapse”, natomiast tabela niesformatowana ma domyślnie wartość „separate”. Domyślna wartość „border-spacing” wynosi 2px.
<!-- koniec ramki sekcji -->|}

; 3. Marginesy – po znaczniku początku tabeli
<!-- początek ramki sekcji -->{| style="background:Moccasin; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
'''Przykłady powiększania odstępów:'''
* przed tabelą o wartość „1em”:
: <code>{| class="wikitable" style="margin-top: 1em"</code>
* przed tabelą o wartość „1em”, a po tabeli o „2em”:
: <code>{| class="wikitable" style="margin-top: 1em; margin-bottom: 2em"</code>
* przed i po tabeli o taką samą wartość, np. „1em”:
** metoda 1 (dwa parametry):
: <code>{| class="wikitable" style="margin-top: 1em; margin-bottom: 1em"</code>
:* metoda 2 (jeden parametr, dwie wartości):
: <code>{| class="wikitable" style="margin: 1em 0"</code>

powyżej w drugiej metodzie podano wartość jednocześnie dla góry i dołu („1em”), co wymusiło podanie do pary jakiejś wartości w poziomie, a domyślnie jest nią (dla tabeli w poziomie) zero.

Wartości można podawać w konkretnych jednostkach albo dać samo zero, ewentualnie zastosować wartość „auto”, która oblicza optymalne wartości dla odstępów poziomych, wyśrodkowując. Niestety wśród tych możliwości nie ma czegoś takiego jak „wartość domyślna”, którą chcielibyśmy zastąpić jedną z wartości w poleceniu zbiorczym. W takiej sytuacji trzeba skorzystać z wybranych poleceń indywidualnych.

'''Przykłady zmniejszania odstępów:'''
* przed tabelą o wartość „-1ex”:
: <code>{| class="wikitable" style="margin-top: -1ex"</code>

Powyżej podano wartość w jednostkach [ex], które są mniejsze od jednostek [em], a dokładnie jest to wysokość liter bez wydłużeń górnych ani dolnych. Taka wartość wydaje się bezpieczniejsza dla odstępu ujemnego, można też podać inaczej, np. [-.5em] albo [-8px]. Chodzi o to, by nie przesadzić ze zbliżeniem do sąsiadującego akapitu w artykule.

Poniżej przykład działania ujemnych marginesów. Aby było je widać, przykładowe tabele osadzono w jednokomórkowych tabelach nadrzędnych. Użyto kolejno poleceń:
 <nowiki>{|</nowiki>class="wikitable" <span style="color: Red">style="margin-top: -1em"</span>
 <nowiki>{|</nowiki>class="wikitable" <span style="color: Red">style="margin-bottom: -1em"</span>
 <nowiki>{|</nowiki>class="wikitable" <span style="color: Red">style="margin-left: -1em"</span>
 <nowiki>{|</nowiki>class="wikitable" <span style="color: Red">style="margin-right: -1em"</span>
{|
|
  {| class="wikitable"
  |
    {| class="wikitable" style="margin-top: -1em"
    ! Nagłówek A || Nagłówek B
    |-
    | Komórka A || Komórka B
    |}
  |}
| style="padding-left:1em"|
  {| class="wikitable"
  |
    {| class="wikitable" style="margin-bottom: -1em"
    ! Nagłówek A || Nagłówek B
    |-
    | Komórka A || Komórka B
    |}
  |}
|-
|
  {| class="wikitable"
  |
    {| class="wikitable" style="margin-left: -1em"
    ! Nagłówek A || Nagłówek B
    |-
    | Komórka A || Komórka B
    |}
  |}
| style="padding-left:1em"|
  {| class="wikitable"
  |
    {| class="wikitable" style="margin-right: -1em"
    ! Nagłówek A || Nagłówek B
    |-
    | Komórka A || Komórka B
    |}
  |}
|}

'''Uwaga:'''<br />W parametrze „margin” odstępy pionowe (ale tylko pionowe) nakładają się na siebie, a nie dodają (liczy się większy), np.:
: 1 i 0 → 1,
: 1 i 1 → 1,
: 1 i 2 → 2.

Powyższe działa także dla obu wartości niedodatnich, np.:
: -1 i &nbsp;0 → -1,
: -1 i -1 → -1,
: -1 i -2 → -2.

Jednak przy przeciwstawnych znakach wartości sumują się:
: -1 i &nbsp;1 → &nbsp;0,
: -1 i &nbsp;3 → &nbsp;2.
: &nbsp;1 i -3 → -2.

Nakładanie się na siebie odstępów pionowych „margin” ma znaczenie nie tylko przy ustawianiu sąsiadujących tabel w pionie, ale także na styku tabel z innymi elementami, czyli z treścią artykułu (np. z akapitami, obrazkami, nagłówkami czy infoboxami), bo one również mają zdefiniowany parametr „margin”.

'''Przykłady – odstępy poziome:'''
{| class="wikitable" style="float:left; width:150px; margin:0 0em 0 0"
| "margin-right: 0"
|}
{| class="wikitable" style="float:left; width:150px; margin:0 0 0 0em"
| "margin-left: 0"
|}
{{clear}}
{| class="wikitable" style="float:left; width:150px; margin:0 1em 0 0"
| "margin-right: 1em"
|}
{| class="wikitable" style="float:left; width:150px; margin:0 0 0 0em"
| "margin-left: 0"
|}
{{clear}}
{| class="wikitable" style="float:left; width:150px; margin:0 0em 0 0"
| "margin-right: 0"
|}
{| class="wikitable" style="float:left; width:150px; margin:0 0 0 1em"
| "margin-left: 1em"
|}
{{clear}}
{| class="wikitable" style="float:left; width:150px; margin:0 1em 0 0"
| "margin-right: 1em"
|}
{| class="wikitable" style="float:left; width:150px; margin:0 0 1em 1em"
| "margin-left: 1em"
|}
{{clear}}

'''Przykłady – odstępy pionowe:'''
{| style="margin:-1ex 0 0; padding:0"
|- style="vertical-align:top; text-align:center"
| -2em + 1em → -1em
  {| class="wikitable" style="margin: 1ex 0 -2em"
  | "margin-bottom: -2em"
  |}
  {| class="wikitable"
  | ''margin domyślnie''
  |}
| -1em + 1em → 0
  {| class="wikitable" style="margin: 1ex 0 -1em"
  | "margin-bottom: -1em"
  |}
  {| class="wikitable"
  | ''margin domyślnie''
  |}
| 0 + 1em → 1em
  {| class="wikitable" style="margin: 1ex 0 0em"
  | "margin-bottom: 0"
  |}
  {| class="wikitable"
  | ''margin domyślnie''
  |}
| 1em + 1em → 1em
  {| class="wikitable" style="margin: 1ex 0 1em"
  | "margin-bottom: 1em" (''domyślnie'')
  |}
  {| class="wikitable"
  | ''margin domyślnie''
  |}
| 2em + 1em → 2em
  {| class="wikitable" style="margin: 1ex 0 2em"
  | "margin-bottom: 2em"
  |}
  {| class="wikitable"
  | ''margin domyślnie''
  |}
|}
<!-- koniec ramki sekcji -->|}

; 4. Marginesy – osadzenie tabeli idealnie w komórce tabeli nadrzędnej
<!-- początek ramki sekcji -->{| style="background:Moccasin; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Tabela osadzona w komórce tabeli nadrzędnej jest wyświetlana z domyślnym marginesem własnym i domyślnym paddingiem komórki obejmującej:
{| class="wikitable"
|
  {| class="wikitable"
  ! Nagłówek A || Nagłówek B
  |-
  | Komórka A || Komórka B
  |}
|}

Aby tabelę osadzić idealnie w komórce tabeli nadrzędnej, trzeba wykonać 3 operacje:
* komórka nadrzędna – padding na zero,
* tabela osadzona – margin na zero i ukrycie jej obramowania (wartość: hidden)
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
  {| class="wikitable"
  | 1A || 1B || 1C
  |-
  | 2A
  |style="padding: 0"|
    {| class="wikitable" style="margin: 0; border-style: hidden"
    ! Nagłówek A || Nagłówek B
    |-
    | Komórka A || Komórka B
    |}
  | 2C
  |-
  | 3A || 3B || 3C
  |}
|style="padding-left: 1em"|
 <nowiki>{| class="wikitable"
| 1A || 1B || 1C
|-
| 2A
|</nowiki><span style="color: Red">style="padding: 0"</span><nowiki>|
{| class="wikitable" </nowiki><span style="color: Red">style="margin: 0; border-style: hidden"</span><nowiki>
! Nagłówek A || Nagłówek B
|-
| Komórka A || Komórka B
|}
| 2C
|-
| 3A || 3B || 3C
|}</nowiki>
|}
<!-- koniec ramki sekcji -->|}

; 5. Marginesy – po znaczniku tytułu
<!-- początek ramki sekcji -->{| style="background:Moccasin; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Tytuł tabeli jest jedynym miejscem, gdzie można użyć obu poleceń, co daje okazję do porównania ich działania.
* Kolorem i obrysem zaznaczono powierzchnię komórki.
* Użyto kolejno poleceń:
 <nowiki>|+</nowiki> style="background: Gold; border: solid 1px"| Tytuł Tytuł Tytuł Tytuł
 <nowiki>|+</nowiki> style="background: Gold; border: solid 1px; <span style="color: Red">margin:40px"</span>| Tytuł Tytuł Tytuł Tytuł
 <nowiki>|+</nowiki> style="background: Gold; border: solid 1px; <span style="color: Red">padding:40px"</span>| Tytuł Tytuł Tytuł Tytuł
 <nowiki>|+</nowiki> style="background: Gold; border: solid 1px; <span style="color: Red">margin:40px; padding:40px"</span>| Tytuł Tytuł Tytuł Tytuł

Jak widać poniżej, kontener z tytułem tabeli działa nietypowo, bo nie może wyjść poza szerokość tabeli, przez co „margin” spycha wszystko do środka:
{| class="wikitable" style="background: transparent"
!align=center| brak polecenia marginesu
!align=center| margin: 40px
!align=center| padding: 40px
!align=center| margin: 40px<br />padding: 40px
|- valign="top"
|
Akapit przed tabelą
{| class="wikitable"
|+ style="background: Gold; border: solid 1px"| Tytuł Tytuł Tytuł Tytuł
! Nagłówek A || Nagłówek B
|-
| Komórka 1A || Komórka 1B
|}
Akapit po tabeli
|
Akapit przed tabelą
{| class="wikitable"
|+ style="background: Gold; border: solid 1px; margin:40px"| Tytuł Tytuł Tytuł Tytuł
! Nagłówek A || Nagłówek B
|-
| Komórka 1A || Komórka 1B
|}
Akapit po tabeli
|
Akapit przed tabelą
{| class="wikitable"
|+ style="background: Gold; border: solid 1px; padding:40px"| Tytuł Tytuł Tytuł Tytuł
! Nagłówek A || Nagłówek B
|-
| Komórka 1A || Komórka 1B
|}
Akapit po tabeli
|
Akapit przed tabelą
{| class="wikitable"
|+ style="background: Gold; border: solid 1px; margin:40px; padding:40px"| Tytuł Tytuł Tytuł Tytuł
! Nagłówek A || Nagłówek B
|-
| Komórka 1A || Komórka 1B
|}
Akapit po tabeli
|}

A tak działa ujemny „margin” w tytule tabeli:
{| class="wikitable" align=center
|+ style="background: Gold; border: solid 1px; margin:0 -60px"| Tytuł Tytuł Tytuł Tytuł
! Nagłówek A
|-
| Komórka 1A
|}
<!-- koniec ramki sekcji -->|}

; 6. Marginesy – po znaczniku komórki
<!-- początek ramki sekcji -->{| style="background:Moccasin; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Padding działa tak samo w komórkach nagłówka i zwykłych.
* Powiększenie paddingu w jednej komórce wpływa oczywiście:
** w pionie na cały wiersz,
** w poziomie na całą kolumnę,
** nie ma jednak poleceń zbiorczych, tzn. żeby powiększyć padding w każdej komórce – trzeba to robić w każdej komórce indywidualnie (padding nie działa po znaczniku początku wiersza, a znacznik kolumny nawet nie istnieje).
* Komórki puste nie mają wysokości wiersza, za to własny bardzo mały padding, ale padding ten można regulować, a najlepiej wstawić encję twardej spacji, by pusta komórka zachowywała się jak normalna:
{|

|
{| class="wikitable" style="margin: 1ex"
|
|}
| <code><nowiki>|</nowiki></code>

|-
|
{| class="wikitable" style="margin: 1ex"
| &nbsp;
|}
| <code><nowiki>|</nowiki> &amp;nbsp;</code>

|-
|
{| class="wikitable" style="margin: 1ex"
|style="padding: 20px"|
|}
| <code><nowiki>|style="padding: 20px"|</nowiki></code>

|-
|
{| class="wikitable" style="margin: 1ex"
|style="padding: 20px"| &nbsp;
|}
| <code><nowiki>|style="padding: 20px"| &amp;nbsp;</nowiki></code>

|-
|style="padding-right:1em"|
{| class="wikitable" style="margin: 1ex"
|style="padding: 20px"| tekst
|}
| <code><nowiki>|style="padding: 20px"| tekst</nowiki></code>

|}

I jeszcze jedno zestawienie:
{|
|align="right"| <code><nowiki>"padding: 0"</nowiki></code>
|
{| class="wikitable" style="margin: .5ex"
|style="padding:0"| tekst
|}
|
{| class="wikitable" style="margin: .5ex"
|style="padding-top:0; padding-bottom:0"| tekst
|}
| <code><nowiki>"padding-top: 0; padding-bottom: 0"</nowiki></code>
|-
| <code><nowiki>"padding-left: 0; padding-right: 0"</nowiki></code>
|
{| class="wikitable" style="margin: .5ex"
|style="padding-left:0; padding-right:0"| tekst
|}
|
{| class="wikitable" style="margin: .5ex"
|style="padding: .2em .4em"| tekst
|}
| <code><nowiki>"padding: .2em .4em"</nowiki></code> (domyślne)
|}

<!-- koniec ramki sekcji -->|}

== Wyrównywanie i oblewanie tabeli ==
; 1. Wyrównanie tabeli do lewej
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Wyrównanie do lewej – bez oblewania&#58;
* Jest to ustawienie domyślne.
{| style="border-collapse:collapse"
|
  {| class="wikitable" style="width:160px; background:white; margin:4px 0"
  | Akapit przed tabelą.
    {| class="wikitable"
    | Tabela
    |}
Akapit po tabeli.
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
</syntaxhighlight>
|}

; Wyrównanie do lewej – z oblewaniem&#58;
* Robią to polecenia <code>style="float: left"</code> lub skrócone <code>align=left</code>.
* Dodano odstęp „1em” z prawej, aby tekst nie dotykał tabeli.
{| style="border-collapse:collapse"
|
  {| class="wikitable" style="width:160px; background:white; margin:4px 0"
   | Akapit przed tabelą: abc abc abc abc.
    {| class="wikitable" style="float: left; margin-right: 1em"
    | Tabela
    |}
Akapit po tabeli: abc abc abc abc abc abc abc abc abc abc abc abc abc.
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="float: left; margin-right: 1em"

{| class="wikitable" align=left style="margin-right: 1em"
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 2. Wyśrodkowanie tabeli
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Wyrównanie w osi – bez odstępów pionowych&#58;
* Wartość margin ustawiona na „auto” zeruje odstępy w pionie, natomiast w poziomie nadaje takie same odstępy po obu stronach tabeli, w ten sposób tabela będzie równo odpychana po obu stronach od marginesów artykułu lub np. od ilustracji czy infoboxu.
{| style="border-collapse:collapse"
|
  {| class="wikitable" style="width:160px; background:white; margin:4px 0"
  | Akapit przed tabelą.
    {| class="wikitable" style="margin: auto"
    | Tabela
    |}
Akapit po tabeli.
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="margin: auto"
</syntaxhighlight>
|}
; Wyrównanie w osi – z zachowaniem pionowych odstępów&#58;
* Poniżej dodano wartość „1em”, aby przywrócić oba odstępy pionowe domyślne dla wikitabeli.
{| style="border-collapse:collapse"
|
  {| class="wikitable" style="width:160px; background:white; margin:4px 0"
  | Akapit przed tabelą.
    {| class="wikitable" style="margin: 1em auto"
    | Tabela
    |}
Akapit po tabeli.
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="margin: 1em auto"
</syntaxhighlight>
|}
'''Uwaga:''' tylko taka kolejność działa poprawnie <code>1em auto</code> – „auto” musi być na drugiej pozycji, aby działało tylko w poziomie.
<!-- koniec ramki sekcji -->|}

; 3. Wyrównanie tabeli do prawej
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Wyrównanie do prawej – bez oblewania&#58;
* Robi to polecenie „margin-left: auto”.
{| style="border-collapse:collapse"
|
  {| class="wikitable" style="width:160px; background:white; margin:4px 0"
  | Akapit przed tabelą.
    {| class="wikitable" style="margin-left:auto"
    | Tabela
    |}
Akapit po tabeli.
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="margin-left: auto"
</syntaxhighlight>
|}

; Wyrównanie do prawej – z oblewaniem&#58;
* Robią to polecenia <code>style="float: right"</code> lub skrócone <code>align=right</code>.
* Dodano odstęp „1em” z lewej, aby tekst nie dotykał tabeli.
{| style="border-collapse:collapse"
|
  {| class="wikitable" style="width:160px; background:white; margin:4px 0"
| Akapit przed tabelą: abc abc abc abc.
    {| class="wikitable" style="float: right; margin-left: 1em"
    | Tabela
    |}
Akapit po tabeli: abc abc abc abc abc abc abc abc abc abc abc abc abc.
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="float: right; margin-left: 1em"

{| class="wikitable" align=right style="margin-left: 1em"
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 4. Tabele obok siebie
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Tabele na styk – w pionie&#58;
* Wystarczy ustawić pionowe marginesy na „0”, a ponieważ poziome są zerowe domyślnie, to wystarczy podać ogólnie „margin:0”.
{| style="border-collapse:collapse"
|- style="vertical-align: top"
|style="padding-top:1em"|
  {| class="wikitable" style="margin:0"
  | Tabela1
  |}
  {| class="wikitable" style="margin:0"
  | Tabela2
  |}
  {| class="wikitable" style="margin:0"
  | Tabela3
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="margin:0"
| Tabela1
|}
{| class="wikitable" style="margin:0"
| Tabela2
|}
{| class="wikitable" style="margin:0"
| Tabela3
|}
</syntaxhighlight>
|}

* W powyższym przykładzie zestaw tabel będzie w oddzielnym wierszu (i przy lewym marginesie). Aby włączyć oblewanie z prawej strony, można ten zestaw wstawić do poniższego kodu:
 <nowiki>{| style="float:left; margin-right:1em"
|
</nowiki><span style="color: Red">TUTAJ</span>
 <nowiki>|}</nowiki>

...natomiast gdy tabele mają być przy prawym marginesie i oblewane z lewej, to wtedy powyższe parametry odwrotnie:
 <nowiki>{| style="float:right; margin-left:1em"
|
</nowiki><span style="color: Red">TUTAJ</span>
 <nowiki>|}</nowiki>

; Tabele na styk – w poziomie&#58;
* Robi to polecenie „float:left”.
{| style="border-collapse:collapse"
|- style="vertical-align: top"
|
  {| class="wikitable" style="float:left"
  | Tabela1
  |}
  {| class="wikitable" style="float:left"
  | Tabela2
  |}
  {| class="wikitable" style="float:left"
  | Tabela3
  |}
{{clear}}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="float:left"
| Tabela1
|}
{| class="wikitable" style="float:left"
| Tabela2
|}
{| class="wikitable" style="float:left"
| Tabela3
|}
{{clear}}
</syntaxhighlight>
|}

* W powyższym przykładzie dodano na końcu kodu {{s|clear}} dla wyłączenia oblewania. Jest to oczywiście opcjonalne.

; Różnice wyświetlania w przeglądarkach&#58;
* W zależności od przeglądarki i systemu operacyjnego tabele na styk mogą nachodzić na siebie i przez to mieć wspólną krawędź lub stykać się z sobą, przez co miejsce styku tabel będzie miało krawędź podwójnej grubości.
<!-- koniec ramki sekcji -->|}

; 5. Wyrównywanie tabel – zaawansowane
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Kilka tabel w jednym wierszu&#58;
* Poniższy kod...
<syntaxhighlight lang="text">
Tekst akapitu powyżej.
{| class="wikitable" style="float:left; margin: 1ex 1em 0 0"
| Tabela1
|}
{| class="wikitable" style="float:left; margin: 1ex 1em 0 0"
| Tabela2
|}
{| class="wikitable" style="float:right; margin: 1ex 0 0 1em"
| Tabela3
|}
{| class="wikitable" style="float:right; margin: 1ex 0 0 1em"
| Tabela4
|}
Tekst akapitu poniżej: abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc.
</syntaxhighlight>

...wyświetli się tak:
{| class="wikitable" style="width:480px; background:white"
|
Tekst akapitu powyżej.
{| class="wikitable" style="float:left; margin: 1ex 1em 0 0"
| Tabela1
|}
{| class="wikitable" style="float:left; margin: 1ex 1em 0 0"
| Tabela2
|}
{| class="wikitable" style="float:right; margin: 1ex 0 0 1em"
| Tabela3
|}
{| class="wikitable" style="float:right; margin: 1ex 0 0 1em"
| Tabela4
|}
Tekst akapitu poniżej: abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc.
|}

* Powyżej warto zauważyć, że najpierw wyświetla się Tabela4, potem Tabela3.
<!-- koniec ramki sekcji -->|}

; 6. Wyrównywanie tabel – problem z „float”
<!-- początek ramki sekcji -->{| style="background:AntiqueWhite; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Użycie polecenia „float” powoduje włączenie oblewania tekstem. W przypadku zbyt wysokich tabel, mogą one zachodzić zbyt daleko na dół. Jeżeli tego nie chcemy, należy użyć szablonu {{s|clear}}, wstawiając go w kodzie nad miejscem, które chcemy oddzielić. Po kliknięciu w podany link wyświetli się opis tego szablonu wraz z jego dodatkowymi opcjami.
* Możemy tak odpychać w dół nie tylko kolejne akapity, ale także tabele, ilustracje czy nagłówki sekcji.
{| style="border-collapse:collapse"
|- style="vertical-align:top"
|
  {| class="wikitable" style="width:160px; background:white; margin:1em 0"
  |+ Bez szablonu
  |
Akapit1
  {| class="wikitable" style="float:left; margin:0 1em 1em 0"
  | 1A || 1B
  |-
  | 2A || 2B
  |-
  | 3A || 3B
  |}
Akapit2

Akapit3
  |}
  {| class="wikitable" style="width:160px; background:white; margin:1em 0"
  |+ Po użyciu szablonu
  |
Akapit1
  {| class="wikitable" style="float:left; margin:0 1em 0 0"
  | 1A || 1B
  |-
  | 2A || 2B
  |-
  | 3A || 3B
  |}
Akapit2
{{clear}}

Akapit3
  |}
|style="padding-left:1em"|
 <nowiki>Akapit1
{| class="wikitable" style="float:left; margin:0 1em 0 0"
| 1A || 1B
|-
| 2A || 2B
|-
| 3A || 3B
|}

Akapit2
</nowiki><span style="color: Red">&#123;&#123;clear}}   <- szablon odpychania</span><nowiki>

Akapit3</nowiki>
|}
<!-- koniec ramki sekcji -->|}

== Wyrównywanie tekstu – w poziomie ==
; 1. Składnia
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px 10px; width:1000px"
|<!-- aż dotąd -->
Pełne polecenia wyrównywania to:
 style="text-align:left"          do lewej
 style="text-align:center"        w osi
 style="text-align:right"         do prawej

Skrócone polecenia wyrównywania (działają tylko na komórki zwykłe) to:
 align="left"
 align="center"
 align="right"
<!-- koniec ramki sekcji -->|}

; 2. Gdzie i co można wyrównywać w poziomie?
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
{| class="wikitable"
| Po znaczniku początku tabeli || wszystkie komórki zwykłe w całej tabeli
|-
| Po znaczniku tytułu || tytuł tabeli
|-
| Po znaczniku początku wiersza || wszystkie komórki zwykłe w danym wierszu
|-
|rowspan=2| Po znaczniku komórki || pojedyncza komórka nagłówka
|-
| pojedyncza komórka zwykła
|}
* Jak widać:
** wyrównywanie tekstu w komórkach nagłówka można zmieniać:
*** tylko indywidualnie w każdej komórce,
** wyrównywanie tekstu w komórkach zwykłych można zmienić:
*** dla wszystkich komórek w tabeli,
*** dla wszystkich komórek w wierszu,
*** indywidualnie w każdej komórce,
** przy czym powyższe trzy metody dla komórek zwykłych mogą się na siebie nakładać, gdzie:
*** wyrównywanie w tabeli – najniższy priorytet,
*** wyrównywanie w wierszu – wyższy,
*** wyrównywanie w komórce – najwyższy.
* Można więc np. zadeklarować wyrównywanie w komórkach całej tabeli, po czym zmienić to wybranym wierszu (lub wierszach), a na koniec zmienić jeszcze raz – indywidualnie w każdej potrzebnej komórce.
* Nie da się objąć jednym poleceniem kilku komórek (ale można komórki scalone).
* Uwaga: na końcu tej sekcji jest opisana specjalna klasa umożliwiająca wyrównywanie do prawej wybranych kolumn łącznie z komórkami nagłówka.
<!-- koniec ramki sekcji -->|}

; 3. Wartości domyślne
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
{| class="wikitable"
! Rodzaj tekstu || &nbsp;&nbsp;&nbsp;&nbsp;Kierunek&nbsp;&nbsp;&nbsp;&nbsp;
|-
| Tytuł tabeli ||align="center"| center
|-
| Komórka nagłówka ||align="center"| center
|-
| Komórka zwykła || left
|}
<!-- koniec ramki sekcji -->|}

; 4. Wyrównywanie w poziomie – po znaczniku tabeli
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Po znaczniku początku tabeli można wyrównywać tekst '''tylko poleceniem stylu'''.
* Polecenie działa na wszystkie komórki zwykłe w całej tabeli.
* Komórek nagłówka nie da się tak wyrównywać, bo mają własne formatowanie.
<syntaxhighlight lang="text">
{| class="wikitable" style="text-align: wartość"
</syntaxhighlight>

'''Skrócone polecenie''' zachowuje się zupełnie inaczej: nie wyrównuje tekstu, tylko przesuwa całą tabelę.
* W wikitabeli „center” nie działa, „right” przesuwa tabelę do prawego brzegu (i włącza jej oblewanie).
* W tabeli niesformatowanej działają oba – „center” i „right”.
<syntaxhighlight lang="text">
{| class="wikitable" align="wartość"
</syntaxhighlight>
<!-- koniec ramki sekcji -->|}

; 5. Wyrównywanie w poziomie – po znaczniku tytułu
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Przykład. Tytuł tabeli do prawej:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|+ style="text-align:right"| Tytuł
! Nagłówek A || Nagłówek B
|-
| Komórka A || Komórka B
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
|+ style="text-align:right"| Tytuł
! Nagłówek A || Nagłówek B
|-
| Komórka A || Komórka B
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 6. Wyrównywanie w poziomie – po znaczniku wiersza
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Poniżej wyrównywanie zbiorczo – wszystkich komórek w danym wierszu:
* wyrównywania komórek nagłówka nie pokazano, bo w tabelach z klasą „wikitable” komórki nagłówka można wyrównywać tylko indywidualnie,
* wyrównywanie w wierszu do lewej (domyślne) ma sens, jeżeli nadrzędnie (w tabeli) zdefiniowano inny kierunek,
* jak widać, na komórki zwykłe działają po znaczniku wiersza oba polecenia – pełne i skrócone.
{| style="margin-top:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
|+ style="font-weight:normal"| style="text-align:''wartość''"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|- style="text-align:left"
| 1A || 1B || 1C
|- style="text-align:center"
| 2A || 2B || 2C
|- style="text-align:right"
| 3A || 3B || 3C
|}
{| class="wikitable"
|+ style="font-weight:normal"| align="''wartość''"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|- align="left"
| 4A || 4B || 4C
|- align="center"
| 5A || 5B || 5C
|- align="right"
| 6A || 6B || 6C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|- style="text-align:left"
| 1A || 1B || 1C
|- style="text-align:center"
| 2A || 2B || 2C
|- style="text-align:right"
| 3A || 3B || 3C
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|- align="left"
| 4A || 4B || 4C
|- align="center"
| 5A || 5B || 5C
|- align="right"
| 6A || 6B || 6C
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 7. Wyrównywanie w poziomie – po znaczniku komórki
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Poniżej polecenia z osobna dla każdej komórki:
* jak widać, komórek nagłówka nie da się wyrównywać poleceniem skróconym (wiersz 02).
{| style="margin-top:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
|+ style="font-weight:normal"| style="text-align:''wartość''"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|-
!style="text-align:left"| 01A
!style="text-align:center"| 01B
!style="text-align:right"| 01C
|-
|style="text-align:left"| 1A
|style="text-align:center"| 1B
|style="text-align:right"| 1C
|}
{| class="wikitable"
|+ style="font-weight:normal"| align="''wartość''"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|-
!align="left"| 02A <span style="color:Red">!</span>
!align="center"| 02B <span style="color:Red">!</span>
!align="right"| 02C <span style="color:Red">!</span>
|-
|align="left"| 2A
|align="center"| 2B
|align="right"| 2C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|-
!style="text-align:left"| 01A
!style="text-align:center"| 01B
!style="text-align:right"| 01C
|-
|style="text-align:left"| 1A
|style="text-align:center"| 1B
|style="text-align:right"| 1C
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
! Nagłówek A
! Nagłówek B
! Nagłówek C
|-
!align="left"| 02A
!align="center"| 02B
!align="right"| 02C
|-
|align="left"| 2A
|align="center"| 2B
|align="right"| 2C
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 8. Wyrównywanie w poziomie – inne elementy niż tekst
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
* Polecenie <code>style="text-align:wartość"</code> nie wyrównuje osadzonych tabel.
* Polecenie <code>align="wartość"</code> działa na wszystkie elementy w komórce.
Powyższe działa na wikitabele i tabele niesformatowane, które są osadzone wewnątrz komórek zarówno w wikitabelach, jak i tabelach niesformatowanych (dowolne kombinacje).
{| class="wikitable" width=500
! Nagłówek A || Nagłówek B || Nagłówek C
|-
|style="text-align:left"| style="...left"
{| class="wikitable"
! || ||
|-
| || ||
|-
| || ||
|}
|style="text-align:center"| style="...center"
{| class="wikitable"
! || ||
|-
| || ||
|-
| || ||
|}
|style="text-align:right"|style="...right"
{| class="wikitable"
! || ||
|-
| || ||
|-
| || ||
|}
|-
|align=left| align="left"
{| class="wikitable"
! || ||
|-
| || ||
|-
| || ||
|}
|align=center| align="center"
{| class="wikitable"
! || ||
|-
| || ||
|-
| || ||
|}
|align=right| align="right"
{| class="wikitable"
! || ||
|-
| || ||
|-
| || ||
|}
|}
<!-- koniec ramki sekcji -->|}

; 9. Wyrównywanie do prawej w wybranych kolumnach
<!-- początek ramki sekcji -->{| style="background:HoneyDew; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Robi się to specjalnie zmodyfikowaną klasą „wikitable”, ale:
* metoda dotyczy tylko wyrównywania do prawej (nie działa do lewej ani w osi).
* działa nawet na komórki nagłówka,
** jeżeli nie chcemy wyrównania do prawej komórek nagłówka, można je indywidualnie poprawić,
* działa maksymalnie do 9. kolumny.

Np. w celu wyrównania do prawej kolumn 3 i 4, należy kod tabeli rozpocząć w poniższy sposób (i nie trzeba robić nic więcej):
<syntaxhighlight lang="text">
{| class="wikitable col-3-text-align-right col-4-text-align-right"
</syntaxhighlight>

...co da poniższy efekt:
{| class="wikitable col-3-text-align-right col-4-text-align-right"
! Nagłówek A || Nagłówek B ||style="color:red"| Nagłówek C ||style="color:red"| Nagłówek D || Nagłówek E
|-
! 01A || 01B ||style="color:red"| 01C ||style="color:red"| 01D || 01E
|-
| 1A || 1B ||style="color:red"| 1C ||style="color:red"| 1D || 1E
|-
| 2A || 2B ||style="color:red"| 2C ||style="color:red"| 2D || 2E
|-
| 3A || 3B ||style="color:red"| 3C ||style="color:red"| 3D || 3E
|}

'''Uwaga:''' w przypadku użycia polecenia „rowspan” nastąpi przesunięcie działania w lewo począwszy od 2. scalonego wiersza.
<!-- koniec ramki sekcji -->|}

== Wyrównywanie tekstu – w pionie ==
; 1. Wyrównywanie w pionie – składnia
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Pełne polecenia wyrównywania w pionie to:
 style="vertical-align:top"          do góry
 style="vertical-align:middle"       w połowie
 style="vertical-align:bottom"       do dołu

Skrócone polecenia wyrównywania w pionie to:
 valign="top"           do góry
 valign="middle"        w połowie
 valign="bottom"        do dołu

Oba powyższe zestawy poleceń działają identycznie, także na tabele osadzone (podczas gdy przy wyrównywaniu w poziomie jest różnica).
<!-- koniec ramki sekcji -->|}

; 2. Gdzie i co można wyrównywać w pionie?
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
{| class="wikitable"
| Po znaczniku początku tabeli || ''nie działa''
|-
| Po znaczniku tytułu || ''nie dotyczy''
|-
| Po znaczniku początku wiersza || wszystkie komórki (nagłówka lub zwykłe)
|-
| Po znaczniku komórki || każda z osobna komórka (nagłówka lub zwykła)
|}

* Jak widać, jest inaczej niż przy wyrównywaniu w poziomie, bo tu po znaczniku wiersza ulegają wyrównaniu nawet komórki nagłówka.
* Wyrównywanie w wierszu ma niższy priorytet, w komórce – wyższy. Można więc zdefiniować wiersz, a następnie zmieniać to w komórkach.
* Nie da się objąć jednym poleceniem kilku komórek (ale można komórkę scaloną).
<!-- koniec ramki sekcji -->|}

; 3. Wyrównywanie w pionie – wartości domyślne
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
{| class="wikitable"
! Rodzaj tekstu || Położenie
|-
| Tytuł tabeli || ''nie dotyczy''
|-
| Komórka<br />nagłówka<br />... || middle
|-
| Komórka<br />zwykła<br />... || middle
|}

...czyli innymi słowy wszystko w tabelach jest domyślnie wyrównane do połowy wysokości.
<!-- koniec ramki sekcji -->|}

; 4. Wyrównywanie w pionie – po znaczniku tabeli
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Wyrównywanie zbiorczo poleceniem dla całej tabeli NIE DZIAŁA:
<syntaxhighlight lang="text">
{| class="wikitable" style="vertical-align:top"
{| class="wikitable" style="vertical-align:middle"
{| class="wikitable" style="vertical-align:bottom"

{| class="wikitable" valign="top"
{| class="wikitable" valign="middle"
{| class="wikitable" valign="bottom"
</syntaxhighlight>

...co widać na poniższym przykładzie (gdzie nic się nie zmienia):
{| style="margin-top: -20px"
|
{| class="wikitable" style="vertical-align:top"
|+ ...top"
! 01A<br />01A || 01B
|-
| 1A<br />1A || 1B
|}
| &nbsp; ||
{| class="wikitable" style="vertical-align:middle"
|+ ...middle"
! 01A<br />01A || 01B
|-
| 1A<br />1A || 1B
|}
| &nbsp; ||
{| class="wikitable" style="vertical-align:bottom"
|+ ...bottom"
! 01A<br />01A || 01B
|-
| 1A<br />1A || 1B
|}
|}
<!-- koniec ramki sekcji -->|}

; 5. Wyrównywanie w pionie – po znaczniku wiersza
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Poniżej polecenia po kolei dla każdego wiersza (w kodzie pełne i skrócone):
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
|- valign="top"
! 01A<br />01A<br />01A || 01B<br />01B || 01C
|- valign="middle"
! 02A<br />02A<br />02A || 02B<br />02B || 02C
|- valign="bottom"
! 03A<br />03A<br />03A || 03B<br />03B || 03C
|- valign="top"
| 1A<br />1A<br />1A || 1B<br />1B || 1C
|- valign="middle"
| 2A<br />2A<br />2A || 2B<br />2B || 2C
|- valign="bottom"
| 3A<br />3A<br />3A || 3B<br />3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
|- style="vertical-align:top"
! 01A<br />01A<br />01A
! 01B<br />01B
! 01C
|- style="vertical-align:middle"
! 02A<br />02A<br />02A
! 02B<br />02B
! 02C
|- style="vertical-align:bottom"
! 03A<br />03A<br />03A
! 03B<br />03B
! 03C
|- style="vertical-align:top"
| 1A<br />1A<br />1A
| 1B<br />1B
| 1C
|- style="vertical-align:middle"
| 2A<br />2A<br />2A
| 2B<br />2B
| 2C
|- style="vertical-align:bottom"
| 3A<br />3A<br />3A
| 3B<br />3B
| 3C
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
|- valign="top"
! 01A<br />01A<br />01A
! 01B<br />01B
! 01C
|- valign="middle"
! 02A<br />02A<br />02A
! 02B<br />02B
! 02C
|- valign="bottom"
! 03A<br />03A<br />03A
! 03B<br />03B
! 03C
|- valign="top"
| 1A<br />1A<br />1A
| 1B<br />1B
| 1C
|- valign="middle"
| 2A<br />2A<br />2A
| 2B<br />2B
| 2C
|- valign="bottom"
| 3A<br />3A<br />3A
| 3B<br />3B
| 3C
|}
</syntaxhighlight>
|}

* W powyższym przykładzie polecenie "vertical-align:middle" dla całego wiersza jest pokazane tylko dla formalności, bo wyrównywanie w połowie komórki jest domyślne. Gdyby dla całej tabeli dało się zmienić w górę lub w dół, wtedy dla konkretnego wiersza można by to przywrócić w połowie, ale polecenie nadrzędne, czyli dla całej tabeli – nie działa.
<!-- koniec ramki sekcji -->|}

; 6. Wyrównywanie w pionie – po znaczniku komórki
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Poniżej polecenia z osobna dla każdej komórki (w kodzie pełne i skrócone):
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
!valign="top"| 01A
!valign="middle"| 01B
!valign="bottom"| 01C
! ...<br />...<br />...
|-
|valign="top"| 1A
|valign="middle"| 1B
|valign="bottom"| 1C
| ...<br />...<br />...
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
!style="vertical-align:top"| 01A
!style="vertical-align:middle"| 01B
!style="vertical-align:bottom"| 01C
! ...<br />...<br />...
|-
|style="vertical-align:top"| 1A
|style="vertical-align:middle"| 1B
|style="vertical-align:bottom"| 1C
| ...<br />...<br />...
|}
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
!valign="top"| 01A
!valign="middle"| 01B
!valign="bottom"| 01C
! ...<br />...<br />...
|-
|valign="top"| 1A
|valign="middle"| 1B
|valign="bottom"| 1C
| ...<br />...<br />...
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 7. Wyrównywanie w pionie – inne elementy niż tekst
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Oba polecenia – stylu <code>style="vertical-align:...</code> i skrócone <code>valign=...</code> działają normalnie także przy wyrównywaniu w pionie tabel osadzonych. Jest to różnica w porównaniu do wyrównywania w poziomie, gdzie polecenie stylu nie działa.

{| class="wikitable"
! Nagłówek A || Nagłówek B || Nagłówek C
|-
|height=150 style="vertical-align:top"| style="...top"
 {| class="wikitable"
 ! || ||
 |-
 | || ||
 |-
 | || ||
 |}
|style="vertical-align:middle"| style="...middle"
 {| class="wikitable"
 ! || ||
 |-
 | || ||
 |-
 | || ||
 |}
|style="vertical-align:bottom"|style="...bottom"
 {| class="wikitable"
 ! || ||
 |-
 | || ||
 |-
 | || ||
 |}
|-
|height=150 valign=top| valign="top"
 {| class="wikitable"
 ! || ||
 |-
 | || ||
 |-
 | || ||
 |}
|valign=middle| valign="middle"
 {| class="wikitable"
 ! || ||
 |-
 | || ||
 |-
 | || ||
 |}
|valign=bottom| valign="bottom"
 {| class="wikitable"
 ! || ||
 |-
 | || ||
 |-
 | || ||
 |}
|}
<!-- koniec ramki sekcji -->|}

; 8. Wyrównywanie w pionie – marginesy
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Warto zwrócić uwagę na jedną rzecz: tekst w komórce można, co się robi zazwyczaj, zacząć w tej samej linii kodu co znacznik komórki, ale czasami zaczyna się linię niżej (z różnych względów). Ta druga możliwość powoduje większe odstępy i od góry, i od dołu, i jak się okazuje, podczas wyrównywania nadal to widać (poniżej fragmenty kodu):
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{| class="wikitable"
| 1A
| 1B
| 1C
|style="vertical-align:top"| 1D
|style="vertical-align:top"|
1E
| ...<br />...<br />...
|-
| 2A
| 2B
| 2C
|style="vertical-align:bottom"| 2D
|style="vertical-align:bottom"|
2E
| ...<br />...<br />...
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="vertical-align:top"| 1D
|style="vertical-align:top"|
1E

|style="vertical-align:bottom"| 2D
|style="vertical-align:bottom"|
2E
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|valign="top"| 1D
|valign="top"|
1E

|valign="bottom"| 2D
|valign="bottom"|
2E
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

; 9. Użycie szablonu dla liczb
<!-- początek ramki sekcji -->{| style="background:AliceBlue; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
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!
<!-- koniec ramki sekcji -->|}

== Kolory ==
=== Podstawy składni ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
W większości przypadków powinno się stosować standardową wikipediową postać tabeli, czyli <code>{| class="wikitable"</code>, która ma wypracowane zestawienie kolorystyczne pasujące do reszty oprawy graficznej wikipediowych stron. Daje to spójny wygląd encyklopedii i ułatwia ewentualne globalne zmiany. W przypadku użycia innych kolorów, można skorzystać z nazw lub wartości zebranych na stronie [[Pomoc:Kolory]].

Wartość koloru można podawać na dwa sposoby:
* wybierając odpowiednią nazwę koloru (lista rozpoznawanych nazw podana jest w [[Pomoc:Kolory]]),
** np. kolor tła o nazwie ''LightSteelBlue'', czyli <code>style="background:LightSteelBlue"</code>;
* podając wartość koloru jako kombinację trzech składowych koloru ([[RGB|czerwony, zielony, niebieski]]) wyrażoną [[szesnastkowy system liczbowy|liczbami szesnastkowymi]], poprzedzoną znakiem <code>#</code>,
** np. kolor tła o składowych „ff 00 00”, czyli <code>style="background:#ff0000"|</code>.

Dodatkowo dla wartości o cyfrach powtarzających się w parach można stosować zapis skrócony, podając tylko jedną szesnastkową cyfrę na kolor składowy – np. zamiast <code>#ff0033</code> można podać <code>#f03</code>.

Składnia jest następująca (przykład dla koloru tekstu): <code><nowiki>style="color: PaleGreen"</nowiki></code>, gdzie spacja po dwukropku jest opcjonalna, a wielkość liter w nazwie koloru nie ma znaczenia. W przykładach wyróżnienie wielkimi literami zostało zastosowane jedynie dla zwiększenia czytelności.

Wszystkie trzy polecenia kolorów, czyli tła <code>background:</code>, obramowania <code>border:</code> i tekstu <code>color:</code> umieszcza się we wspólnym poleceniu stylu (po każdym znaczniku tabeli, wiersza lub komórki może być tylko jeden styl), przedzielając polecenia średnikami, a wszystkie polecenia zawierając we wspólnym cudzysłowie, średnik na końcu kodu przed zamykającym znakiem cudzysłowu też jest opcjonalny, ale zwiększa czytelność dłuższego wyrażenia i ułatwia kopiowanie fragmentu kodu (tzw. dobra praktyka programistyczna), np.:
* <code>style="background: OliveDrab; border: solid 6px YellowGreen; color: White;"</code>.

W powyższym przykładzie wartości <code>solid</code> oraz <code>6px</code> są niezbędnymi dodatkowymi parametrami krawędzi (w tym przypadku: linia ciągła o grubości 6px).

Oczywiście zamiast wszystkich trzech poleceń można we wspólnym stylu umieścić tylko dwa wybrane lub jedno.
<!-- koniec ramki sekcji -->|}

=== Gdzie i co można kolorować? ===
{| class="wikitable"
!colspan=2| Kolor tła<br />{{nobold|<code><nowiki>style=</nowiki>"background: ''wartość''"</code>}}
|-
|
1) po znaczniku początku tabeli<br />
&nbsp; &nbsp; – łącznie z tłem pod komórkami brakującymi<br />
&nbsp; &nbsp; – (!) nie działa na tło tytułu<br />
&nbsp; &nbsp; – (!) nie działa na tło komórek nagłówka
|
{| class="wikitable" width=80 style="margin-top:0; background: gold"
|+ Tytuł
!height=10px| || || ||
|-
|height=10px| || || ||
|-
|height=10px| || ||
|-
|height=10px| ||
|}
|-
|
2) po znaczniku tytułu
|
{| class="wikitable" width=80 style="margin:0 0 0.5em"
|+ style="background: gold"| Tytuł
!height=10px| || || ||
|-
|height=10px| || || ||
|-
|height=10px| || || ||
|}
|-
|
3) po znaczniku początku wiersza<br />
&nbsp; &nbsp; – tło wszystkich istniejących komórek zwykłych w wierszu<br/>
&nbsp; &nbsp; – (!) nie działa na tło pod komórkami brakującymi<br />
&nbsp; &nbsp; – (!) nie działa na tło komórek nagłówka
|
{| class="wikitable" width=80 style="margin:0.5em 0"
!height=10px| || || ||
|-
|height=10px| || || ||
|- style="background: gold"
|height=10px| || || ||
|-
|height=10px| || ||
|- style="background: gold"
|height=10px| ||
|}
|-
|
4) po znaczniku komórki (nagłówka lub zwykłej)<br />
&nbsp; &nbsp; – także komórki scalone
|
{| class="wikitable" width=80 style="margin:0.5em 0"
!colspan=2 height=10px style="background: gold"| || ||
|-
!height=10px| || || ||style="background: gold"|
|-
|height=10px| || || ||
|-
|height=10px style="background: gold"| || ||rowspan=2 style="background: gold"| ||
|-
|height=10px| ||
|}
|-
!colspan=2| Kolor tekstu<br />{{nobold|<code><nowiki>style=</nowiki>"color: ''wartość''"</code>}}
|-
|
5) po znaczniku początku tabeli<br />
&nbsp; &nbsp; – wszystko: także w tytule i komórkach nagłówka
|
{| class="wikitable" style="margin:0 0 0.5em; color: chocolate"
|+ Tytuł
|-
! A || A || A
|-
| A || A || A
|}
|-
|
6) po znaczniku tytułu
|
{| class="wikitable" style="margin:0 0 0.5em"
|+ style="color: chocolate"| Tytuł
! A || A || A
|-
| A || A || A
|}
|-
|
7) po znaczniku początku wiersza<br />
&nbsp; &nbsp; – także w komórkach nagłówka
|
{| class="wikitable" style="margin:0.5em 0"
|-
! A || A || A
|- style="color: chocolate"
! A || A || A
|-
| A || A || A
|- style="color: chocolate"
| A || A || A
|}
|-
|
8) po znaczniku komórki (nagłówka lub zwykłej)
|
{| class="wikitable" style="margin:0.5em 0"
! A ||style="color: chocolate"|  A || A
|-
| A || A ||style="color: chocolate"| A
|}
|-
!colspan=2| Kolor obramowania<br />{{nobold|<code><nowiki>style=</nowiki>"border: ''wartość''"</code>}}
|-
|
9) po znaczniku początku tabeli<br />
&nbsp; &nbsp; – bez krawędzi wewnętrznych
|
{| class="wikitable" width=80 style="margin-top:0; border: solid red"
|+ Tytuł
!height=10px| || || ||
|-
|height=10px| || || ||
|-
|height=10px| || ||
|-
|height=10px| ||
|}
|-
|
10) po znaczniku tytułu
|
{| class="wikitable" width=80 style="margin-top:0"
|+ style="border: solid red"| Tytuł
!height=10px| || || ||
|-
|height=10px| || || ||
|-
|height=10px| || || ||
|}
|-
|
11) po znaczniku początku wiersza<br />
&nbsp; &nbsp; – łącznie z komórkami brakującymi<br />
&nbsp; &nbsp; – także z komórkami nagłówka<br />
&nbsp; &nbsp; – bez krawędzi wewnętrznych
|
{| class="wikitable" width=80
!height=10px| || || ||
|- style="border: solid red"
!height=10px| || || ||
|-
|height=10px| || ||
|- style="border: solid red"
|height=10px| ||
|-
|height=10px| ||
|}
|-
|
12) po znaczniku komórki (nagłówka lub zwykłej)<br />
&nbsp; &nbsp; – także komórki scalone
|
{| class="wikitable" width=80
!colspan=2 height=10px style="border: solid red"| || ||
|-
!height=10px| || || ||style="border: solid red"|
|-
|height=10px| || || ||
|-
|height=10px style="border: solid red"| || ||rowspan=2 style="border: solid red"| ||
|-
|height=10px| ||
|}
|-
!colspan=2| Kolor jednej krawędzi obramowania<br />{{nobold|<code><nowiki>style=</nowiki>"border-top: ''wartość''"</code>}}<br />{{nobold|<code><nowiki>style=</nowiki>"border-right: ''wartość''"</code>}}<br />{{nobold|<code><nowiki>style=</nowiki>"border-bottom: ''wartość''"</code>}}<br />{{nobold|<code><nowiki>style=</nowiki>"border-left: ''wartość''"</code>}}
|-
|
13) jak w pkt. 9–12 – tylko górna krawędź<br />
14) jak w pkt. 9–12 – tylko prawa krawędź<br />
15) jak w pkt. 9–12 – tylko dolna krawędź<br />
16) jak w pkt. 9–12 – tylko lewa krawędź
|
{| class="wikitable" width=80 style="border-left: solid red"
|+ style="border-top: solid red"| Tytuł
!height=10px| ||style="border-bottom: solid red"| ||style="border-right: solid red"| ||
|- style="border-bottom: solid red"
|height=10px| || || ||
|-
|height=10px| || || ||
|-
|height=10px| ||style="border-bottom: solid red"| ||style="border-right: solid red"| ||
|-
|height=10px| || || ||
|}
|-
!colspan=2|
|-
|colspan=2| '''Uwaga:''' krawędzie przy brakujących komórkach widać tylko w niektórych przeglądarkach<br />(np. Firefox – tak, Chrome – nie).
|}

=== Kolejność nakładania kolorów ===
Na kolor tła tabeli można nałożyć kolor tła wiersza, a na to kolor tła komórki. Dotyczy to również kolejności kolorowania obramowania i tekstu:
{|
|
{| class="wikitable" style="background: Gold"
|+ Tytuł
|-
| 1A || 1B || 1C || 1D
|- style="background: Red"
| 2A || 2B ||style="background: Green"| 2C || 2D
|-
| 3A || 3B || 3C || 3D
|}
|style="padding-left:1em|
{| class="wikitable" style="border: solid 4px Gold"
|+ Tytuł
|-
| 1A || 1B || 1C || 1D
|- style="border: solid 4px Red"
| 2A || 2B ||style="border: solid 4px Green"| 2C || 2D
|-
| 3A || 3B || 3C || 3D
|}
|style="padding-left:1em|
{| class="wikitable" style="color: Gold"
|+ Tytuł
|-
| 1A || 1B || 1C || 1D
|- style="color: Red"
| 2A || 2B ||style="color: Green"| 2C || 2D
|-
| 3A || 3B || 3C || 3D
|}
|}

=== Kolorowanie tła ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Kolorowanie tła – składnia
Istnieją dwa polecenia dotyczące koloru tła:
: (1) polecenie dotyczące tylko koloru tła,
: (2) polecenie zbiorcze dla wielu parametrów tła, w tym dla koloru.

W drugim można podawać więcej nieistotnych dla nas parametrów dotyczących obrazka w tle. Pierwsze polecenie ma zastosowanie, gdy trzeba zmienić tylko kolor, nie zmieniając innych parametrów tła zdefiniowanych w elemencie nadrzędnym. W Wikipedii taka potrzeba nie zachodzi, przez co pierwsze polecenie jest zbędne.

W poleceniu zbiorczym (2) można podać tylko kolor tła, pomijając inne parametry. Ponadto polecenie zbiorcze jest lepsze, bo krótsze:
<syntaxhighlight lang="text">
(1) style="background-color: wartość"
(2) style="background: wartość"         <− wygodniej
</syntaxhighlight>

Istnieje również polecenie skrócone:
<syntaxhighlight lang="text">
bgcolor="wartość"
</syntaxhighlight>
...które działa tylko po znaczniku początku wiersza i znaczniku komórki zwykłej oraz działa wadliwie lub nie działa w ogóle przy stosowaniu niektórych rzadko stosowanych parametrów, np. sposobów podawania wartości „rgba”. (W tabelach niesformatowanych „bgcolor” działa po każdym znaczniku, nawet na komórki nagłówka).
----
; Kolorowanie tła – po znaczniku początku tabeli:
Działa tylko na komórki zwykłe i tło pod brakującymi, ponieważ komórki zwykłe mają tło dziedziczone z tła tabeli.
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable" style="background:Gold"
|+ Tytuł
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|-
| 3A || 3B
|-
| 4A
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="background:Gold"
</syntaxhighlight>
|}
----
; Kolorowanie tła – po znaczniku tytułu:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|+ style="background:Gold"| Tytuł
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|+ style="background:Gold"| Tytuł
</syntaxhighlight>
|}
----
; Kolorowanie tła – po znaczniku początku wiersza:
Działa tylko na komórki zwykłe. Nie działa na komórki nagłówka i brakujące.
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|- style="background:Gold"
! 01A || 01B || 01C || 01D
|- style="background:Gold"
! 02A
| 2B
! 02C
| 2D
|- style="background:Gold"
| 3A || 3B || 3C || 3D
|- style="background:Gold"
| 4A || 4B ||colspan=2| 4C
|- style="background:Gold"
| 5A || 5B || ||
|- style="background:Gold"
| 6A || 6B ||colspan=2|
|- style="background:Gold"
| 7A || 7B
|}
|
{| class="wikitable" style="background:Transparent"
|-
|style="border-color: Transparent"| <− nagłówka (nie działa)
|-
|style="border-color: Transparent"| <− mieszane (wybiórczo)
|-
|style="border-color: Transparent"| <− zwykłe
|-
|style="border-color: Transparent"| <− scalone
|-
|style="border-color: Transparent"| <− puste
|-
|style="border-color: Transparent"| <− puste scalone
|-
|style="border-color: Transparent"| <− brakujące (nie działa)
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|- style="background:Gold"
</syntaxhighlight>
|}
----
; Kolorowanie tła – po znaczniku komórki:
Działa wszędzie, na komórki zwykłe i nagłówka, pojedyncze i scalone.

Jest to jedyna metoda kolorowania tła komórek nagłówka.
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
!colspan=2 style="background:Gold"| 01A || 01C || 01D
|-
! 02A || 02B || 02C ||style="background:Gold"| 02D
|-
|style="background:Gold"| 3A || 3B ||rowspan=2 style="background:Gold"| 3C || 3D
|-
| 4A || 4B || 4D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
!colspan=2 style="background:Gold"| 01A
...
!style="background:Gold"| 02D
...
|style="background:Gold"| 3A
...
|rowspan=2 style="background:Gold"| 3C
</syntaxhighlight>
<syntaxhighlight lang="text">
!colspan=2 style="background:Gold"| 01A || 01C || 01D
...
! 02A || 02B || 02C ||style="background:Gold"| 02D
...
|style="background:Gold"| 3A || 3B ||rowspan=2 style="background:Gold"| 3C || 3D
</syntaxhighlight>
|}

W przypadku grupy komórek (niescalonych) trzeba każdą pokolorować oddzielnie:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C || 01D
|-
| 2A ||style="background:Gold"| 2B ||style="background:Gold"| 2C || 2D
|-
| 3A ||style="background:Gold"| 3B ||style="background:Gold"| 3C || 3D
|-
| 4A || 4B || 4C || 4D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="background:Gold"| 2B
|style="background:Gold"| 2C
...
|style="background:Gold"| 3B
|style="background:Gold"| 3C
</syntaxhighlight>
<syntaxhighlight lang="text">
| 2A ||style="background:Gold"| 2B ||style="background:Gold"| 2C || 2D
|-
| 3A ||style="background:Gold"| 3B ||style="background:Gold"| 3C || 3D
</syntaxhighlight>
|}
----
; Kolorowanie tła – kolor Transparent
Warto pamiętać, że kolor tła tabeli nie jest domyślnie ani przezroczysty, ani biały, tylko bardzo jasno szary, który może wydawać się biały, gdy tabela znajdzie się na ciemniejszym tle.

Oprócz całej palety dostępnych kolorów HTML istnieje również jeden kolor specyficzny o nazwie „Transparent”, czyli coś, co niezbyt logicznie można nazwać „kolorem przezroczystym”. Jest to parametr koloru, ponieważ działa nie tylko z poleceniem zbiorczym <code>background</code>, ale właśnie także z poleceniem szczegółowym <code>background-color</code>.

Po znaczniku początku tabeli można nadać tło z wartością koloru „Transparent”. Wtedy wszystkie komórki zwykłe (i tło pod brakującymi) przyjmą kolor, na jakim leży tabela. Niestety komórkom nagłówka kolor „Transparent” trzeba nadawać każdej z osobna:
{| style="margin-top:-1ex;"
|-
| a)
 {| class="wikitable" style="margin-top:1ex;"
 ! 01A || 01B
 |-
 | 2A || 2B
 |-
 | 3A || 3B
 |}
|style="padding-left:1em"| b)
 {| class="wikitable" style="margin-top:1ex; background:Transparent"
 ! 01A || 01B
 |-
 | 2A || 2B
 |-
 | 3A || 3B
 |}
|style="padding-left:1em"| c)
 {| class="wikitable" style="margin-top:1ex;"
 !style="background:Transparent"| 01A ||style="background:Transparent"| 01B
 |-
 | 2A || 2B
 |-
 | 3A || 3B
 |}
|style="padding-left:1em"| d)
 {| class="wikitable" style="margin-top:1ex; background:Transparent"
 !style="background:Transparent"| 01A ||style="background:Transparent"| 01B
 |-
 | 2A || 2B
 |-
 | 3A || 3B
 |}
|}

{| style="margin-top:-1ex;"
|
<syntaxhighlight lang="text">
a) {| class="wikitable"

b) {| class="wikitable" style="background:Transparent"

c) {| class="wikitable"
   !style="background:Transparent"| 01A
   !style="background:Transparent"| 01B

d) {| class="wikitable" style="background:Transparent"
   !style="background:Transparent"| 01A
   !style="background:Transparent"| 01B
</syntaxhighlight>
|}

W ten sam sposób można pokolorować całą tabelę na nowy wybrany kolor. Komórki nagłówka (każdą oddzielnie) trzeba opatrzyć zamiast tego nowego koloru wartością koloru „Transparent” (przezroczysty), a wtedy przejmą kolor nowego tła tabeli i ujednolicą się z komórkami zwykłymi:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable" style="background:Gold"
!style="background:Transparent"| 01A ||style="background:Transparent"| 01B
|-
| 2A || 2B
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="background:Gold"
!style="background:Transparent"| 01A
!style="background:Transparent"| 01B
</syntaxhighlight>
<syntaxhighlight lang="text">
{| class="wikitable" style="background:Gold"
!style="background:Transparent"| 01A ||style="background:Transparent"| 01B
</syntaxhighlight>
|}

Jest to o tyle wygodne, że można teraz eksperymentować z doborem koloru tła tylko w jednym miejscu kodu – po znaczniku początku tabeli, a zmieniać będzie się wszystko, a więc także tło komórek nagłówka:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
  {| class="wikitable" style="background:Gold"
  !style="background:Transparent"| 01A ||style="background:Transparent"| 01B
  |-
  | 2A || 2B
  |}
|style="padding-left:1em"|
  {| class="wikitable" style="background:Coral"
  !style="background:Transparent"| 01A ||style="background:Transparent"| 01B
  |-
  | 2A || 2B
  |}
|style="padding-left:1em"|
  {| class="wikitable" style="background:Cyan"
  !style="background:Transparent"| 01A ||style="background:Transparent"| 01B
  |-
  | 2A || 2B
  |}
|style="padding-left:1em"|
  {| class="wikitable" style="background:LightBlue"
  !style="background:Transparent"| 01A ||style="background:Transparent"| 01B
  |-
  | 2A || 2B
  |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="background:Gold"
{| class="wikitable" style="background:Coral"
{| class="wikitable" style="background:Cyan"
{| class="wikitable" style="background:LightBlue"
</syntaxhighlight>
|}

Istnieją alternatywne zapisy parametru koloru Transparent (tylko dla tła):
<syntaxhighlight lang="text">
style="background:Transparent"
style="background:000000"
style="background:000"
</syntaxhighlight>
----
; Kolorowanie tła o zmiennym nasyceniu (wartości RGBA)
W modelu RGBA ostatnia litera oznacza „kanał alfa”, czyli przezroczystość.

Istnieje wiele modeli koloru z kanałem alfa i sposobów zapisu w HTML, z czego opisany poniżej działa w największej liczbie przeglądarek, w tym nawet dość starych:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{|class="wikitable"
|style="background:rgba(20%,80%,50%,0.0)"| 0%
|style="background:rgba(20%,80%,50%,0.07)"| 7%
|style="background:rgba(20%,80%,50%,0.14)"| 14%
|style="background:rgba(20%,80%,50%,0.21)"| 21%
|style="background:rgba(20%,80%,50%,0.28)"| 28%
|style="background:rgba(20%,80%,50%,0.35)"| 35%
|style="background:rgba(20%,80%,50%,0.42)"| 42%
|...
|style="background:rgba(20%,80%,50%,1)"| 100%
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="background:rgba(20%,80%,50%,0.0)"| 0%
|style="background:rgba(20%,80%,50%,0.07)"| 7%
|style="background:rgba(20%,80%,50%,0.14)"| 14%
...
|...
|style="background:rgba(20%,80%,50%,1)"| 100%
</syntaxhighlight>
|}

Powyżej widać odcienie koloru zielonego, bo tło tabeli jest niemal białe.

A oto, co się stanie, jeśli dodatkowo kolor tła tabeli zmienimy na wartość „Transparent”:
{|class="wikitable" style="background:Transparent"
|style="background:rgba(20%,80%,50%,0.0)"| 0%
|style="background:rgba(20%,80%,50%,0.07)"| 7%
|style="background:rgba(20%,80%,50%,0.14)"| 14%
|style="background:rgba(20%,80%,50%,0.21)"| 21%
|style="background:rgba(20%,80%,50%,0.28)"| 28%
|style="background:rgba(20%,80%,50%,0.35)"| 35%
|style="background:rgba(20%,80%,50%,0.42)"| 42%
|...
|style="background:rgba(20%,80%,50%,1)"| 100%
|}

...lub na kolor czerwony
{|class="wikitable" style="background:Red"
|style="background:rgba(20%,80%,50%,0.0)"| 0%
|style="background:rgba(20%,80%,50%,0.10)"| 10%
|style="background:rgba(20%,80%,50%,0.20)"| 20%
|style="background:rgba(20%,80%,50%,0.30)"| 30%
|style="background:rgba(20%,80%,50%,0.40)"| 40%
|style="background:rgba(20%,80%,50%,0.50)"| 50%
|style="background:rgba(20%,80%,50%,0.60)"| 60%
|style="background:rgba(20%,80%,50%,0.70)"| 70%
|style="background:rgba(20%,80%,50%,0.80)"| 80%
|style="background:rgba(20%,80%,50%,0.90)"| 90%
|style="background:rgba(20%,80%,50%,1)"| 100%
|}

Przykład z kolorem czerwonym pokazuje, że stopień przezroczystości nie sumuje dwóch kolorów, tylko drugi kolor wypiera pierwszy. Jest to trochę mylące, bo wartość „0” oznacza tutaj całkowitą przezroczystość, a „100%” jej brak.
<!-- koniec ramki sekcji -->|}

=== Kolorowanie tekstu ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Kolorowanie tekstu – po znaczniku początku tabeli:
Wpływa na kolor wszystkich tekstów, także tytułu tabeli i komórek nagłówka:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable" style="color:Chocolate"
|+ Tytuł
|-
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="color:Chocolate"
</syntaxhighlight>
|}
----
; Kolorowanie tekstu – po znaczniku tytułu
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|+ style="color:Chocolate"| Tytuł
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|+ style="color:Chocolate"| Tytuł
</syntaxhighlight>
|}
----
; Kolorowanie tekstu – po znaczniku początku wiersza
Działa także na wiersze z komórkami nagłówka:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
 {| class="wikitable"
 |- style="color:Chocolate"
 ! 01A || 01B || 01C || 01D
 |- style="color:LimeGreen"
 ! 02A
 | 2B
 ! 02C
 | 2D
 |- style="color:DodgerBlue"
 | 3A || 3B || 3C || 3D
 |- style="color:Orange"
 | 4A || 4B ||colspan=2| 4C
 |}
|
 {| class="wikitable" style="background:Transparent"
 |-
 |style="border-color: Transparent"| <− nagłówka
 |-
 |style="border-color: Transparent"| <− mieszane
 |-
 |style="border-color: Transparent"| <− zwykłe
 |-
 |style="border-color: Transparent"| <− scalone
 |}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|- style="color:Chocolate"
...
|- style="color:LimeGreen"
...
|- style="color:DodgerBlue"
...
|- style="color:Orange"
</syntaxhighlight>
|}
----
; Kolorowanie tekstu – po znaczniku komórki
Działa na wszystkie komórki – nagłówka i zwykłe:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A ||style="color:Chocolate"| 01B || 01C
|-
| 2A || 2B ||style="color:Chocolate"| 2C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
!style="color:Chocolate"| 01B
...
|style="color:Chocolate"| 2C
</syntaxhighlight>
<syntaxhighlight lang="text">
! 01A ||style="color:Chocolate"| 01B || 01C
...
| 2A || 2B ||style="color:Chocolate"| 2C
</syntaxhighlight>
|}
----
; Kolorowanie tekstu – a może tła?
Jak widać, kolorowanie tekstu nie zawsze jest dobrze widoczne, lepiej wychodzi kolorowanie tła z tekstem czarnym lub białym:
{| class="wikitable" style="background:Transparent"
!style="background:#fc0"| 01A
!style="background:#0ff"| 01B
!style="background:#0c0"| 01C
!style="background:#f90"| 01D
|rowspan=2 style="border-color:Transparent"| &nbsp; <− nagłówka
|- style="color:White"
!style="background:#000"| 02A
!style="background:#03f"| 02B
!style="background:#090"| 02C
!style="background:#c00"| 02D
|-
|style="background:#fc0"| 3A
|style="background:#0ff"| 3B
|style="background:#0c0"| 3C
|style="background:#f90"| 3D
|rowspan=2 style="border-color:Transparent"| &nbsp; <− zwykłe
|- style="color:White"
|style="background:#000"| 4A
|style="background:#03f"| 4B
|style="background:#090"| 4C
|style="background:#c00"| 4D
|}

Przykład pokolorowania tekstu na biało w wybranej komórce tabeli (z nadaniem koloru tła):
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
| 1A ||style="background:Brown; color:White"| 1B || 1C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
| 1A
|style="background:Brown; color:White"| 1B
| 1C
</syntaxhighlight>
<syntaxhighlight lang="text">
| 1A ||style="background:Brown; color:White"| 1B || 1C
</syntaxhighlight>
|}

Przykład pokolorowania tekstu na biało w całym wierszu tabeli (z różnymi tłami komórek):
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|- style="color:White"
|style="background:Red"| 1A
|style="background:Brown"| 1B
|style="background:Green"| 1C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|- style="color:White"
|style="background:Red"| 1A
|style="background:Brown"| 1B
|style="background:Green"| 1C
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

=== Kolorowanie obramowania – składnia ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Polecenia
Kolor obramowania ściśle wiąże się z jeszcze dwoma parametrami: stylem linii i grubością linii.

Kolor zmienia się poleceniem <code>border-color</code>. Ponieważ jednak domyślne linie wikipediowych tabel są bardzo cienkie, zmiana koloru będzie słabo widoczna albo w ogóle nie zadziała. Tak więc trzeba pogrubić obramowanie 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), gdyż domyślny styl linii jest taki, że go nie widać. 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>
|}

Ponieważ dany element tabeli może mieć tylko jedno polecenie stylu, trzeba zgrupować parametry powyższych poleceń, przedzielając je średnikami, wygodniej jednak użyć polecenia zbiorczego <code>border</code>, które jeszcze bardziej upraszcza składnię, bo podaje się w jednym miejscu wszystkie wartości rozdzielone spacjami, np.:
<syntaxhighlight lang="text">
style="border-style: solid; border-width: 4px; border-color: Red"   <− rozwlekle
style="border: solid 4px Red"                                       <− to samo wygodniej
</syntaxhighlight>

Powyższe polecenie umieszczone po znaczniku tabeli, wiersza lub komórki da następujący efekt:
{|
|
{| class="wikitable" style="margin:0; border: solid 4px Red"
| || ||
|-
| || ||
|-
| || ||
|}
|style="padding-left:1em"|
{| class="wikitable" style="margin:0"
| || ||
|- style="border: solid 4px Red"
| || ||
|-
| || ||
|}
|style="padding-left:1em"|
{| class="wikitable" style="margin:0"
| || ||
|-
| ||style="border: solid 4px Red"| ||
|-
| || ||
|}
|}

Można oczywiście zmieniać tylko wybrane krawędzie, zastępując polecenie „border” poleceniami z nazwami poszczególnych krawędzi:
<syntaxhighlight lang="text">
style="border-top: ...
style="border-right: ...
style="border-bottom: ...
style="border-left: ...
</syntaxhighlight>

Dla zachowania porządku najlepiej podawać kolejne krawędzie zgodnie ze wskazówkami zegara (tak samo, jak w przypadku marginesów), a więc: góra, prawo, spód, lewo.

Wybrane polecenia grupuje się wewnątrz jednego stylu tak samo, jak pokazano wyżej, np.:
<syntaxhighlight lang="text">
style="border-top: ...; border-right: ..."
</syntaxhighlight>

Oczywiście nie trzeba podawać wszystkich czterech kierunków, tylko te potrzebne.

Przy podawaniu koloru niezbędne jest (jak wspomniano wyżej) podanie parametru stylu linii (najlepiej linii ciągłej, czyli wartości „solid”), natomiast grubość linii nie jest konieczna, ale wtedy jej grubość wybierze przeglądarka (zazwyczaj ok. 3–4 px), np.:
<syntaxhighlight lang="text">
|style="border: solid Red"| 2A       <− bez parametru grubości
|style="border: solid 4px Red"| 4A   <− podany parametr grubości (zalecane)
</syntaxhighlight>

...da efekt:
{| class="wikitable"
| 1A ||style="border: solid Red"| 2A || 3A ||style="border: solid 4px Red"| 4A || 5A
|}

Można teraz porównać efekt domyślnego wyboru grubości w różnych przeglądarkach (w szczególności Firefox vs. Chrome). Wynika z tego, że lepiej podawać parametr grubości linii.

; Parametry krawędzi
Grubość krawędzi jest dodawana do wymiarów komórki, a więc powiększa wymiary tabeli. Użycie parametru stylu linii z wartością „hidden” nie ukrywa, tylko likwiduje krawędzie, a więc zmniejsza wymiary tabeli. Krawędzie mają domyślnie niewielką grubość, ale ich brak da się dostrzec nawet w poniższym przykładzie. Użycie parametru koloru „Transparent" zachowuje grubość ramki, choć będzie ona przezroczysta (i odsłoni kolor tła komórek). Poniżej przykład dla linii poziomych:
{| style="border-collapse:collapse"
|- valign="bottom"
|align=center style="padding-right:0; padding-bottom:0"| ''domyślnie''
 {| class="wikitable" style="margin:1ex 0 0"
 ! 1A || 1B || 1C
 |-
 | 2A || 2B || 2C
 |-
 | 3A || 3B || 3C
 |}
|align=center style="padding-right:16px; padding-bottom:0; padding-left:0;"| hidden
 {| class="wikitable" style="margin:1ex 0 0"
 ! 1A || 1B || 1C
 |- style="border-top:hidden"
 | 2A || 2B || 2C
 |- style="border-top:hidden"
 | 3A || 3B || 3C
 |}
|align=center style="padding-right:0; padding-bottom:0;"| solid 6px<br />black
 {| class="wikitable" style="margin:1ex 0 0"
 ! 1A || 1B || 1C
 |- style="border-top:solid 6px black"
 | 2A || 2B || 2C
 |- style="border-top:solid 6px black"
 | 3A || 3B || 3C
 |}
|align=center style="padding-bottom:0; padding-left:0;"| solid 6px<br />transparent
 {| class="wikitable" style="margin:1ex 0 0 0"
 ! 1A || 1B || 1C
 |- style="border-top:solid 6px transparent"
 | 2A || 2B || 2C
 |- style="border-top:solid 6px transparent"
 | 3A || 3B || 3C
 |}
|- align="center"
| a) ||style="padding-right:16px"| b) || c) || d)
|}

<syntaxhighlight lang="text">
a)  |-
b)  |- style="border-top:hidden"
c)  |- style="border-top:solid 6px black"
d)  |- style="border-top:solid 6px transparent"
</syntaxhighlight>

Zbudowanie wikitabeli całkowicie pozbawionej linii jest niezmiernie trudne. W poniższym przykładzie zlikwidowano większość linii poleceniami po znaczniku początku wiersza <code>|- style="border:hidden"</code>.
{| class="wikitable" style="margin:1ex 0 0"
|- style="border:hidden"
! 1A || 1B || 1C
|- style="border:hidden"
| 2A || 2B || 2C
|- style="border:hidden"
| 3A || 3B || 3C
|}

Usunięcie z powyższego przykładu tła też jest łatwe, ale pionowe linie trzeba skasować oddzielnie po każdym znaczniku komórki. Jest to bez sensu, dlatego lepiej wtedy skorzystać z tabeli niesformatowanej.
<!-- koniec ramki sekcji -->|}

=== Kolorowanie obramowania – pełna ramka ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Kolorowanie obramowania – pełna ramka – po znaczniku początku tabeli:
Tylko po obwodzie, bez krawędzi wewnętrznych.
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable" style="border: solid 4px Red"
|+ Tytuł
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="border: solid 4px Red"
</syntaxhighlight>
|}
----
; Kolorowanie obramowania – pełna ramka – po znaczniku tytułu:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|+ style="border: solid 4px Red"| Tytuł
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
|+ style="border: solid 4px Red"| Tytuł
</syntaxhighlight>
|}
----
; Kolorowanie obramowania – pełna ramka – po znaczniku początku wiersza
Działa na wszystkie komórki – nagłówka i zwykłe:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|- style="border: solid 4px Red"
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|- style="border: solid 4px Red"
| 3A || 3B || 3C
|-
| 4A || 4B || 4C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|- style="border: solid 4px Red"
! 01A
! 01B
! 01C
...
|- style="border: solid 4px Red"
| 3A
| 3B
| 3C
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|- style="border: solid 4px Red"
! 01A || 01B || 01C
...
|- style="border: solid 4px Red"
| 3A || 3B || 3C
</syntaxhighlight>
|}

Podgląd:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|- style="border: solid 4px Red"
! 01A || 01B || 01C || 01D
|-
! 02A || 02B || 02C || 02D
|- style="border: solid 4px Red"
! 03A || 03B ||colspan=2| 03C
|-
! 04A || 04B || 04C || 04D
|- style="border: solid 4px Red"
! 05A || 05B || ||
|-
! 06A || 06B || 06C || 06D
|- style="border: solid 4px Red"
! 07A || 07B ||colspan=2|
|-
! 08A || 8B || 08C || 08D
|- style="border: solid 4px Red"
! 09A || 09B
|}
|style="padding-left:1em"|
{| class="wikitable"
|- style="border: solid 4px Red"
| 1A || 1B || 1C || 1D
|-
| 2A || 2B || 2C || 2D
|- style="border: solid 4px Red"
| 3A || 3B ||colspan=2| 3C
|-
| 4A || 4B || 4C || 4D
|- style="border: solid 4px Red"
| 5A || 5B || ||
|-
| 6A || 6B || 6C || 6D
|- style="border: solid 4px Red"
| 7A || 7B ||colspan=2|
|-
| 8A || 8B || 8C || 8D
|- style="border: solid 4px Red"
| 9A || 9B
|}
|
{| class="wikitable" style="background:Transparent"
|-
|style="border: solid 4px Transparent"| &nbsp;
|-
|style="border-color: Transparent"| &nbsp;
|-
|style="border: solid 4px Transparent"| <− scalone
|-
|style="border-color: Transparent"| &nbsp;
|-
|style="border: solid 4px Transparent"| <− puste
|-
|style="border-color: Transparent"| &nbsp;
|-
|style="border: solid 4px Transparent"| <− puste scalone
|-
|style="border-color: Transparent"| &nbsp;
|-
|style="border: solid 4px Transparent"| <− brakujące
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|- style="border: solid 4px Red"
</syntaxhighlight>
|}

'''Uwaga:''' w niektórych przeglądarkach obramowanie przy komórkach brakujących nie wyświetla się (np. Firefox – tak, Chrome – nie).
----
; Kolorowanie obramowania – pełna ramka – po znaczniku komórki:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C
|-
| 2A ||style="border: solid 4px Red"| 2B || 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|-
| 2A
|style="border: solid 4px Red"| 2B
| 2C
</syntaxhighlight>
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|-
| 2A ||style="border: solid 4px Red"| 2B || 2C
</syntaxhighlight>
|}

Także komórki scalone:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C || 01D
|-
| 2A ||colspan=2 style="border: solid 4px Red"| 2B || 2D
|-
| 3A || 3B || 3C || 3D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|-
| 2A
|colspan=2 style="border: solid 4px Red"| 2B
| 2D
</syntaxhighlight>
<syntaxhighlight lang="text">
|-
| 2A ||colspan=2 style="border: solid 4px Red"| 2B || 2D
</syntaxhighlight>
|}

'''Uwaga:''' w przypadku wspólnej ramki dla kilku komórek (niescalonych) należy pokolorować oddzielnie każdą potrzebną krawędź w każdej z wybranych komórek, co zostało opisane w dalszej części poradnika.
<!-- koniec ramki sekcji -->|}

=== Kolorowanie obramowania – wybrane krawędzie ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Kolorowanie obramowania – wybrane krawędzie – po znaczniku początku tabeli:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable" style="border-left: solid 4px Red"
|+ Tytuł
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable" style="border-left: solid 4px Red"
</syntaxhighlight>
|}
----
; Kolorowanie obramowania – wybrane krawędzie – po znaczniku tytułu:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|+ style="border-left: solid 4px Red"| Tytuł
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| class="wikitable"
|+ style="border-left: solid 4px Red"| Tytuł
</syntaxhighlight>
|}
----
; Kolorowanie obramowania – wybrane krawędzie – po znaczniku początku wiersza:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|- style="border-bottom: solid 4px Red"
! 01A || 01B || 01C
|-
| 2A || 2B || 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|- style="border-bottom: solid 4px Red"
! 01A...
</syntaxhighlight>
|}
----
; Kolorowanie obramowania – wybrane krawędzie – po znaczniku komórki:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|-
! 01A || 01B || 01C
|-
| 2A ||style="border-bottom: solid 4px Red"| 2B || 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-bottom: solid 4px Red"| 2B
</syntaxhighlight>
|}

Kilka komórek poziomo:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|-
! 01A || 01B || 01C || 01D
|-
| 2A
|style="border-bottom: solid 4px Red"| 2B
|style="border-bottom: solid 4px Red"| 2C
| 2D
|-
| 3A || 3B || 3C || 3D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-bottom: solid 4px Red"| 2B
|style="border-bottom: solid 4px Red"| 2C
</syntaxhighlight>
|}

Kilka komórek pionowo:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|-
! 01A || 01B || 01C
|-
| 2A
|style="border-left: solid 4px Red"| 2B
| 2C
|-
| 3A
|style="border-left: solid 4px Red"| 3B
| 3C
|-
| 4A || 4B || 4C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-left: solid 4px Red"| 2B
...
|style="border-left: solid 4px Red"| 3B
</syntaxhighlight>
|}
----
; Po znaczniku komórki – kilka krawędzi:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|-
! 01A || 01B || 01C
|-
| 2A ||style="border-top: solid 4px Red; border-right: solid 4px Orange; border-left: solid 4px Cyan"| 2B || 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-top: solid 4px Red; border-right: solid 4px Orange; border-left: solid 4px Cyan"| 2B
</syntaxhighlight>
|}
----
; Po znaczniku komórki – kilka komórek – wspólna ramka:
Ramka wokół więcej niż jednej komórki wymaga, aby zdefiniować oddzielnie każdą krawędź w każdej z komórek:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A
!style="border-top: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red"| 01B
!style="border-top: solid 4px Red; border-bottom: solid 4px Red"| 01C
!style="border-top: solid 4px Red; border-right: solid 4px Red; border-bottom: solid 4px Red"| 01D
! 01E
|-
| 2A || 2B || 2C || 2D || 2E
|-
| 3A || 3B || 3C || 3D || 3E
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
! 01A
!style="border-top: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red"| 01B
!style="border-top: solid 4px Red; border-bottom: solid 4px Red"| 01C
!style="border-top: solid 4px Red; border-right: solid 4px Red; border-bottom: solid 4px Red"| 01D
! 01E
</syntaxhighlight>
|}

{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C
|-
| 2A
|style="border-top: solid 4px Red; border-right: solid 4px Red; border-left: solid 4px Red"| 2B
| 2C
|-
| 3A
|style="border-left: solid 4px Red; border-right: solid 4px Red"| 3B
| 3C
|-
| 4A
|style="border-right: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red"| 4B
| 4C
|-
| 5A || 5B || 5C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-top: solid 4px Red; border-right: solid 4px Red; border-left: solid 4px Red"| 2B
...
|style="border-left: solid 4px Red; border-right: solid 4px Red"| 3B
...
|style="border-right: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red"| 4B
</syntaxhighlight>
|}

{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C || 01D
|-
| 2A
|style="border-top: solid 4px Red; border-left: solid 4px Red"| 2B
|style="border-top: solid 4px Red; border-right: solid 4px Red"| 2C
| 2D
|-
| 3A
|style="border-bottom: solid 4px Red; border-left: solid 4px Red"| 3B
|style="border-bottom: solid 4px Red; border-right: solid 4px Red"| 3C
| 3D
|-
| 4A || 4B || 4C || 4D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-top: solid 4px Red; border-left: solid 4px Red"| 2B
|style="border-top: solid 4px Red; border-right: solid 4px Red"| 2C
...
|style="border-bottom: solid 4px Red; border-left: solid 4px Red"| 3B
|style="border-bottom: solid 4px Red; border-right: solid 4px Red"| 3C
</syntaxhighlight>
|}
----
; Zapisz uproszczony
Zamiast definiowania każdej krawędzi z osobna, można użyć sztuczki: zdefiniować całą ramkę, a następnie wyłączyć wybrane krawędzie. Przy dwóch krawędziach zysku nie będzie, ale dla jednej wolnej krawędzi jest to opłacalne:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|-
| 1A || 1B || 1C
|-
|style="border-right: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| 2A || 2B
|style="border: solid 4px Red; border-top:0;"| 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-right: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| 2A
...
|style="border: solid 4px Red; border-top: 0;"| 2C
</syntaxhighlight>
|}
W taki sam sposób można zmienić parametry wybranej krawędzi:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
|-
| 1A || 1B || 1C
|-
|style="border-top: solid 14px Red; border-right: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| 2A || 2B
|style="border: solid 4px Red; border-top: solid 14px Red;"| 2C
|-
| 3A || 3B || 3C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
|style="border-top: solid 14px Red; border-right: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| 2A
...
|style="border: solid 4px Red; border-top: solid 14px Red;"| 2C
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

=== Problem z krawędziami komórek scalonych ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
Istnieje różnica pomiędzy przeglądarką Firefox, która wyświetla krawędzie zawsze dokładnie, a przeglądarkami opartymi na silniku WebKit/Chromium i podobnych (np. Chrome, Opera, Safari). W tych drugich często modyfikacja wybranej krawędzi komórki pojedynczej rozciąga się na całą długość krawędzi w stykającej się z nią komórce scalonej. Dzieje się to w połowie podanych poniżej przykładów, a nawet tam, gdzie krawędź nie została rozciągnięta, wyświetlanie krawędzi jest niedoskonałe. Poniższy problem nie dotyczy jednak krawędzi ukrytych („hidden”). Wyjątkowo w tym przypadku wszystkie przeglądarki działają poprawnie.

W poniższych przykładach strzałka pokazuje zmodyfikowaną krawędź pojedynczej komórki. '''Warto obejrzeć ten przykład w różnych przeglądarkach.''' Tylko ostatni przykład z prawej jest wyświetlany zawsze dobrze.
{| style="margin-top:-1ex;"
|
 {| class="wikitable"
 |rowspan=2| 1A ||style="background:MistyRose; border-left: solid 4px Red"| ←1B
 |-
 | 2B
 |}
 {| class="wikitable"
 |rowspan=2| 1A || 1B
 |-
 |style="background:MistyRose; border-left: solid 4px Red"| ←2B
 |}
 {| class="wikitable"
 |style="background:MistyRose; border-right: solid 4px Red"| 1A→ ||rowspan=2| 1B
 |-
 | 2A
 |}
 {| class="wikitable"
 | 1A ||rowspan=2| 1B
 |-
 |style="background:MistyRose; border-right: solid 4px Red"| 2A→
 |}
|style="padding-left:1em"|
 {| class="wikitable"
 |colspan=2| 1A
 |-
 |style="background:MistyRose; border-top: solid 4px Red"| ↑2A || 2B
 |}
 {| class="wikitable"
 |colspan=2| 1A
 |-
 | 2A ||style="background:MistyRose; border-top: solid 4px Red"| ↑2B
 |}
 {| class="wikitable"
 |style="background:MistyRose; border-bottom: solid 4px Red"| ↓1A || 1B
 |-
 |colspan=2| 2A
 |}
 {| class="wikitable"
 | 1A ||style="background:MistyRose; border-bottom: solid 4px Red"| ↓1B
 |-
 |colspan=2| 2A
 |}
|}
<!-- koniec ramki sekcji -->|}

=== Kolorowanie obramowania – paski ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Paski poziome
Zamiast pokolorowanych poziomych krawędzi komórek można zrobić wąskie paski z komórek scalonych. Mają one własną estetykę, bowiem składają się z obrysu i tła. Poziomy rząd pustych scalonych komórek, a de facto jedna, rozciągnięta pusta komórka, ma bardzo małą wysokość, bo składającą się tylko z domyślnego paddingu, który wynosi w pionie 0.2em.

Tło komórek scalonych można pokolorować na 3 sposoby:
* dla komórek scalonych nagłówka – tylko po znaczniku komórki,
* dla komórek scalonych zwykłych – po znaczniku początku wiersza lub po znaczniku komórki,

...dlatego poniżej podano 3 przykłady.

Paskami są w tabeli wiersze nr 2, 5 i 7 – stąd taka z pozoru nietypowa numeracja komórek w poniższych przykładach.
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C || 01D
|-
!colspan=4 style="background:Gold"|
|-
! 03A || 03B || 03C || 03D
|-
| 4A || 4B || 4C || 4D
|- style="background:Gold"
|colspan=4|
|-
| 6A || 6B || 6C || 6D
|-
|colspan=4 style="background:Gold"|
|-
| 8A || 8B || 8C || 8D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
!colspan=4 style="background:Gold"|
...
|- style="background:Gold"
|colspan=4|
...
|colspan=4 style="background:Gold"|
</syntaxhighlight>
|}
----
; Paski pionowe
W podobny sposób (polecenie „rowspan” zamiast „colspan”) można zrobić pasek pionowy. Będzie on jednak szerszy, bo pusta komórka ma poziomy padding aż 0.4em:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A ||rowspan=4| || 01C || 01D
|-
! 02A || 02C || 02D
|-
| 3A || 3C || 3D
|-
| 4A || 4C || 4D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
! 01A ||rowspan=4| || 01C || 01D
|-
! 02A || 02C || 02D
|-
| 3A || 3C || 3D
|-
| 4A || 4C || 4D
</syntaxhighlight>
|}

W powyższym przykładzie pionowy pasek komórek scalonych jest szary, bo pierwsza scalona komórka jest komórką nagłówka. Aby pasek był biały, pierwsza ze scalonych komórek musi być zwykła, czyli poprzedzona pałką zamiast wykrzyknika i rozpoczęta w nowej linijce kodu:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A
|rowspan=4|
! 01C || 01D
|-
! 02A || 02C || 02D
|-
| 3A || 3C || 3D
|-
| 4A || 4C || 4D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
! 01A
|rowspan=4|
! 01C || 01D
|-
! 02A || 02C || 02D
|-
| 3A || 3C || 3D
|-
| 4A || 4C || 4D
</syntaxhighlight>
|}

Nadając górnej i dolnej krawędzi tego pionowego paska wartość „hidden”, możemy zasymulować rozsunięcie kolumn. Aby było to widoczne, całość pokazano na białym tle:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| style="background:White"
| style="padding:0 1em"|
{| class="wikitable"
! 01A
|rowspan=4 style="border-top:hidden; border-bottom:hidden"|
! 01C || 01D
|-
! 02A || 02C || 02D
|-
| 3A || 3C || 3D
|-
| 4A || 4C || 4D
|}
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
! 01A
|rowspan=4 style="border-top:hidden; border-bottom:hidden"|
! 01C || 01D
</syntaxhighlight>
|}

Chyba że wszystkie komórki pierwszego wiersza będą zwykłe, wtedy można dać wszystko w jednej linijce kodu, np.:
<syntaxhighlight lang="text">
| 1A ||rowspan=4 style="border-top:hidden; border-bottom:hidden"| || 1C || 1D
</syntaxhighlight>

...albo oczywiście w oddzielnych linijkach kodu, jak kto woli.
----
; Paski zwężone
Komórki scalone w pionie możemy też wykorzystać jako symulację pionowej krawędzi, jeśli ten pasek zwęzimy. Szerokości komórki nie zmniejszymy (polecenie „width” działa tylko w górę), ale możemy zmniejszyć domyślny padding poziomy, który wynosi „0.4em”. Poniżej zmniejszono padding poziomy, ustawiając padding na „2px”. Nie trzeba stosować poleceń „padding-left” i „padding-right”. Wystarczy ogólnie „padding” (działający we wszystkich 4 kierunkach), bo góra i dół nas tu nie interesują, gdyż w sąsiednich komórkach pozostaną domyślnie wyższe.

Jest to wygodniejsze rozwiązanie, niż nadawanie każdej potrzebnej komórce w każdym wierszu koloru wybranej krawędzi pionowej. Poniżej przykład takiego zwężonego paska komórek scalonych z nadanym czerwonym tłem. Komórka 01B, której numeru nie widać, to komórki scalone:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A
!rowspan=4 style="padding:2px; background:Red"|
! 01C || 01D
|-
! 02A || 02C || 02D
|-
| 3A || 3C || 3D
|-
| 4A || 4C || 4D
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
! 01A
!rowspan=4 style="padding:2px; background:Red"|
! 01C || 01D
</syntaxhighlight>
|}

Podobnie robi się paski zwężone w poziomie („colspan” zamiast „rowspan”). Tu jednak zastosowana wartość paddingu jest tylko niewiele mniejsza od domyślnej:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| class="wikitable"
! 01A || 01B || 01C
|-
!colspan=3 style="padding:2px; background:Red"|
|-
! 03A || 03B || 03C
|-
| 4A || 4B || 4C
|- style="background:Red"
|colspan=3 style="padding:2px"|
|-
| 6A || 6B || 6C
|-
!colspan=3 style="padding:2px; background:Red"|
|-
| 8A || 8B || 8C
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
!colspan=3 style="padding:2px; background:Red"|
...
|- style="background:Red"
|colspan=3 style="padding:2px"|
...
|colspan=3 style="padding:2px; background:Red"|
</syntaxhighlight>
|}

Porównanie domyślnych szerokości pustych pasków komórek scalonych i ich korekty do paddingu 2px, czyli szerokości 4px:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
 {| class="wikitable"
 | 1A || 1B || 1C
 |-
 |colspan=3 style="background:Red"|
 |-
 | 3A || 3B || 3C
 |-
 |colspan=3 style="padding:2px; background:Red"|
 |-
 | 5A || 5B || 5C
 |}
|
 {| class="wikitable"
 ! 01A || 01B || 01C
 |-
 !colspan=3 style="background:Red"|
 |-
 ! 03A || 03B || 03C
 |-
 !colspan=3 style="padding:2px; background:Red"|
 |-
 ! 05A || 05B || 05C
 |}
|style="padding-left:2em"|
 {| class="wikitable"
 | 1A ||rowspan=3 style="background:Red"| || 1C ||rowspan=3 style="padding:2px; background:Red"| || 1E
 |-
 | 2A || 2C || 2E
 |-
 | 3A || 3C || 3E
 |}
|
 {| class="wikitable"
 ! 01A ||rowspan=3 style="background:Red"| || 01C ||rowspan=3 style="padding:2px; background:Red"| || 01E
 |-
 ! 02A || 02C || 02E
 |-
 ! 03A || 03C || 03E
 |}
|}
<!-- koniec ramki sekcji -->|}

=== Kolorowanie w tabelach niesformatowanych ===
<!-- początek ramki sekcji -->{| style="background:Bisque; border:solid 1px; margin-bottom:1em; padding:0px 10px; width:1000px"
|<!-- aż dotąd -->
; Tekst na tle
Tekst na kolorowym tle można zrobić w postaci tabeli niesformatowanej z tylko jedną komórką. Poniżej przykład domyślny (z zerowym paddingiem) oraz z wartościami paddingu z wikitabeli.
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| style="background:LightBlue"
| Tekst
|}<br />
{| style="background:LightBlue"
|style="padding:0.2em 0.4em"| Tekst
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| style="background:LightBlue"
| Tekst
|}

{| style="background:LightBlue"
|style="padding:0.2em 0.4em"| Tekst
|}
</syntaxhighlight>
|}

W przypadku wielu komórek zamiast polecenia „padding” wygodniej jest użyć polecenia „border-spacing”, bo użyjemy go tylko raz dla całej tabeli („paddingu” się nie da). Poniżej wybrano wartości odpowiadające paddingowi wikitabeli.

Dodano również polecenie „margin” dla domyślnego odstępu pionowego przed i po tabeli, jaki jest w wikitabeli. W przykładzie wyżej widać, że tabela jest zbyt blisko poprzedniego akapitu.

Pozostaje jednak problem wyrównywania w pionie. W poniższym przykładzie działa domyślne wyrównywanie, które jest w połowie wysokości komórki:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| style="margin:1em 0; border-spacing:8px 4px; background:LightBlue"
| Tekst<br />akapitu || Tekst
|-
| Tekst || Tekst<br />akapitu
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| style="margin:1em 0; border-spacing:8px 4px; background:LightBlue"
| Tekst<br />akapitu || Tekst
|-
| Tekst || Tekst<br />akapitu<br />dłuższy
|}
</syntaxhighlight>
|}

Poniżej wszystko już OK. Odstępy zewnętrzne jak w wikitabeli, wyrównywanie do góry (bo najczęściej tak pasuje), a odstępy wewnętrzne („border-spacing”) powiększono eksperymentalnie tak, by pasowały do aktualnie prezentowanej treści.
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{| style="margin:1em 0; border-spacing:24px 12px; background:LightBlue"
|- valign="top"
| Tekst<br />akapitu || Tekst<br />akapitu<br />dłuższy
|- valign="top"
| Tekst<br />akapitu || Tekst<br />akapitu<br />jeszcze<br />dłuższy
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{| style="margin:1em 0; border-spacing:24px 12px; background:LightBlue"
|- valign="top"
| Tekst<br />akapitu || Tekst<br />akapitu<br />dłuższy
|- valign="top"
| Tekst<br />akapitu || Tekst<br />akapitu<br />jeszcze<br />dłuższy
|}
</syntaxhighlight>
|}
----
; Symulacja pionowej linii akapitowej
Do wyróżnienia fragmentu tekstu, np. do wskazania definicji, cytatu lub dowolnego innego opisu czegoś konkretnego, można wykorzystać tabelę niesformatowaną, czyli bez klasy „wikitable”, a tylko z gołym znacznikiem <code>„{|”</code>, w której będzie tylko jedna komórka, za to z pokolorowaną krawędzią boczną i odpowiednio powiększonym odstępem za pomocą polecenia „padding”:
{| style="margin-top:-1ex;"
|- style="vertical-align:top"
|
{|
|style="padding-left:1em; border-left: solid .5em Red"| Tu tekst dowolnej<br />długości, nawet kilka<br />akapitów z ilustracjami<br />i tabelami.
|}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{|
|style="padding-left:1em; border-left: solid .5em Red"| Tu tekst...
|}
</syntaxhighlight>
|}
<!-- koniec ramki sekcji -->|}

== Właściwości tekstu ==
Teksty w tabeli można modyfikować tak samo jak zwykły tekst poza tabelą. Dodatkowo w tabelach można modyfikować jednym poleceniem wszystkie komórki w wierszu:
<syntaxhighlight lang="text">
{| class="wikitable"
|- style="font-style:italic"
| kursywa
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-weight:bold"
| pogrubienie
| we wszystkich trzech
| komórkach tego wiersza
|- style="color:Green"
| zielony
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-size:125%"
| powiększenie 125%
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-size:75%"
| zmniejszenie 75%
| we wszystkich trzech
| komórkach tego wiersza
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
|- style="font-style:italic"
| kursywa
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-weight:bold"
| pogrubienie
| we wszystkich trzech
| komórkach tego wiersza
|- style="color:Green"
| zielony
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-size:125%"
| powiększenie 125%
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-size:75%"
| zmniejszenie 75%
| we wszystkich trzech
| komórkach tego wiersza
|}

Atrybuty można podawać w jednym stylu, przedzielając je średnikiem:
<syntaxhighlight lang="text">
{| class="wikitable"
|- style="font-weight:bold; font-style:italic"
| pogrubienie + kursywa
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-weight:bold; font-style:italic; color:Green"
| pogrubienie + kursywa + zielony
| we wszystkich trzech
| komórkach tego wiersza
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
|- style="font-weight:bold; font-style:italic"
| pogrubienie + kursywa
| we wszystkich trzech
| komórkach tego wiersza
|- style="font-weight:bold; font-style:italic; color:Green"
| pogrubienie + kursywa + zielony
| we wszystkich trzech
| komórkach tego wiersza
|}

Niezależnie od ostylowania całego wiersza tabeli można dodawać (1), a nawet zmieniać (2) atrybuty w poszczególnych komórkach:
<syntaxhighlight lang="text">
{| class="wikitable"
|- style="color:Green"
| 1.
| zielony
|style="font-weight:bold"| dodatkowo pogrubienie
| zielony
|- style="color:Green"
| 2.
| zielony
|style="color:Red"| zmiana na czerwony
| zielony
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
|- style="color:Green"
| 1.
| zielony
|style="font-weight:bold"| dodatkowo pogrubienie
| zielony
|- style="color:Green"
| 2.
| zielony
|style="color:Red"| zmiana na czerwony
| zielony
|}

== Osadzanie tabel ==
poniższy kod:
<syntaxhighlight lang="text">
{| class="wikitable"
| komórka 1
|
{| class="wikitable" style="background:LightBlue"
| tabela
|-
| osadzona
|}
| komórka 3
|}
</syntaxhighlight>

...dodaje tabelę osadzoną w drugiej komórce tabeli zewnętrznej
{| class="wikitable"
| komórka 1
|
{| class="wikitable" style="background:LightBlue"
| tabela
|-
| osadzona
|}
| komórka 3
|}

Uwaga: kod tabeli osadzonej musi zaczynać się od nowego wiersza.

== Kilka tabel obok siebie ==
=== Metoda osadzania ===
Najprostszą metodą jest stworzenie nadrzędnej gołej tabeli bez formatowania (czyli bez <code>class="wikitable"</code>) składającej się tylko z jednego wiersza. W kolejnych komórkach tego wiersza umieszczamy normalne, wikipediowe tabele (czyli zawierające <code>class="wikitable"</code>), 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:
<syntaxhighlight lang="text">
początek tabeli nadrzędnej:   {|
      komórka dla tabeli 1:   |
         początek tabeli 1:   {| class="wikitable"
                              ...
           koniec tabeli 1:   |}
        komórka z odstępem:   | &nbsp;
      komórka dla tabeli 2:   |
         początek tabeli 2:   {| class="wikitable"
                              ...
           koniec tabeli 2:   |}
  koniec tabeli nadrzędnej:   |}
</syntaxhighlight>

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 wstawienie w tabeli nadrzędnej znacznika początku wiersza po to, by umieścić w nim polecenie wyrównywania komórek (z osadzonymi tabelami) do góry:

 początek tabeli nadrzędnej:   {|
                               <span style="color: Red">|- style="vertical-align: top"|</span>
       komórka dla tabeli 1:   |
          początek tabeli 1:   {| class="wikitable"
                               ...
            koniec tabeli 1:   |}
         komórka z odstępem:   | &amp;nbsp;
       komórka dla tabeli 2:   |
          początek tabeli 2:   {| class="wikitable"
                               ...
            koniec tabeli 2:   |}
   koniec tabeli nadrzędnej:   |}
{|
|- style="vertical-align: top"
|
{| 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ść
|}
|}

Metoda osadzania 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.:
<syntaxhighlight lang="text">
{| class="wikitable"
! Nagłówek A
! Nagłówek B
!rowspan=3 style="border-top-color: White; border-bottom-color: White; background: White"| Trzecia<br />kolu-<br />mna
! Nagłówek D
! Nagłówek E
|-
| Komórka 1A
| Komórka 1B
| Komórka 1D
| Komórka 1E
|-
| Komórka 2A
| Komórka 2B
| Komórka 2D
| Komórka 2E
|}
</syntaxhighlight>

...co daje:
{| class="wikitable"
! Nagłówek A
! Nagłówek B
!rowspan=3 style="border-top-color: White; border-bottom-color: White; background: White"| Trzecia<br />kolu-<br />mna
! Nagłówek D
! Nagłówek E
|-
| Komórka 1A
| Komórka 1B
| Komórka 1D
| Komórka 1E
|-
| Komórka 2A
| Komórka 2B
| Komórka 2D
| Komórka 2E
|}

Identyczny efekt można uzyskać nieco innymi poleceniami, umieszczając jedną część w pierwszej linii kodu tabeli, a drugą przy wybranej kolumnie (takie rozwiązanie jest wygodniejsze przy wielu białych kolumnach):
<syntaxhighlight lang="text">
{| class="wikitable" style="border: none"
! Nagłówek A
! Nagłówek B
!rowspan=3 style="border: none; background: White"| Trzecia<br />kolu-<br />mna
! Nagłówek D
! Nagłówek E
|-
| Komórka 1A
| Komórka 1B
| Komórka 1D
| Komórka 1E
|-
| Komórka 2A
| Komórka 2B
| Komórka 2D
| Komórka 2E
|}
</syntaxhighlight>

...co również daje:
{| class="wikitable" style="border: none"
! Nagłówek A
! Nagłówek B
!rowspan=3 style="border: none; background: White"| Trzecia<br />kolu-<br />mna
! Nagłówek D
! Nagłówek E
|-
| Komórka 1A
| Komórka 1B
| Komórka 1D
| Komórka 1E
|-
| Komórka 2A
| Komórka 2B
| Komórka 2D
| Komórka 2E
|}

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: White"|
| x
| x
|-
| x
| x
| x
| x
|}

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

Dodatkową zaletą niby-dzielonej tabeli (z białą kolumną) jest identyczna wysokość wszystkich komórek w wierszu (de facto jest to wciąż jedna tabela), np.:
{|
|- align=center
! Jedna wspólna tabela<br />niby-dzielona
|
! Dwie tabele obok siebie<br />w komórkach tabeli nadrzędnej
|-
|
 {| class="wikitable"
 | bardzo&nbsp;dużo<br />treści&nbsp;w&nbsp;tej&nbsp;<br />komórce
 | rowspan=3 style="border-top-color: White; border-bottom-color: White; background: White"| biała<br />kolu-<br />mna
 | mało&nbsp;treści
 |-
 | bardzo&nbsp;dużo<br />treści&nbsp;w&nbsp;tej&nbsp;<br />komórce
 | mało&nbsp;treści
 |-
 | bardzo&nbsp;dużo<br />treści&nbsp;w&nbsp;tej&nbsp;<br />komórce
 | mało&nbsp;treści
 |}
|width=100px|
|
 {| style="border-collapse:collapse" cellpadding=0
 |
  {| class="wikitable" style="margin:0 2em 0 0"
  | bardzo&nbsp;dużo<br />treści&nbsp;w&nbsp;tej&nbsp;<br />komórce
  |-
  | bardzo&nbsp;dużo<br />treści&nbsp;w&nbsp;tej&nbsp;<br />komórce
  |-
  | bardzo&nbsp;dużo<br />treści&nbsp;w&nbsp;tej&nbsp;<br />komórce
  |}
 |valign=top|
  {| class="wikitable" style="margin:0"
  | mało&nbsp;treści
  |-
  | mało&nbsp;treści
  |-
  | mało&nbsp;treści
  |}
 |}
|}

== Kilka tabel z wyrównanymi kolumnami ==
Poniżej dwa zestawy, w każdym te same 3 niezależne tabele. Każdy zestaw wydzielony w przerywanej ramce tylko dla przykładu, chodzi o wnętrze obu ramek. W drugim zestawie dołożono polecenia <code>width</code> o takich samych wartościach dla każdej z 3 tabel po to, by miały taką samą szerokość.

{| style="border: dashed 1px"
|colspan=2| Kilka tabel z kolumnami o '''dynamicznej szerokości''':
|-
| &nbsp; &nbsp; &nbsp;
|-
|
|
{|
|- style="background: #DDD"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || „[[We Got the Party|We Got The Party]]” || Greg Wells, Kara DioGuardi || 3:37
|}

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

{|
|- style="background: #DDD"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || „[[See You Again (singel Miley Cyrus)|See You Again]]” || Miley Cyrus, Armato, James || 3:10
|}
| &nbsp; &nbsp; &nbsp;
|-
| &nbsp;
|}
<br />
{| style="border: dashed 1px"
|colspan=2| Kilka tabel z wyrównanymi kolumnami o '''stałej szerokości''':
|-
| &nbsp; &nbsp; &nbsp;
|-
|
|
{|
|- style="background: #DDD"
!width=30| Numer
!width=180| Tytuł
!width=250| Autor
!width=35| Czas
|-
| 1. || „[[We Got the Party|We Got The Party]]” || Greg Wells, Kara DioGuardi || 3:37
|}

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

{|
|- style="background: #DDD"
!width=30| Numer
!width=180| Tytuł
!width=250| Autor
!width=35| Czas
|-
| 1. || „[[See You Again (singel Miley Cyrus)|See You Again]]” || Miley Cyrus, Armato, James || 3:10
|}
| &nbsp; &nbsp; &nbsp;
|-
| &nbsp;
|}

'''Kody'''
{| class="wikitable"
|-
|style="background:MintCream"| Kod kilku tabel z kolumnami o dynamicznej szerokości
|-
|<syntaxhighlight lang="xml">
{|
|- style="background: #DDD"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || „[[We Got the Party|We Got The Party]]” || Greg Wells, Kara DioGuardi || 3:37
|}

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

{|
|- style="background: #DDD"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || „[[See You Again (singel Miley Cyrus)|See You Again]]” || Miley Cyrus, Armato, James || 3:10
|}
</syntaxhighlight>
|-
|style="background:MintCream" |Kod kilku tabel z wyrównanymi kolumnami stałej szerokości
|-
|<syntaxhighlight lang="xml">
{|
|- style="background: #DDD"
!width=30| Numer
!width=180| Tytuł
!width=250| Autor
!width=35| Czas
|-
| 1. || „[[We Got the Party|We Got The Party]]” || Greg Wells, Kara DioGuardi || 3:37
|}

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

{|
|- style="background: #DDD"
!width=30| Numer
!width=180| Tytuł
!width=250| Autor
!width=35| Czas
|-
| 1. || „[[See You Again (singel Miley Cyrus)|See You Again]]” || Miley Cyrus, Armato, James || 3:10
|}
</syntaxhighlight>
|}

== 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.
<syntaxhighlight 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
| ?
|}
</syntaxhighlight>

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. Możliwe jest sortowanie po dwóch (klikając na drugiej kol. z wciśniętym klawiszem {{Klawisz|shift}}) i więcej kolumnach (sortując je w odwrotnej, od zamierzonej, kolejności - [[:en:Help:Sorting#Secondary_key]]).<br />'''Uwaga:''' „klepsydry” pojawią się tylko wtedy, gdy wszystkie komórki w wierszu będą komórkami nagłówka.

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

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&nbsp;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:
<syntaxhighlight lang="text">
{| class="wikitable sortable" style="text-align:right"
!width=100| Kolumna główna
!width=80 class="unsortable"| Nie sortujemy
!width=80| Sortowanie liczb
...
</syntaxhighlight>

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=100| Kolumna główna
!width=80 class="unsortable"| Po tej kolumnie nie sortujemy
!width=80| 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"''':
<syntaxhighlight lang="text">
|-
! Rok 2003
| nie sortujemy
| 21
|- class="sortbottom"
! Podsumowanie
| Sortowanie tabel nie jest trudne
| 45
|}
</syntaxhighlight>
Dla górnych wierszy jest to '''class="sorttop"'''.

Górne i dolne wiersze można też zablokować przed sortowaniem, oznaczając w nich wszystkie pola jako nagłówki (stopki), używając <code>!</code>. Przy blokowaniu w ten sposób górnych wierszy, wiersz sortowania (strzałki sortowania) przenoszone są w dół.

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

;Wartości śladowe
Czasami chcemy w tabeli zamieścić wartość minimalną, opisaną słownie (np. „poniżej 1 mg”
albo „wartość śladowa”). Aby taka wartość była sortowana jako najmniejsza z wartości
podanych w tabeli, należy użyć pomocniczego szablonu {{s|poniżej}}. W poniższym przykładzie wykorzystany został również szablon {{s|L}}, dzięki czemu liczby są wyrównane do prawej, a ich wartości prawidłowo rozpoznawane:

<pre><nowiki>{|class="wikitable sortable"
|-
! Próbka
! Dawka w mg
|-
|1
|{{L|5}}
|-
|2
|{{L|f=tak|8.5}}
|-
|3
|{{L|1}}
|-
|4
|{{Poniżej|< 1}}
|-
|5
|{{L|f=tak|5.5}}
|-
|}</nowiki></pre>
Szablon {{s|L}} wymaga użycia kropki jako separatora dziesiętnego; parametr <code>f=tak</code> zamienia go na przecinek.

W ten sposób wartość najmniejsza (<code>< 1</code>) jest sortowana w tabeli jako wartość najmniejsza:

{|class="wikitable sortable"
|-
! Próbka
! Dawka w mg
|-
|1
|{{L|5}}
|-
|2
|{{L|f=tak|8.5}}
|-
|3
|{{L|1}}
|-
|4
|{{Poniżej|< 1}}
|-
|5
|{{L|f=tak|5.5}}
|-
|}

; Sortowanie liczb rzymskich i dat p.n.e.
W celu poprawnego sortowania liczb rzymskich i dat p.n.e., przed daną liczbą należy wstawić parametr '''<code>| data-sort-value=[liczba arabska]</code>''':
: <code>| [liczba rzymska]</code> → <code>| data-sort-value=[liczba arabska] | [liczba rzymska]</code>
: <code>| [data p.n.e.]</code> → <code>| data-sort-value=[-data] | [data p.n.e.]</code>

Do sortowania liczb rzymskich można stosować również szablon pomocniczy {{S|sortkey}}, jednak jego użycie nie jest zalecane i nie zawsze działa on poprawnie. W takim przypadku zamiast <code>XIX</code> należy wpisać <code><nowiki>{{sortkey|19}}</nowiki> XIX</code>. 

Przykładowa tabela:
{| class="sortable wikitable"
|-
! Bez dodatków
! Z <code><nowiki>| data-sort-value=</nowiki></code>
! Z <code><nowiki>{{sortkey}}</nowiki></code>
|-
| I
| data-sort-value=1|I
| {{sortkey|1}} I
|-
| II
| data-sort-value=2|II
| {{sortkey|2}} II
|-
| III
| data-sort-value=3|III
| {{sortkey|3}} III
|-
| IV
| data-sort-value=4|IV
| {{sortkey|4}} IV
|-
| V
| data-sort-value=5|V
| {{sortkey|5}} V
|-
| VI
| data-sort-value=6|VI
| {{sortkey|6}} VI
|-
| VII
| data-sort-value=7|VII
| {{sortkey|7}} VII
|-
| VIII
| data-sort-value=8|VIII
| {{sortkey|8}} VIII
|-
| IX
| data-sort-value=9|IX
| {{sortkey|9}} IX
|-
| X
| data-sort-value=10|X
| {{sortkey|10}} X
|}

=== Sortowanie dat w tabelach ===
{{Zobacz też|Szablon:Dts}}
Daty w tabelach są prawidłowo sortowane, gdy podane są w cyfrowym formacie [rrrr]-[mm]-[dd] (rok-miesiąc-dzień, np. <code>1999-11-22</code>) oraz cyfrowo-słownym [d(d)] [miesiąca] [rrrr], np. <code>2 listopada 1999</code>. W przypadku nieprawidłowego sortowania dat można wykorzystać szablon {{s|dts}}. Przykładowo następujący wiki-kod:
<syntaxhighlight lang="text">
{| class="wikitable sortable" style="text-align:right"
! Kolumna główna
! Sortowanie dat<br/>(szablon dts)
! Sortowanie dat<br/>(rrrr-mm-dd)
! Sortowanie dat<br/>(d(d) [miesiąca] rrrr)
! Sortowanie liczb
|-
! Pozycja 1
| {{dts|11|01|1999}}
| 1999-01-11
| 11 stycznia 1999
| 245
|-
! Pozycja 2
| {{dts|03|07|1995}}
| 1995-07-03
| 3 lipca 1995
| 127
|-
! Pozycja 3
| {{dts|07|03|1997}}
| 1997-03-07
| 7 marca 1997
| 21
|}
</syntaxhighlight>

...buduje 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 dat<br/>(dd [miesiąca] rrrr)
! Sortowanie liczb
|-
! Pozycja 1
| {{dts|11|01|1999}}
| 1999-01-11
| 11 stycznia 1999
| 245
|-
! Pozycja 2
| {{dts|03|07|1995}}
| 1995-07-03
| 3 lipca 1995
| 127
|-
! Pozycja 3
| {{dts|07|03|1997}}
| 1997-03-07
| 7 marca 1997
| 21
|}
Prawidłowe sortowanie w formacie cyfrowo-słownym zostało wprowadzone na początku lat 20. XXI w. i w zasadzie sprawia, że stosowanie szablonu {{S|dts}} stało się zazwyczaj zbędne.

=== Sortowanie nazwisk w tabelach ===
{{Zobacz też|Szablon:Sortname}}
Problemy w tabelach może sprawiać również sortowanie biogramów 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:
<syntaxhighlight lang="text">
{| class="wikitable sortable"
! Imię i nazwisko
! Dziedzina
! Rok
|-
| {{sortname|Greg|Walden}}
| polityk
| 1991
|-
| {{sortname|Wes|Cooley}}
| działacz
| 1996
|-
| {{sortname|Dennis|Smith|Denny Smith}}
| aktywista
| 1994
|-
| {{sortname|Pete|Sampras|nolink=tak}}
| sportowiec
| 1993
|}
</syntaxhighlight>

...buduje 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|Dennis|Smith|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: [[Lotniska w Polsce|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}}:
{| style="margin-top:-1ex"
|- style="vertical-align:top"
|
{{Numerowanie w tabeli| class{{=}}"wikitable"
! Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{{Numerowanie w tabeli| class{{=}}"wikitable"
! Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}
</syntaxhighlight>
|}

Uwaga: znak kratki musi być z lewej bez spacji.

Aby w takiej tabeli zastosować sortowanie z zachowaniem „Lp.” w pierwszej kolumnie, należy zastosować kod:
{| style="margin-top:-1ex; margin-bottom:-1ex"
|- style="vertical-align:top"
|
{{Numerowanie w tabeli| class{{=}}"wikitable sortable"
!class{{=}}"unsortable ordinal"| Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}
|style="padding-left:1em"|
<syntaxhighlight lang="text">
{{Numerowanie w tabeli| class{{=}}"wikitable sortable"
!class{{=}}"unsortable ordinal"| Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}
</syntaxhighlight>
|}

== 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
<syntaxhighlight lang="text">
{| class="wikitable" width=50%
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{tabela-tak}}
| {{tabela-nie}}
|-
| {{tabela-tak|Raczej tak}}
| {{tabela-nie|Prawdopodobnie nie}}
|}</syntaxhighlight>
|
{| 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 ==
=== Niestandardowe collapsible ===
Tabele można zdefiniować jako zwijalne (ukrywające zawartość) z użyciem klasy css „<code>collapsible</code>”. Jest to klasa zaimplementowana w lokalnym gadżecie [[Wikipedia:NavFrame|NavFrame]]. Zamiast tego lepiej używać <code>mw-collapsible</code>.

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

Należy pamiętać, że w przypadku gdy tabela ma więcej niż jedną kolumnę, wiersz nagłówkowy powinien być rozciągnięty na daną liczbę kolumn, czyli jeśli tabela ma 3 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:
<syntaxhighlight lang="wikitext">
{| class="wikitable collapsible collapsed" style="text-align: center"
! Nagłówek zwijalnej tabeli
|-
| Zwijalna
|-
| zawartość
|}
</syntaxhighlight>

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ść
|}

=== Standardowe mw-collapsible ===
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:
* jest dostępna w każdej Wikipedii i projektach siostrzanych,
* przełączane przyciski mają nazwy „Zwiń/Rozwiń” i mają tłumaczenia na inne języki,
* nie wymaga zdefiniowania w tabeli wiersza nagłówkowego – przy jego braku przycisk „Zwiń/Rozwiń” jest umieszczany w ostatniej komórce pierwszego wiersza,
* może być używane również w tagach <syntaxhighlight lang="html" inline><div>...</div></syntaxhighlight> (patrz: [[Wikipedia:NavFrame]]),
* 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 tj. z rozwijaniem w ostatniej kolumnie:
<syntaxhighlight lang="wikitext">
{| class="wikitable mw-collapsible mw-collapsed" style="text-align: center" role="presentation"
! Nagłówek zwijalnej
! tabeli&nbsp;
|-
| Zwijalna
| tabela
|-
| z klasą
| „mw-collapsible”
|}
</syntaxhighlight>

i daje w rezultacie poniższą tabelę zwijaną/rozwijaną:
{| class="wikitable mw-collapsible mw-collapsed" style="text-align: center" role="presentation"
! Nagłówek zwijalnej
! tabeli&nbsp;
|-
| Zwijalna
| tabela
|-
| z klasą
| „mw-collapsible”
|}
<br />
W powyższym przykładzie, w ostatni nagłówku dodana jest niełamliwa spacja (<syntaxhighlight lang="wikitext" inline>! tabeli&nbsp;</syntaxhighlight>), jest to dodane do wymuszenia odstępu przed przyciskiem w postaci zwiniętej. Można zamiast tego ustawić większą szerokość tabeli lub komórki nagłówkowej.

== Zestawienie przydatnych poleceń ==
Poniżej polecenia, które działają z tabelami wikipediowymi (klasa "wikitable" i pokrewne) oraz porównanie działania tych poleceń z tabelami niesformatowanymi. Podano jednostki jedyne lub najczęściej stosowane oraz najbardziej praktyczne.
{| class="wikitable" style="white-space: nowrap"
!rowspan=2|
!rowspan=2| Zadanie
!rowspan=2| Polecenie
!rowspan=2| Zobacz
!colspan=5| Po jakim znaczniku<ref name="zestawienie" />
!rowspan=2| Wartość
!rowspan=2| Uwagi
 !rowspan=44 style="background:white"| &nbsp;
 !colspan=5| Po jakim znaczniku<ref name="zestawienie" />
 !rowspan=2| Różnica do wikitabeli
|-
! <code>&#123;&#124;</code> !! <code>&#124;+</code> !! <code>&#124;-</code> !! <code>!</code> !! <code>&#124;</code>
 ! <code>&#123;&#124;</code> !! <code>&#124;+</code> !! <code>&#124;-</code> !! <code>!</code> !! <code>&#124;</code>
|- -------------------------------------------------------------------- OGÓLNE
!colspan=11| Ogólne (wikitabela)
 !colspan=6| Ogólne (tabela niesformatowana)
|- -------------------------------------------------------------------- Kolor tła
|rowspan=2 align=center|
{| class="wikitable" style="margin:4px; background:pink"
|- bgcolor=green
|height=6| || || || ||
|-
|height=6| || || || ||
|-
|height=6| || || ||bgcolor=red| ||
|-
|height=6 bgcolor=yellow| ||bgcolor=yellow| || || ||
|-
|height=6 bgcolor=yellow| ||bgcolor=yellow| || || ||bgcolor=cyan|
|}
!rowspan=2| Kolor tła
|bgcolor=ffcc00| style="background: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (bgcolor i background)|Zobacz]]
| Ta<br />(zw) || Ty || Wi<br />(zw) || Na || Zw
|rowspan=2| nazwa koloru dostępna z listy,<br /># + 3 lub 6 cyfr 0-F,<br />transparent
|rowspan=2| Ta – tylko kom. zwykłe i tło pod brakującymi<br />Wi – tylko komórki zwykłe
 |bgcolor=pink| Ta || Ty ||bgcolor=pink| Wi || Na || Zw
 |rowspan=2| Ta – wszystkie komórki i tło pod brakującymi<br />Wi – wszystkie komórki<br />Na – tak
|-
|bgcolor=ccffff| bgcolor="''wartość''" <ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (bgcolor i background)|Zobacz]]
| – || – || Wi<br />(zw) || – || Zw
 |bgcolor=pink| Ta || – ||bgcolor=pink| Wi ||bgcolor=pink| Na || Zw
|- -------------------------------------------------------------------- Szerokość
|rowspan=2 align=center|
{| style="margin-top:-1em;"
|align=center style="line-height:1em"| <big>'''← &nbsp; →'''</big>
|-
|
{| class="wikitable" style="margin:0px;"
|height=6| ||bgcolor=lightgray width=12| || ||
|-
|height=6| ||bgcolor=lightgray| || ||
|-
|height=6| ||bgcolor=lightgray| || ||
|-
|height=6| ||bgcolor=lightgray| || ||
|-
|height=6| ||bgcolor=lightgray| || ||
|}
|}
!rowspan=2| Szerokość
|bgcolor=ffcc00| style="width: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (width)|Zobacz]]
| Ta || Ty<br />(!) || – || Na || Zw
| liczba + [%, px]
|rowspan=2| dla tabeli 100% =  szerokość okna przeglądarki<br />dla komórek 100% = szerokość tabeli<br />Ty (!) – przy rozszerzaniu zachowanie<br />nieprzewidywalne
 | Ta || Ty<br />(!) || – || Na || Zw
 |rowspan=2|
|-
|bgcolor=ccffff| width="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (width)|Zobacz]]
| Ta || – || – || Na || Zw
| tylko liczba (wartość równa px),<br />liczba + [%];<br />dokładanie px lub innej jednostki nic nie zmienia
 | Ta || – || – || Na || Zw
|- -------------------------------------------------------------------- Wysokość
|rowspan=2 align=center|
{|
| <big>'''↑<br>↓'''</big>
|
{| class="wikitable" style="margin:4px;"
|height=6| || || || ||
|- bgcolor=lightgray
|height=18| || || || ||
|-
|height=6| || || || ||
|-
|height=6| || || || ||
|}
|}
!rowspan=2| Wysokość
|bgcolor=ffcc00| style="height: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (height)|Zobacz]]
| Ta || Ty<br />(!) || Wi || Na || Zw
| liczba + [em, px]
|rowspan=2| tylko powiększanie<br />Ty(!) – przy zmniejszaniu nachodzi na tabelę
 | Ta || Ty<br />(!) || Wi || Na || Zw
 |rowspan=2|
|-
|bgcolor=ccffff| height="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (height)|Zobacz]]
| – || – || – || Na || Zw
| tylko liczba (wartość równa px);<br />dokładanie px lub innej jednostki nic nie zmienia,<br />dokładanie % wyłącza działanie
 | – || – || – || Na || Zw
|- -------------------------------------------------------------------- Margines zewnętrzny tabeli
|align=center|
{| bgcolor=pink
|
{| class="wikitable" style="margin:10px; border:2pt solid;"
|height=6| || ||
|-
|height=6| || ||
|-
|height=6| || ||
|}
|}
! Margines<br />zewnętrzny<br />tabeli
|bgcolor=ffcc00| style="margin: ''wartość''"<br />
style="margin-top: ''wartość''"<br />style="margin-right: ''wartość''"<br />style="margin-bottom: ''wartość''"<br />style="margin-left: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (margin)|Zobacz]]<br />[[Pomoc:Tabele (align, float i margin)|Porównaj]]
| Ta || Ty || – || – || –
| liczba + [em, ex, px],<br />auto
| także wartości ujemne;<br />dla ‘margin’ wartość 1/2/3/4 razy;
 | Ta || Ty || – || – || –
 |
|- -------------------------------------------------------------------- Oblewanie tabeli
|rowspan=2 align=center|
{| cellpadding=0 cellspacing=0 style="line-height:1em;"
|-
|style="padding-bottom:0"| aa aa<br />aa aa<br />aa aa
|valign=bottom style="padding-bottom:0"|
{| class="wikitable" style="margin:0 6px;"
|height=6| ||
|-
|height=6| ||
|-
|height=6| ||
|}
|valign=bottom style="padding-bottom:0"|
{| class="wikitable" style="margin:0;"
|height=6| ||
|-
|height=6| ||
|-
|height=6| ||
|}
|-
|colspan=3 style="padding-top:0"| aa aa aa aa aaa
|}
!rowspan=2| Oblewanie<br />tabeli
|bgcolor=ffcc00| style="float: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (align, float i margin)|Porównaj]]
| Ta || – || – || – || –
|rowspan=2| left, right
|rowspan=2| oba polecenia działają w tym zastosowaniu<br />identycznie, tabela w jednej linii z inną<br />tabelą lub tekstem
 | Ta || – || – || – || –
 |rowspan=2|
|-
|bgcolor=ccffff| align="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (align i text-align)|Zobacz]]<br />[[Pomoc:Tabele (align, float i margin)|Porównaj]]
| Ta || – || – || – || –
 | Ta || – || – || – || –
|- -------------------------------------------------------------------- Centrowanie tabeli
|rowspan=2 align=center|
{| style="line-height:1em;"
|align=center|
{| class="wikitable" style="margin:0;"
|height=6| || ||
|-
|height=6| || ||
|-
|height=6| || ||
|}
|-
|style="padding-top:0"| aaa aaa aaa aaa
|}
!rowspan=2| Centrowanie<br />tabeli
|bgcolor=ffcc00| style="margin: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (margin)|Zobacz]]<br />[[Pomoc:Tabele (align, float i margin)|Porównaj]]
| Ta || – || – || – || –
| auto
| wartość „auto” dotyczy tylko odstępów<br />poziomych
 | Ta || – || – || – || –
 |
|-
|bgcolor=ccffff| align="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (align i text-align)|Zobacz]]<br />[[Pomoc:Tabele (align, float i margin)|Porównaj]]
|colspan=5|
| center
| w wikitabeli nie działa
 |bgcolor=pink| Ta || – || – || – || –
 | polecenie „margin” nie może definiować<br />odstępów poziomych (lub 4 naraz)
|- -------------------------------------------------------------------- KOMÓRKI
!colspan=11| Komórki (wikitabela)
 !colspan=6| Komórki (tabela niesformatowana)
|- -------------------------------------------------------------------- Scalanie w poziomie
|align=center|
{| class="wikitable" style="margin:4px;"
|height=6 colspan=5 bgcolor=LightGray|
|-
|height=6| || || || ||
|-
|height=6| ||colspan=3 bgcolor=LightGray| ||
|-
|height=6| || || || ||
|-
|height=6| || || ||colspan=2 bgcolor=LightGray|
|}
! Scalanie<br />w poziomie
|bgcolor=ccffff| colspan="''wartość''"
| <!-- tu będzie link do podstrony -->
| – || – || – || Na || Zw
| tylko liczba
|
 | – || – || – || Na || Zw
 |
|- -------------------------------------------------------------------- Scalanie w pionie
|align=center|
{| class="wikitable" style="margin:4px;"
|rowspan=5 bgcolor=LightGray| ||height=6| || || ||rowspan=2 bgcolor=LightGray|
|-
|height=6| ||rowspan=3 bgcolor=LightGray| ||
|-
|height=6| || ||
|-
|height=6| || ||
|-
|height=6| || ||
|}
! Scalanie<br />w pionie
|bgcolor=ccffff| rowspan="''wartość''"
| <!-- tu będzie link do podstrony -->
| – || – || – || Na || Zw
| tylko liczba
|
 | – || – || – || Na || Zw
 |
|- -------------------------------------------------------------------- Margines wewnętrzny
|rowspan=2 align=center|
{| border=1 rules=all style="border:solid black 2pt;" cellpadding=0
|
{| style="background:pink; padding:5px;"
|height=14 width=14 bgcolor=white|
|}
|
{| style="background:pink; padding:5px;"
|height=14 width=14 bgcolor=white|
|}
|-
|
{| style="background:pink; padding:5px;"
|height=14 width=14 bgcolor=white|
|}
|
{| style="background:pink; padding:5px;"
|height=14 width=14 bgcolor=white|
|}
|}
!rowspan=2| Margines<br />wewnętrzny
|bgcolor=ffcc00| style="padding: ''wartość''"
style="padding-top: ''wartość''"<br />style="padding-right: ''wartość''"<br />style="padding-bottom: ''wartość''"<br />style="padding-left: ''wartość''" 
|bgcolor=ffcc00| [[Pomoc:Tabele (padding)|Zobacz]]
| Ta || Ty || – || Na || Zw
| liczba + [em, ex, px]
| dla pierwszego polecenia:<br />wartość 1/2/3/4 razy,<br />Ta – domyślnie nie działa<br />(trzeba podać „border-collapse:separate”)
 |bgcolor=pink| Ta || Ty || – || Na || Zw
 | Ta – działa tylko przy domyślnym „separate”
|-
|bgcolor=ccffff| cellpadding="''wartość''"<ref name="deprecated"/>
| <!-- tu będzie link do podstrony -->
|colspan=5|
| tylko liczba (wartość równa px);<br />dokładanie % lub dowolnej jednostki nic nie zmienia
| w wikitabeli nie działa
 |bgcolor=pink| Ta || – || – || – || –
 | działa na wszystkie komórki<br />i niezależnie od „border-collapse”
|- -------------------------------------------------------------------- Rozsuwanie komórek (włączanie)
|align=center|
{|
|
 {| class="wikitable" style="margin:4px; font-size:10%;"
 |height=9 width=8| &nbsp; ||width=8| &nbsp; ||width=8| &nbsp;
 |-
 |height=9| || ||
 |-
 |height=9| || ||
 |}
|
 {| class="wikitable" style="margin:4px; border-collapse:separate; font-size:10%;"
 |height=9 width=8| &nbsp; ||width=8| &nbsp; ||width=8| &nbsp;
 |-
 |height=9| || ||
 |-
 |height=9| || ||
 |}
|}
! Rozsuwanie<br />komórek<br />(włączanie)
|bgcolor=ffcc00| style="border-collapse: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (border-collapse, border, cellspacing i rules)|Porównaj]]
| Ta || – || – || – || –
| collapse (wspólne krawędzie),<br />separate (włącza możliwość rozsuwania)
| w wikitabeli domyślnie „collapse”,<br /> nie działa wtedy szereg poleceń<br />związanych z „separate”
 |bgcolor=pink| Ta || – || – || – || –
 | domyślnie „separate” – tylko wtedy działają<br />„border-spacing”, „cellspacing”<br />i „empty-cells”
|- -------------------------------------------------------------------- Rozsuwanie komórek (wielkość)
|rowspan=2 align=center|
{| class="wikitable" style="margin:4px; border-collapse:separate; border-spacing:8px; font-size:10%;"
|height=9 width=8| &nbsp; ||width=8| &nbsp; ||width=8|
|-
|height=9| || ||
|-
|height=9| || ||
|}
!rowspan=2| Rozsuwanie<br />komórek<br />(wielkość)
|bgcolor=ffcc00| style="border-spacing: ''wartość''"
| <!-- tu będzie link do podstrony -->
| Ta || – || – || – || –
| liczba + [em, ex, px];<br />jedna wartość (4 kierunki) lub dwie (pion, poziom)
|rowspan=2| tylko z „border-collapse:separate”<br />(trzeba przełączyć z „collapse”);<br />wartość 0 daje wspólną ramkę, ale brzydszą,<br /> bo grubszą niż włączone „collapse”
 |bgcolor=pink| Ta || – || – || – || –
 |rowspan=2| tylko z „border-collapse:separate”<br />(tutaj domyślnie)
|-
|bgcolor=ccffff| cellspacing="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (border-collapse, border, cellspacing i rules)|Porównaj]]
| Ta || – || – || – || –
| tylko liczba (wartość równa px);<br />dokładanie % lub dowolnej jednostki nic nie zmienia
 |bgcolor=pink| Ta || – || – || – || –
|- -------------------------------------------------------------------- Rozsuwanie komórek (ukrywanie)
|align=center|
{| class="wikitable" style="margin:4px; border-collapse:separate; empty-cells:hide; font-size:10%;"
|height=9 width=8| &nbsp; ||width=8| &nbsp; ||width=8| &nbsp; ||width=8| &nbsp; ||width=8| &nbsp;
|-
|height=9| || &nbsp; || || ||
|-
|height=9| || &nbsp; || &nbsp; || &nbsp; ||
|-
|height=9| &nbsp; || &nbsp; || || || &nbsp;
|-
|height=9| || &nbsp; || || &nbsp; || &nbsp;
|}
! Rozsuwanie<br />komórek<br />(ukrywanie)
|bgcolor=ffcc00| style="empty-cells: ''wartość''"
| <!-- tu będzie link do podstrony -->
| Ta || – || – || – || –
| hide
| tylko z „border-collapse:separate”<br />(trzeba przełączyć z „collapse”)
 |bgcolor=pink| Ta || – || – || – || –
 | tylko z „border-collapse:separate”<br />(tutaj domyślnie)
|- -------------------------------------------------------------------- Obrys tab. niesformat.
|align=center|
{|
|
{| border=0 bgcolor=white style="margin:4px; border-collapse:collapse;"
|height=32 width=32|
|}
|
{| border=2 bgcolor=white style="margin:4px; border-collapse:collapse;"
|height=32 width=32|
|}
|}
! Obrys<br />tab. niesformat.
|bgcolor=ccffff| border="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (border-collapse, border, cellspacing i rules)|Porównaj]]
|colspan=5|
| 0 – brak kresek (domyślnie)<br />1 – typowe kreski
| w wikitabeli nie działa
 |bgcolor=pink| Ta || – || – || – || –
 | >1 – rośnie tylko obrys tabeli, ale lepiej użyć<br />polecenia stylu
|- -------------------------------------------------------------------- Siatka tab. niesformat.
|align=center|
{|
|
{| border=0 rules=all bgcolor=white style="margin:2px;"
|height=6 width=6| ||width=6| ||width=6|
|-
|height=6| || ||
|-
|height=6| || ||
|}
|
{| border=0 rules=cols bgcolor=white style="margin:2px;"
|height=6 width=6| ||width=6| ||width=6|
|-
|height=6| || ||
|-
|height=6| || ||
|}
|
{| border=0 rules=rows bgcolor=white style="margin:2px;"
|height=6 width=6| ||width=6| ||width=6|
|-
|height=6| || ||
|-
|height=6| || ||
|}
|}
! Siatka<br />tab. niesformat.
|bgcolor=ccffff| rules="''wartość''"
|bgcolor=ccffff| [[Pomoc:Tabele (border-collapse, border, cellspacing i rules)|Porównaj]]
|colspan=5|
| all, cols, rows
| w wikitabeli nie działa,<br />w tab. niesformat ustawia domyślne „collapse”
 |bgcolor=pink| Ta || – || – || – || –
 | tylko kreski wewnątrz, bez obrysu tabeli
|- -------------------------------------------------------------------- PARAMETRY OBRAMOWANIA
!colspan=11| Parametry obramowania (wikitabela)
 !colspan=6| Parametry obramowania (tabela niesformatowana)
|- -------------------------------------------------------------------- Styl obramowania
|align=center|
{| class="wikitable" style="margin:4px;"
|height=11 width=54 style="border-top: hidden black 5px;"|
|-
|height=11 style="border-top: dotted black 5px;"|
|-
|height=11 style="border-top: dashed black 5px; border-bottom: solid black 5px;"|
|}
! Styl<br />obramowania
|bgcolor=ffcc00| style="border-style: ''wartość''"<br />
style="border-top-style: ''wartość''"<br />style="border-right-style: ''wartość''"<br />style="border-bottom-style: ''wartość''"<br />style="border-left-style: ''wartość''"
| <!-- tu będzie link do podstrony -->
| Ta || Ty || Wi || Na || Zw
| dashed, dotted, hidden, none<ref name="hidden none" />, solid
| Ta Wi – tylko krawędzie zewnętrzne<br />Ta Na Zw – podać border-width;<br />dla pierwszego polecenia:<br />wartość 1/2/3/4 razy
 | Ta || Ty || Wi || Na || Zw
 |
|- -------------------------------------------------------------------- Grubość obramowania
|align=center|
{| class="wikitable" style="margin:4px;"
|height=12 width=54 style="border-top: solid black 1px;"|
|-
|height=11 style="border-top: solid black 3px;"|
|-
|height=10 style="border-top: solid black 5px; border-bottom: solid black 7px;"|
|}
! Grubość<br />obramowania
|bgcolor=ffcc00| style="border-width: ''wartość''"<br />
style="border-top-width: ''wartość''"<br />style="border-right-width: ''wartość''"<br />style="border-bottom-width: ''wartość''"<br />style="border-left-width: ''wartość''"
| <!-- tu będzie link do podstrony -->
| Ta || Ty || Wi || Na || Zw
| liczba + [px]
| Ta Wi – tylko krawędzie zewnętrzne<br />Ty Wi – podać border-style;<br />dla pierwszego polecenia:<br />wartość 1/2/3/4 razy
 | Ta || Ty || Wi || Na || Zw
 |
|- -------------------------------------------------------------------- Kolor obramowania
|align=center|
{| class="wikitable" style="margin:4px;"
|height=4 width=54 style="border-top: solid gold 5px;|
|-
|height=4 style="border-top: solid red 5px;|
|-
|height=4 style="border-top: solid green 5px;|
|-
|height=4 style="border-top: solid cyan 5px; border-bottom: solid black 5px;|
|}
! Kolor<br />obramowania
|bgcolor=ffcc00| style="border-color: ''wartość''"<br />
style="border-top-color: ''wartość''"<br />style="border-right-color: ''wartość''"<br />style="border-bottom-color: ''wartość''"<br />style="border-left-color: ''wartość''"
| <!-- tu będzie link do podstrony -->
| Ta || Ty || Wi || Na || Zw
| nazwa koloru dostępna z listy,<br /># + 3 lub 6 cyfr 0-F,<br />transparent
| Ta Wi – tylko krawędzie zewnętrzne<br />dla pierwszego polecenia:<br />wartość 1/2/3/4 razy
 | Ta || Ty || Wi || Na || Zw
 |
|- -------------------------------------------------------------------- Obramowanie zbiorczo: styl, grubość, kolor
|align=center|
{| class="wikitable" style="margin:4px;"
|height=10 width=54 style="border-top: dotted black 4px; border-bottom: dashed LimeGreen 5px;"|
|-
|height=8|
|-
|height=6 style="border-top:solid red 4px; border-bottom: solid gold 10px;"|
|}
! Obramowanie<br />zbiorczo:<br>styl, grubość, kolor
|bgcolor=ffcc00| style="border: ''wartość 1, 2, 3''"<br />
style="border-top: ''wartość 1, 2, 3''"<br />style="border-right: ''wartość 1, 2, 3''"<br />style="border-bottom: ''wartość 1, 2, 3''"<br />style="border-left: ''wartość 1, 2, 3''"
|bgcolor=ffcc00| [[Pomoc:Tabele (border)|Zobacz]]
| Ta || Ty || Wi || Na || Zw
|
jak wyżej,<br />
wartość 1: dashed, dotted, hidden, none<ref name="hidden none" />, solid<br />
wartość 2: liczba + [px]<br />
wartość 3: nazwa koloru dostępna z listy,<br /># + 3 lub 6 cyfr 0-F, transparent
| jak wyżej,<br />można podać 1, 2 lub 3 parametry,<br />kolejność dowolna;<br >wiersze tylko dla domyślnego „collapse”
 | Ta || Ty || Wi || Na || Zw
 | obramowanie wiersza tylko dla<br />włączonego „collapse”
|- -------------------------------------------------------------------- TEKST
!colspan=11| Tekst (wikitabela)
 !colspan=6| Tekst (tabela niesformatowana)
|- -------------------------------------------------------------------- Wielkość znaków
|align=center|
{| cellpadding=0 
|style="font-size:100%;"|A
|style="font-size:150%;"|A
|style="font-size:200%;"|A
|}
! Wielkość znaków
|bgcolor=ffcc00| style="font-size: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (font-size)|Zobacz]]
| Ta || Ty || Wi || Na || Zw
| liczba + [em, px, %]
|
 | Ta || Ty || Wi || Na || Zw
 |
|- -------------------------------------------------------------------- Interlinia
|align=center|
{|
| <math>\Bigg\Updownarrow</math> &nbsp;&nbsp; ||style="line-height:1.3;"| <big>Abc<br>def</big>
|}
! Interlinia
|bgcolor=ffcc00| style="line-height: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (line-height)|Zobacz]]
| Ta || Ty || Wi || Na || Zw
| tylko liczba (wartość równa em),<br />liczba + [em, px, %]
|
 | Ta || Ty || Wi || Na || Zw
 |
|- -------------------------------------------------------------------- Styl znaków
|align=center|<big>Abc ↔ ''Abc''</big>
! Styl znaków
|bgcolor=ffcc00| style="font-style: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (font-style, font-weight)|Zobacz]]
| Ta || Ty || Wi || Na || Zw
| italic, normal<ref name="normal" />
|
 | Ta || Ty || Wi || Na || Zw
 |
|- -------------------------------------------------------------------- Ciężar znaków
|align=center|<big>Abc ↔ '''Abc'''</big>
! Ciężar znaków
|bgcolor=ffcc00| style="font-weight: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (font-style, font-weight)|Zobacz]]
| Ta<br />(zw) || Ty || Wi<br />(zw) || Na || Zw
| bold, normal<ref name="normal" />
|
 | Ta<br />(zw) || Ty || Wi<br />(zw) || Na || Zw
 |
|- -------------------------------------------------------------------- Kolor znaków
|align=center|
{| cellpadding=0
|style="color:gold;"|<big>A</big>
|style="color:magenta; |<big>A</big>
|style="color:red;"|<big>A</big>
|style="color:green;"|<big>A</big>
|style="color:blue;"|<big>A</big>
|}
! Kolor znaków
|bgcolor=ffcc00| style="color: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (color)|Zobacz]]
| Ta || Ty || Wi || Na || Zw
| nazwa koloru dostępna z listy,<br /># + 3 lub 6 cyfr 0-F
|
 |bgcolor=pink| Ta || Ty ||bgcolor=pink| Wi ||bgcolor=pink| Na ||bgcolor=pink| Zw
 | Nie używać. W zależności od przeglądarki<br />koloruje również krawędzie ramki.<br />Użyć <nowiki><span style="color:...;"></nowiki>
|- -------------------------------------------------------------------- Wyrównywanie w poziomie
|rowspan=2 align=center|
{| class="wikitable" style="margin:4px 0; line-height:.8em;"
| aaa || aaa || aaa
|-
| aa ||align=center| aa ||align=right| aa
|-
| a ||align=center| a ||align=right| a
|}
!rowspan=2| Wyrównywanie<br />w poziomie
|bgcolor=ffcc00| style="text-align: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (align i text-align)|Zobacz]]
| Ta<br />(zw) || Ty || Wi<br />(zw) || Na || Zw
|rowspan=2| left, center, right
| Ta Wi – tylko komórki zwykłe<br />tabele osadzone – nie
 |bgcolor=pink| Ta || Ty ||bgcolor=pink| Wi || Na || Zw
 | Ta Wi – wszystkie komórki
|-
|bgcolor=ccffff| align="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (align i text-align)|Zobacz]]<br />[[Pomoc:Tabele (align, float i margin)|Porównaj]]
| Ta<br />(!) || – || Wi<br />(zw) || – || Zw
| Ta (!) – działa jak polecenie ‘float’<br />Ty – są problemy, użyć polecenia stylu<br />Wi – tylko komórki zwykłe<br />tabele osadzone – tak
 | Ta<br />(!) || – ||bgcolor=pink| Wi ||bgcolor=pink| Na || Zw
 | Ta (!) – działa jak polecenie ‘float’<br />lub centruje tabelę<br />Wi – wszystkie komórki<br />Na – tak
|- -------------------------------------------------------------------- Wyrównywanie w pionie
|rowspan=2 align=center|
{| class="wikitable" style="margin:4px;"
|valign=top| aa<br /><br /> ||valign=middle| aa ||valign=bottom| aa
|}
!rowspan=2| Wyrównywanie<br />w pionie
|bgcolor=ffcc00| style="vertical-align: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (valign i vertical-align)|Zobacz]]
| – || – || Wi || Na || Zw
|rowspan=2| top, middle, bottom
|rowspan=2| tabele osadzone – tak
 | – || – || Wi || Na || Zw
 |rowspan=2|
|-
|bgcolor=ccffff| valign="''wartość''"<ref name="deprecated"/>
|bgcolor=ccffff| [[Pomoc:Tabele (valign i vertical-align)|Zobacz]]
| – || – || Wi || Na || Zw
 | – || – || Wi || Na || Zw
|- -------------------------------------------------------------------- Blokada przełamywania
|rowspan=2 align=center|
{| class="wikitable" style="margin:4px; line-height:.8em;"
|- valign=top
|height=6|aa<br />aa<br />aa ||aa&nbsp;aa&nbsp;aa
|}
!rowspan=2| Blokada<br />przełamywania
|bgcolor=ffcc00| style="white-space: ''wartość''"
|bgcolor=ffcc00| [[Pomoc:Tabele (nowrap)|Zobacz]]
| Ta || Ty<br />(!) || Wi || Na || Zw
| nowrap, normal<ref name="normal" />
|
 | Ta || Ty<br />(!) || Wi || Na || Zw
 |rowspan=2|
|-
|bgcolor=ccffff| nowrap
|bgcolor=ccffff| [[Pomoc:Tabele (nowrap)|Zobacz]]
| – || – || – || Na || Zw
| ''nie ma''
| samo polecenie, bez wartości
 | – || – || – || Na || Zw
|- --------------------------------------------------------------------
!rowspan=2|
!rowspan=2| Zadanie
!rowspan=2| Polecenie
!rowspan=2| Zobacz
!colspan=5| Po jakim znaczniku<ref name="zestawienie" />
!rowspan=2| Wartość
!rowspan=2| Uwagi
 !colspan=5| Po jakim znaczniku<ref name="zestawienie" />
 !rowspan=2| Różnica do wikitabeli
|-
! <code>&#123;&#124;</code> !! <code>&#124;+</code> !! <code>&#124;-</code> !! <code>!</code> !! <code>&#124;</code>
 ! <code>&#123;&#124;</code> !! <code>&#124;+</code> !! <code>&#124;-</code> !! <code>!</code> !! <code>&#124;</code>
|}
{{Uwagi|=mini}}
{{Legenda|#ffcc00|Polecenia w ramach stylu}}
{{Legenda|#ccffff|Polecenia poza stylem}}
{{Legenda|pink|Różnica pomiędzy wikitabelą i tabelą niesformatowaną}}

== Przypisy ==
{{Przypisy|
<ref name="zestawienie">Znaczenie skrótów: Ta – tabela, Ty – tytuł, Wi – wiersz, Na – komórka nagłówka, Zw – komórka zwykła, (zw) – tylko komórki zwykłe, nie działa na kom. nagłówka, (!) – zachowanie nietypowe.</ref>
<ref name="hidden none">Wartości „hidden” i „none” różnią się, choć nie zawsze to widać. „Hidden” ukrywa widzialność ramki, ale ona tam jest jakby z zerową grubością (czyli jej miejsce zajmuje tło), podczas gdy „none” wyłącza obsługę ramki w tym miejscu, przez co może być ona widoczna, jeśli jest zdefiniowana w innym miejscu kodu.</ref>
<ref name="normal">„Normal” przywraca wartość domyślną. Przydatne przy lokalnym wycofaniu wartości parametru, np. komórka inaczej niż w wierszu.</ref>
<ref name="deprecated">Polecenie jest przestarzałe i niezalecane dla nowych tabel. Należy używać stylu.</ref>
}}

== Zobacz też ==
* [[Pomoc:Kolory]]
* [[b:en:Editing Wikitext/Tables|Opis tworzenia tabel w anglojęzycznym Wikibooks]]
* [[Pomoc:Używanie kodu HTML|Uwagi na temat korzystania ze znaczników HTML]]
* [[:Kategoria:Szablony do zastosowania w tabelach|Szablony do zastosowania w tabelach]]

[[Kategoria:Pomoc - edytowanie dla zaawansowanych]]

[[ru:Википедия:Оформление таблиц]]