Skrót: WP:T, WP:Tabela

Pomoc:Tabele

Z Wikipedii, wolnej encyklopedii
Przejdź do nawigacji Przejdź do wyszukiwania
Dla każdego
Te informacje dotyczą zarówno edytora wizualnego, jak i edytora wikikodu (Czym to się różni?)

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[edytuj | edytuj kod]

VisualEditor insert table.png
Edytor wizualny może być używany do wstawiania i edytowania tabel.

Można również zastosować metodę „przeciągnij i upuść”, mając na komputerze tabelę zapisaną w pliku w formacie .csv.


Po kliknięciu przycisku „Tabela” w menu „Wstaw” edytor wizualny wstawi pustą tabelę 4x4.

W trybie edycji tabeli jest dostępne menu edycji tabeli. Z tego menu można dodać nagłówek tabeli.

VisualEditor empty table.png

By wybrać komórkę, należy kliknąć na nią raz.
VisualEditor tables select one cell.png

By edytować zawartość komórki (np. dopisać coś albo poprawić błąd w pisowni), należy kliknąć dwa razy. Można też zaznaczyć komórkę i nacisnąć ↵ Enter.

Aby zakończyć edycję komórki, należy kliknąć gdziekolwiek indziej.

VisualEditor tables type inside a cell.png

VisualEditor table editing add and remove columns.png
Można dodawać i usuwać kolumny i wiersze.

Można także łączyć komórki: należy je zaznaczyć i kliknąć „Nagłówek”
VisualEditor tables merge cells.png

W wyniku łączenia komórek zawartość tylko z jednej z nich jest zachowana. Aby odzyskać zawartość utraconą w wyniku łączenia, należy użyć przycisku Cofnij, przesunąć albo skopiować zawartość, a następnie połączyć komórki ponownie.
VisualEditor tables post-merge cell.png

Można też rozdzielić uprzednio połączone komórki. Zawartość połączonych komórek pozostanie w pierwszej spośród rozdzielonych. W razie potrzeby można wyciąć ją i wkleić do innych komórek.
VisualEditor tables split cells.png


W kodzie źródłowym[edytuj | edytuj kod]

Reszta tego pliku pomocy dotyczy pracy w edytorze kodu źródłowego.

Podstawy budowy[edytuj | edytuj kod]

Wikipediowe tabele są tabelami HTML, w których podstawowe znaczniki mają uproszczoną postać i nie wymagają znaczników kończących (oprócz jednego znacznika – kończącego kod tabeli).

Poniżej porównanie obu składni:

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

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

...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[edytuj | edytuj kod]

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   – 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)[edytuj | edytuj kod]

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:

{| class="wikitable"

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

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

...co daje:

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[edytuj | edytuj kod]

Znaczniki[edytuj | edytuj kod]

Poniżej wszystkie znaczniki wikikodu. Zastępują one podstawowe znaczniki HTML:

  • {| – początek tabeli – zastępuje <table>
  • |+ – początek tytułu tabeli – zastępuje <caption> (i nie potrzebuje odpowiednika </caption>)
  • |- – początek nowego wiersza tabeli – zastępuje <tr> (i nie potrzebuje odpowiednika </tr>)
  • ! – początek komórki nagłówka – zastępuje <th> (i nie potrzebuje odpowiednika </th>)
  • | – początek komórki zwykłej – zastępuje <td> (i nie potrzebuje odpowiednika</td>)
  • |} – koniec tabeli – zastępuje </table>

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 (class=...).

Początek kodu tabeli[edytuj | edytuj kod]

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:

{| class="wikitable"
: {| class="wikitable"
:: {| class="wikitable"
::: {| class="wikitable"

Natomiast nie ma możliwości umieszczania tabeli w listach wypunktowanych (wiersz zaczyna się gwiazdką *) i listach numerowanych (wiersz zaczyna się kratką #). 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.

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

Koniec kodu tabeli[edytuj | edytuj kod]

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 zagnieżdżonej. 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.

lepiej:     gorzej:

|...        |...
|...        |...
|...        |...
|}          |-      <- zbędne
            |}

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:

|} tekst po tabeli        |}                     |}
                          tekst po tabeli
                                                 tekst po tabeli

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[edytuj | edytuj kod]

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:

{| class="wikitable"
|+ Tytuł tabeli
! Nagłówek A
! Nagłówek B
! Nagłówek C
|-
| Komórka A
| Komórka B
| Komórka C
|}
{| class="wikitable"
|+ Tytuł tabeli
! Nagłówek A || Nagłówek B || Nagłówek C
|-
| Komórka A || Komórka B || Komórka C
|}

...co daje ten sam efekt:

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:

! Nagłówek A || Nagłówek B || Nagłówek C
! Nagłówek A !! Nagłówek B !! Nagłówek C

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:

|-          |-                   |-
| Kom.1     | Kom.1 || Kom.2     | Kom.1 || Kom.2 || Kom.3
| Kom.2     | Kom.3
| Kom.3

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:

|-            |-                 |-                 |-
| x || x      | x || x || x      | x || x           | x
| x || x      | x || x || x      | x                | x || x || x || x
| x || x                         | x || x || x      | x

Wstawianie dodatkowych poleceń[edytuj | edytuj kod]

Po znaczniku początku tabeli[edytuj | edytuj kod]

Nie ma lepszego przykładu niż polecenie nadania tabeli stylu zalecanego na Wikipedii:

{| class="wikitable"

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[edytuj | edytuj kod]

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:

|+ style="text-align:right"| Tytuł tabeli

Jak widać powyżej, zastosowano polecenie stylu. Oprócz poleceń stylu istnieją również ich uproszczone wersje, 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ą:

|+ style="text-align:right"| ...     polecenie działa
|+ align="right"| ...                polecenie nie działa

Trzeba zawsze uważać z poleceniami uproszczonymi, a w przypadku problemów stosować polecenia stylu, jako bezpieczniejsze.

Po znaczniku nowego wiersza[edytuj | edytuj kod]

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.

|- style="text-align:right"     polecenie działa
|- align=right                  polecenie też działa

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[edytuj | edytuj kod]

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:

! 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

Przykłady dla którejś z kolejnych komórek w linii kodu:

! 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

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:

! tekst ||style="color:Red"| tekst     ||...|  dobrze
! tekst !!style="color:Red"| tekst     !!...|  dobrze
! tekst !!style="color:Red"! tekst     !!...!  źle
                           ↑                ↑

Oto co się wyświetli z powyższego przykładu błędu w 3. wierszu:

tekst style="color:Red"! tekst

Z powodu szczupłości miejsca, w przykładach dotyczących komórek zastosowano czasami skrócone polecenia. Oczywiście polecenia w pełnej postaci, czyli zaczynające się od style=..., działają tym bardziej.

Jeżeli zrezygnujemy ze wstawienia polecenia, a pozostawimy miejsce dla niego przewidziane – nic się nie stanie:

| tekst                           działa normalnie
|align=right| tekst do prawej     wyrównuje do prawej
|| tekst                          działa normalnie (drobna wada kodu)
| | tekst                         działa normalnie (drobna wada kodu)
| tekst || tekst                           działa normalnie
| tekst ||align=right| tekst do prawej     wyrównuje do prawej
| tekst ||| tekst                          działa normalnie (drobna wada kodu)
| tekst || | tekst                         działa normalnie (drobna wada kodu)

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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

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ę):
tekst w komórce

tekst w komórce

tekst w komórce tekst w komórce

tekst w komórce

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

Zazwyczaj jednak zależy nam na zwykłym przełamaniu tekstu, a wtedy lepiej używać znacznika „line break” <br />, 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):
tekst w komórce 1
tekst w komórce 1
tekst w komórce 1

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

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

Różnica w działaniu pomiędzy enterami i znacznikami „line break” jest taka:

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

...co daje:

tekst w komórce 1
tekst w komórce 1
tekst w komórce 1
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.
a)           b)           c)           d)
| tekst      | tekst      | tekst      | tekst
|-           |-
| tekst                   |-
             | tekst      | tekst      |-
                                       | tekst

Spacje[edytuj | edytuj kod]

Tekst w komórce zachowuje się podobnie jak w pozostałej części artykułu:

  • nadmiarowe spacje nie są wyświetlane,
  • spacje na początku i końcu tekstu też nie są wyświetlane.

Jeżeli chcemy coś poszerzyć, trzeba użyć encji twardej spacji &nbsp;.

W przypadku samego kodu spacje zazwyczaj też są niepotrzebne (są potrzebne rzadko), ale wprowadza się je dla lepszej czytelności kodu, np.:

gorzej:                     lepiej:

|-align=right               |- align=right

!1||2||3||4                 ! 1 || 2 || 3 || 4

|tekst||tekst||tekst        | tekst || tekst || tekst

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:

  polecenie     zawartość     polecenie    zawartość

|align=center| tekst tekst ||align=right| tekst tekst
              ↑           ↑              ↑

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. pałkę czy dywiz.

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

to jest tekst techniczny

Przykład w tabeli:

{| class="wikitable"
| przykładowy tekst
 przykładowy tekst
przykładowy tekst
 przykładowy tekst
przykładowy tekst
|}

...co daje:

przykładowy tekst
przykładowy tekst

przykładowy tekst

przykładowy tekst

przykładowy tekst

Problemy z innymi znakami[edytuj | edytuj kod]

Poniższe zestawienie pokazuje, że warto wstawiać spacje w kodzie:

|+ znacznik początku tytułu tabeli
| + na początku komórki wyświetla symbol dodawania
|- znacznik początku wiersza
| - na początku komórki wyświetla dywiz
|# ma działanie podczas sortowania
| # na początku komórki wyświetla kratkę (hash)
|} zamyka tabelę
| } 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.

&#33; &#x021; !
&#34; &#x22; "
&#35; &#x23; #
&#36; &#x24; $
&#37; &#x25; %
&#38; &#x26; &
&#39; &#x27; '
 
&#40; &#x28; (
&#41; &#x29; )
&#42; &#x2A; *
&#43; &#x2B; +
&#44; &#x2C; ,
&#45; &#x2D; -
&#46; &#x2E; .
&#47; &#x2F; /
 
&#58; &#x3A; :
&#59; &#x3B; ;
&#60; &#x3C; <
&#61; &#x3D; =
&#62; &#x3E; >
&#63; &#x3F; ?
&#64; &#x40; @
 
&#91; &#x5B; [
&#92; &#x5C; \
&#93; &#x5D; ]
&#94; &#x5E; ^
&#95; &#x5F; _
&#96; &#x60; `
 
&#123; &#x7B; {
&#124; &#x7C; |
&#125; &#x7D; }
&#126; &#x7E; ~

Niektóre z powyższych znaków mają również bardziej mnemoniczne wersje encji:

&amp; &
&lt; <
&gt; >
&quot; "

Tytuł tabeli[edytuj | edytuj kod]

1. Tytuł tabeli – składnia

Jeżeli chcemy, aby nad tabelą pojawił się jej tytuł, używamy kodu |+, np.:

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

...co daje:

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.
  • Pomimo że tytuł jest domyślnie czarny na przezroczystym, można mu nadawać wszystkie atrybuty koloru i obramowania.
  • Istnieje możliwość ułożenia tytułu tabeli pod tabelą: |+ style="caption-side:bottom"| Tytuł tabeli na dole. Pozostałe możliwości, czyli z lewej lub prawej, są niestandardowe (wspiera tylko Firefox), a więc nie należy ich używać.

Komórki nagłówka i zwykłe[edytuj | edytuj kod]

1. Składnia
  • 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 !!.
  • Wiersz 3: Gdy linia kodu zaczyna się komórką nagłówka, to para znaków !! 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 (!| lub |!) 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.
1A 1B 1C 1D
2A 2B 2C 2D
3A 3B 3C 3D
4A 4C 4D
5A ! 5C 5D
6A 6C 6D
7A ! 7C 7D
8A 8B !! 8C 8D
{| 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
|}
2. Mieszanie komórek zwykłych i nagłówka
  • 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:
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
{| 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
|}
  • W sposób opisany powyżej konstruuje się tzw. lewy (lub prawy) boczek tabeli:
1A 1B 1C 1D
2A 2B 2C 2D
3A 3B 3C 3D
4A 4B 4C 4D
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
|}
{| class="wikitable"
! 1A || 1B || 1C || 1D
|-
| 2A || 2B || 2C
! 2D
|-
| 3A || 3B || 3C
! 3D
|-
| 4A || 4B || 4C
! 4D
|}
3. Wstawianie poleceń

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:
a) komórki nagłówka – tyko jeden wykrzyknik na początku,
b) komórki nagłówka – zapis równoważny – wszędzie wykrzykniki,
c) komórki zwykłe,

  • na końcu polecenia zawsze stoi znak pałki, nigdy wykrzyknika.
a)  ! 1A || 1B || 1C || 1D
    !width=100px| 1A || 1B ||width=100px| 1C || 1D

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

c)  | 3A || 3B || 3C || 3D
    |width=100px| 3A || 3B ||width=100px| 3C || 3D

Komórki puste lub brakujące[edytuj | edytuj kod]

1. Różnica pomiędzy pustymi i brakującymi
  • 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.
Z treścią Puste Brakujące
01A 01B 01C 01D 01E 01F 01G 01H 01I
02A 02B 02C
1A 1B 1C
2A 2B 2C
2. Puste komórki

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:

1A 1C
2A 2B
3C
{| class="wikitable"
! 1A
!
! 1C
|-
| 2A
| 2B
|
|-
|
|
| 3C
|}
{| class="wikitable"
! 1A || || 1C
|-
| 2A || 2B ||
|-
| || || 3C
|}

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ę):

1A 1B 1C 1D 1E 1F
2D 2F
3D 3F
{| class="wikitable"
| 1A || 1B || 1C || 1D || 1E || 1F
|-
||||||| 2D |||| 2F       <- gorzej
|-
| || || || 3D || || 3F   <- lepiej
|}

Krawędzie sąsiadujących pustych komórek można ukryć poprzez scalanie komórek.

3. Pusty wiersz lub pusta kolumna
  • W przypadku całego wiersza pustych komórek wiersz taki będzie bardzo niski.
  • W przypadku kolumny będzie ona bardzo wąska.

Sprawę rozwiązuje:

  • w przypadku wiersza – jedna encja twardej spacji &nbsp;,
  • w przypadku kolumny – 4 takie encje.

Poniżej przykład dla pustego wiersza:

1A 1B 1C
 
{| class="wikitable"
| 1A
| 1B
| 1C
|-
|
|
|
|-
| &nbsp;
|
|
|}
{| class="wikitable"
| 1A || 1B || 1C
|-
| || ||
|-
| &nbsp; || ||
|}

W przykładzie poniżej w podobny sposób rozwiązano problem pustej kolumny, jednak tutaj potrzebne są 4 encje twardej spacji.

1A      1D
2A 2D
{| class="wikitable"
| 1A
|
| &nbsp;&nbsp;&nbsp;&nbsp;
| 1D
|-
| 2A
|
|
| 2D
|}
{| class="wikitable"
| 1A || || &nbsp;&nbsp;&nbsp;&nbsp; || 1D
|-
| 2A || || || 2D
|}

Problem zbyt małej szerokości lub wysokości można rozwiązać też innymi metodami, np. poleceniami padding lub height, ale użycie encji jest najłatwiejsze.

4. Brakujące komórki

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.

01A 01B 01C
1A
2A 2B
3A 3B 3C 3D
{| class="wikitable"
! 01A
! 01B
! 01C
|-
| 1A
|-
| 2A
| 2B
|-
| 3A
| 3B
| 3C
| 3D
|}
{| class="wikitable"
! 01A || 01B || 01C
|-
| 1A
|-
| 2A || 2B
|-
| 3A || 3B || 3C || 3D
|}

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:

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

| komórka
|-           balast
|-           znacznik ważny dla programu
| komórka
5. Puste i brakujące – inna metoda

Puste komórki można też ukryć, tzn. ukryć ich obramowanie, ale tylko w tabeli z rozsuniętymi komórkami:

  • polecenie empty-cells: hide działa tylko z border-collapse: separate,
    • 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.
01A 01B 01D
1B
2A 2B 2D
3C 3D
{| class="wikitable" style="border-collapse: separate; empty-cells: hide"
! 01A || 01B || || 01D
|-
| || 1B
|-
| 2A || 2B || || 2D
|-
| || || 3C || 3D
|}

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

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

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

by uzyskać coś takiego:

1A 1B
2A 2B

Scalanie komórek[edytuj | edytuj kod]

1. Scalanie komórek – zasada działania

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 w grupie górna lub lewa komórka są powiększane (rozciągane) w ten sposób, że zajmują 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 tych i następnych komórek w prawo lub na dół.

2. Scalanie w pionie – polecenie „rowspan”

Poniżej fragment kodu ze scaleniem 3 komórek w pionie.
Jak widać, podczas scalania usunięto z kodu komórki 3 i 4:

przed scaleniem:      po scaleniu:

| Komórka 1           | Komórka 1
|-                    |-
| Komórka 2           |rowspan=3| Komórka 2
|-                    |-
| Komórka 3           | Komórka 5
|-
| Komórka 4
|-
| Komórka 5

Przykład całej tabeli z 2 komórkami scalonymi w pionie:

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

...co daje:

Komórka 1A Komórka 1B Komórka 1C
Komórka 2A Komórka 2C
Komórka 3A Komórka 3B Komórka 3C
3. Scalanie w poziomie – polecenie „colspan”

Poniżej fragment kodu ze scaleniem 3 komórek w poziomie.
Jak widać, podczas scalania usunięto z kodu komórki 3 i 4:

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

Przykład całej tabeli z 2 komórkami scalonymi w poziomie:

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

...co daje:

Komórka 1A Komórka 1B Komórka 1C Komórka 1D
Komórka 2A Komórka 2B Komórka 2D
Komórka 3A Komórka 3B Komórka 3C Komórka 3D
4. Scalanie w pionie i poziomie – jednocześnie

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:

1A 1D 1E
2D 2E
3A 3B 3C 3D 3E
4A 4B 4C 4D 4E
{| class="wikitable"
|colspan=3 rowspan=2| 1A || 1D || 1E
|-
| 2D || 2E
|-
| 3A || 3B || 3C || 3D || 3E
|-
| 4A || 4B || 4C || 4D || 4E
|}
5. Scalanie kształtów innych niż prostokątne

Scalenie grupy komórek o innym kształcie niż prostokąt nie jest możliwe, ale można zasymulować taki kształt, nadając wybranym krawędziom komórek kolor tła tabeli, którym jest kolor „#F8F9FA” (komórki zwykłe mają przezroczyste tło). 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.

Trzeba pamiętać, że pożądany efekt uzyskuje się tylko przy kolorowaniu krawędzi dolnych i prawych, ponieważ przy grubości 1 piksela krawędzie lewe i górne zostaną nadpisane kolorem krawędzi z sąsiedniej komórki. Poniżej, w przykładzie gotowej tabeli, strzałki pokazują kierunek, z której komórki powinno pochodzić polecenie kolorowania konkretnej krawędzi.

{| class="wikitable"
|-
| 1A || 1B || 1C || 1D || 1E
|-
| 2A ||style="border-bottom: solid 1px #F8F9FA; border-right: solid 1px #F8F9FA"| ||colspan=2| || 2E
|-
| 3A ||rowspan=2| || 3C || 3D || 3E
|-
| 4A || 4C || 4D || 4E
|-
| 5A || 5B || 5C || 5D || 5E
|}

...co daje:

1A 1B 1C 1D 1E
2A 2B 2C 2E
3A 3B 3C 3D 3E
4A 4C 4D 4E
5A 5B 5C 5D 5E
1A 1B 1C 1D 1E
2A ↓→ 2E
3A 3C 3D 3E
4A 4C 4D 4E
5A 5B 5C 5D 5E

Więcej przykładów z wykorzystaniem kolorowania krawędzi znajduje się na końcu podstrony: Pomoc:Tabele (scalanie).

6. Inne przykłady

1) Scalenie wielopoziomowych nagłówków:

01A 01E
02A 02C 02E 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
{| 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
|}

2) Struktura hierarchiczna, licząc od lewej strony:

01A 01B 01C 01D 01E 01F
1A 1B 1C 1D 1E 1F
2D 2E 2F
3C 3D 3E 3F
4D 4E 4F
5B 5C 5D 5E 5F
6D 6E 6F
7C 7D 7E 7F
8D 8E 8F
{| 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
|}

Więcej przykładów znajduje się na podstronie: Pomoc:Tabele (scalanie).

Marginesy (wewnętrzne i zewnętrzne)[edytuj | edytuj kod]

1. Marginesy – składnia
  • 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:
Margin
(na zewnątrz)
Padding
(do wewnątrz)
zbiorczo:
style="margin: wartość"

indywidualnie:
style="margin-top: wartość"
style="margin-right: wartość"
style="margin-bottom: wartość"
style="margin-left: wartość"

zbiorczo:
style="padding: wartość"

indywidualnie:
style="padding-top: wartość"
style="padding-right: wartość"
style="padding-bottom: wartość"
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.

2. Co i jak można odpychać?
Znacznik Parametr
Po znaczniku tabeli margin*
Po znaczniku tytułu tabeli margin i padding
Po znaczniku komórki nagłówka lub zwykłej padding
Po znaczniku wiersza nie dotyczy

* Zobacz uwaga na końcu ramki.

...ponadto:

margin wartości ujemne i/lub dodatnie
padding tylko wartości dodatnie

Wartości domyślne:

Wikitabela (w skrócie:)
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"
Tabela niesformatowana (w skrócie:)
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"
Tabela sformatowana
"margin: 1em 0"
(domyślnie)
Tytuł
Nagłówek Nagłówek
Komórka Komórka
Tabela niesformatowana
"margin: 0"
(domyślnie)
Tytuł
Nagłówek Nagłówek
Komórka Komórka

Co ciekawe, padding działa nawet na tabelę zawierającą tylko jedną pustą komórkę:

{| class="wikitable"
|style="padding:20px"|
|}

{| class="wikitable"
|
|}

Padding po znaczniku początku tabeli:
Tak naprawdę padding po znaczniku początku tabeli, czyli margines wewnętrzny obramowania tabeli jest możliwy. Trzeba użyć sztuczki w postaci dwóch pozornie sprzecznych poleceń – tablicy typu „separate” i ustawienia tej separacji na zero, np.:

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

Wikitabela ma parametr „border-collapse” domyślnie ustawiony z wartością „collapse”, natomiast tabela niesformatowana ma domyślnie wartość „separate”. Domyślna wartość „border-spacing” wynosi 2px.

3. Marginesy – po znaczniku tytułu tabeli

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ń:
|+ style="background: Gold; border: solid 1px"| Tytuł Tytuł Tytuł Tytuł
|+ style="background: Gold; border: solid 1px; margin:40px"| Tytuł Tytuł Tytuł Tytuł
|+ style="background: Gold; border: solid 1px; padding:40px"| Tytuł Tytuł Tytuł Tytuł
|+ style="background: Gold; border: solid 1px; margin:40px; padding:40px"| 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:

brak polecenia marginesu margin: 40px padding: 40px margin: 40px
padding: 40px

Akapit przed tabelą

Tytuł Tytuł Tytuł Tytuł
Nagłówek A Nagłówek B
Komórka 1A Komórka 1B

Akapit po tabeli

Akapit przed tabelą

Tytuł Tytuł Tytuł Tytuł
Nagłówek A Nagłówek B
Komórka 1A Komórka 1B

Akapit po tabeli

Akapit przed tabelą

Tytuł Tytuł Tytuł Tytuł
Nagłówek A Nagłówek B
Komórka 1A Komórka 1B

Akapit po tabeli

Akapit przed tabelą

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:

Tytuł Tytuł Tytuł Tytuł
Nagłówek A
Komórka 1A
4. Marginesy – po znaczniku początku tabeli

Przykłady powiększania odstępów:

  • przed tabelą o wartość „1em”:
{| class="wikitable" style="margin-top: 1em"
  • przed tabelą o wartość „1em”, a po tabeli o „2em”:
{| class="wikitable" style="margin-top: 1em; margin-bottom: 2em"
  • przed i po tabeli o taką samą wartość, np. „1em”:
    • metoda 1 (dwa parametry):
{| class="wikitable" style="margin-top: 1em; margin-bottom: 1em"
  • metoda 2 (jeden parametr, dwie wartości):
{| class="wikitable" style="margin: 1em 0"

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”:
{| class="wikitable" style="margin-top: -1ex"

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

{|class="wikitable" style="margin-top: -1em"
{|class="wikitable" style="margin-bottom: -1em"
{|class="wikitable" style="margin-left: -1em"
{|class="wikitable" style="margin-right: -1em"
Nagłówek A Nagłówek B
Komórka A Komórka B
Nagłówek A Nagłówek B
Komórka A Komórka B
Nagłówek A Nagłówek B
Komórka A Komórka B
Nagłówek A Nagłówek B
Komórka A Komórka B

Uwaga:
W parametrze „margin” odstępy pionowe (ale tylko pionowe) nakładają się na siebie, a nie dodają (liczy się większy), np.:

1 + 0 → 1,
1 + 1 → 1,
1 + 2 → 2.

Powyższe działa także dla obu wartości ujemnych, jednak przy przeciwstawnych znakach wartości sumują się:

-1 + 1 → 0,
-1 + 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:

"margin-right: 0"
"margin-left: 0"


"margin-right: 1em"
"margin-left: 0"


"margin-right: 0"
"margin-left: 1em"


"margin-right: 1em"
"margin-left: 1em"


Przykłady – odstępy pionowe:

-2em + 1em → -1em
"margin-bottom: -2em"
margin domyślnie
-1em + 1em → 0
"margin-bottom: -1em"
margin domyślnie
0 + 1em → 1em
"margin-bottom: 0"
margin domyślnie
1em + 1em → 1em
"margin-bottom: 1em" (domyślnie)
margin domyślnie
2em + 1em → -2em
"margin-bottom: 2em"
margin domyślnie
5. Marginesy – osadzenie tabeli idealnie w komórce tabeli nadrzędnej

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:

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)
1A 1B 1C
2A
Nagłówek A Nagłówek B
Komórka A Komórka B
2C
3A 3B 3C
{| 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
|}
6. Marginesy – po znaczniku początku komórki
  • 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:
|
 
| &nbsp;
|style="padding: 20px"|
 
|style="padding: 20px"| &nbsp;
tekst
|style="padding: 20px"| tekst

I jeszcze jedno zestawienie:

"padding: 0"
tekst
tekst
"padding-top: 0; padding-bottom: 0"
"padding-left: 0; padding-right: 0"
tekst
tekst
"padding: .2em .4em" (domyślne)
tekst

Wyrównywanie tekstu – w poziomie[edytuj | edytuj kod]

1. Składnia

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"
2. Gdzie i co można wyrównywać w poziomie?
Po znaczniku początku tytułu tytuł tabeli
Po znaczniku początku tabeli wszystkie komórki zwykłe w całej tabeli
Po znaczniku początku wiersza wszystkie komórki zwykłe w danym wierszu
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.
3. Wartości domyślne
Rodzaj tekstu     Kierunek    
Tytuł tabeli center
Komórka nagłówka center
Komórka zwykła left
4. Wyrównywanie w poziomie – po znaczniku tabeli

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.
{| class="wikitable" style="text-align: wartość"

Skrócone polecenie wyrównywania działa na początku tabeli wadliwie i niekonsekwentnie. Wikitabelę wyrównuje do prawego brzegu artykułu, tabelę niesformatowaną wyrównuje do prawej lub środka.

{| class="wikitable" align="wartość"   ← nie używać tutaj
5. Wyrównywanie w poziomie – po znaczniku tytułu

Przykład. Tytuł tabeli do prawej:

Tytuł
Nagłówek A Nagłówek B
Komórka A Komórka B
{| class="wikitable"
|+ style="text-align:right"| Tytuł
! Nagłówek A || Nagłówek B
|-
| Komórka A || Komórka B
|}
6. Wyrównywanie w poziomie – po znaczniku wiersza

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="text-align:wartość"
Nagłówek A Nagłówek B Nagłówek C
1A 1B 1C
2A 2B 2C
3A 3B 3C
align="wartość"
Nagłówek A Nagłówek B Nagłówek C
4A 4B 4C
5A 5B 5C
6A 6B 6C
{| 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
|}
{| 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
|}
7. Wyrównywanie w poziomie – po znaczniku komórki

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="text-align:wartość"
Nagłówek A Nagłówek B Nagłówek C
01A 01B 01C
1A 1B 1C
align="wartość"
Nagłówek A Nagłówek B Nagłówek C
02A ! 02B ! 02C !
2A 2B 2C
{| 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
|}
{| 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
|}
8. Wyrównywanie do prawej w wybranych kolumnach

Robi się to specjalnie zmodyfikowaną klasą "wikitable", ale:

  • metoda dotyczy tylko wyrównywania do prawej (nie działa do lewej lub 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):

{| class="wikitable col-3-text-align-right col-4-text-align-right"

...co da poniższy efekt:

Nagłówek A Nagłówek B Nagłówek C Nagłówek D Nagłówek E
01A 01B 01C 01D 01E
1A 1B 1C 1D 1E
2A 2B 2C 2D 2E
3A 3B 3C 3D 3E
9. Wyrównywanie innych elementów niż tekst
  • Polecenie style="text-align:wartość" nie wyrównuje zagnieżdżonych tabel.
  • Polecenie align="wartość" działa na wszystkie elementy w komórce.
Nagłówek A Nagłówek B Nagłówek C
style="...left"
style="...center"
style="...right"
align="left"
align="center"
align="right"

Wyrównywanie tekstu – w pionie[edytuj | edytuj kod]

1. Wyrównywanie w pionie – składnia

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 zagnieżdżone (podczas gdy przy wyrównywaniu w poziomie jest różnica).

2. Gdzie i co można wyrównywać w pionie?
Po znaczniku początku tytułu nie dotyczy
Po znaczniku początku tabeli nie działa
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ą).
3. Wyrównywanie w pionie – wartości domyślne
Rodzaj tekstu Kierunek
Tytuł tabeli nie dotyczy
Komórka
nagłówka
...
middle
Komórka
zwykła
...
middle

...czyli innymi słowy wszystko w tabelach jest domyślnie wyrównane do połowy wysokości.

4. Wyrównywanie w pionie – po znaczniku tabeli

Wyrównywanie zbiorczo poleceniem dla całej tabeli NIE DZIAŁA:

{| class="wikitable" style="vertical-align:top"
{| class="wikitable" style="vertical-align:middle"
{| class="wikitable" style="vertical-align:bottom"

...co widać na poniższym przykładzie (gdzie nic się nie zmienia):

...top"
01A
01A
01B
1A
1A
1B
 
...middle"
01A
01A
01B
1A
1A
1B
 
...bottom"
01A
01A
01B
1A
1A
1B
5. Wyrównywanie w pionie – po znaczniku wiersza

Poniżej polecenia po kolei dla każdego wiersza (w kodzie pełne i skrócone):

01A
01A
01A
01B
01B
01C
02A
02A
02A
02B
02B
02C
03A
03A
03A
03B
03B
03C
1A
1A
1A
1B
1B
1C
2A
2A
2A
2B
2B
2C
3A
3A
3A
3B
3B
3C
{| 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
|}
{| 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
|}
  • 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.
6. Wyrównywanie w pionie – po znaczniku komórki

Poniżej polecenia z osobna dla każdej komórki (w kodzie pełne i skrócone):

01A 01B 01C ...
...
...
1A 1B 1C ...
...
...
{| 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 />...
|}
{| class="wikitable"
!valign="top"| 01A
!valign="middle"| 01B
!valign="bottom"| 01C
! ...<br />...<br />...
|-
|valign="top"| 1A
|valign="middle"| 1B
|valign="bottom"| 1C
| ...<br />...<br />...
|}
7. Wyrównywanie w pionie – marginesy

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 początku 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):

1A 1B 1C 1D

1E

...
...
...
2A 2B 2C 2D

2E

...
...
...
|style="vertical-align:top"| 1D
|style="vertical-align:top"|
1E

|style="vertical-align:bottom"| 2D
|style="vertical-align:bottom"|
2E
8. Użycie szablonu dla liczb

W przypadku, gdy tekst w komórce przedstawia liczbę, do jego wyrównywania pomocny może być szablon {{L}}. Opis jego stosowania jest zamieszczony tutaj: Szablon:L/opis.

Nie należy jednak nadużywać tego szablonu, ponieważ powoduje on zarówno wolniejsze przetwarzanie strony, jak i to, że kod strony znacznie się wydłuża!

Kolory[edytuj | edytuj kod]

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

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

Polecenie stylu Dotyczy
style="background: wartość"

1) tło w całej tabeli
    – łącznie z tłem pod brakującymi komórkami
    – uwaga: nie działa na tło komórek nagłówka
2) tło w całym wierszu
    – wszystkie komórki zwykłe w wierszu (bez komórek brakujących)
    – uwaga: nie działa na tło komórek nagłówka
3) tło w pojedynczej komórce (nagłówka lub zwykłej)

style="color: wartość"

1) tekst w całej tabeli
    – także w komórkach nagłówka
2) tekst w całym wierszu
    – także w komórkach nagłówka
3) tekst w pojedynczej komórce (nagłówka lub zwykłej)

style="border: wartość"

1) obramowanie całej tabeli
    – bez krawędzi wewnętrznych
2) obramowanie całego wiersza
    – łącznie z brakującymi komórkami
    – także z komórkami nagłówka
    – bez krawędzi wewnętrznych
3) obramowanie pojedynczej komórki (nagłówka lub zwykłej)

style="border-top: wartość" jak wyżej, tylko górna krawędź
style="border-right: wartość" jak wyżej, tylko prawa krawędź
style="border-bottom: wartość" jak wyżej, tylko dolna krawędź
style="border-left: wartość" jak wyżej, tylko lewa krawędź

Kolorowanie tła[edytuj | edytuj kod]

Istnieje polecenie dotyczące koloru tła bezpośrednio (1). Wygodniej jednak skorzystać z polecenia zbiorczego (2) dla parametrów tła, podając tylko kolor. Oba polecenia działają identycznie (w drugim można podawać więcej parametrów, np. dotyczących dziedziczenia czy obrazka w tle, co nas teraz nie interesuje):

(1) style="background-color: wartość"
(2) style="background: wartość"         <- wygodniej

Żeby uzyskać różne kolory tła komórek, wstawiamy przed każdą komórką style="background:LightSteelBlue"|, zamiast LightSteelBlue wpisując odpowiednią nazwę koloru (lista rozpoznawanych nazw podana jest w Pomoc:Kolory). Można również podać kolor jako kombinację trzech składowych koloru (czerwony, zielony, niebieski) wyrażoną liczbami szesnastkowymi poprzedzoną znakiem #, np. style="background:#ff0000"|. 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 #ff0033 można podać #f03.

Kolor tekstu określa atrybut color:, np. użycie style="color: PaleGreen" spowoduje, że tekst będzie jasnozielony. 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.

Kolor tła i kolor leżącego na nim tekstu można umieścić we wspólnym poleceniu stylu, przedzielając oba parametry średnikiem, np.

style="background:Maroon; color:White".

Kolorowanie tekstu[edytuj | edytuj kod]

Zastosowanie poniższego kodu:

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

...daje taki efekt:

kolor szaroniebieski kolor khaki ciemny kolor khaki (tekstu) niebieski podany szesnastkowo

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

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

...co daje:

jeden kolor we wszystkich czterech komórkach tego wiersza
tu kolor wg wiersza tu też domyślny wybrany a tu zmiana domyślnego koloru tła a tu znowu jest domyślny

Kolorowanie obramowania[edytuj | edytuj kod]

Obramowanie (jednocześnie wszystkie 4 krawędzie) pojedynczej komórki lub całego wiersza kolorujemy poleceniem border-color. Zazwyczaj dla poprawy widoczności trzeba wtedy obramowanie również pogrubić poleceniem border-width, a to z kolei wymusza użycie polecenia border-style określającego rodzaj linii (np. ciągła, przerywana, kropkowana). W efekcie musimy użyć 3 poleceń, np.:

1)   linia ciągła: style="border-style: solid"
2)   o grubości 4 pikseli:   style="border-width: 4px"
3)   i kolorze czerwonym: style="border-color: Red"

Ponieważ dany element tabeli może mieć tylko jedno polecenie stylu, trzeba zgrupować parametry powyższych poleceń, przedzielając je średnikami:

style="border-style: solid; border-width: 4px; border-color: Red"

Wygodniej jednak użyć polecenia border, które jeszcze bardziej upraszcza składnię, np.:

style="border: solid 4px Red"

{| class="wikitable"
| Komórka 1A
| Komórka 1B
|style="border: solid 4px Red"| Komórka 1C
|-
| Komórka 2A
| Komórka 2B
| Komórka 2C
|- style="border: solid 4px Green"
| Komórka 3A
| Komórka 3B
| Komórka 3C
|-
| Komórka 4A
| Komórka 4B
| Komórka 4C
|}

...co daje:

Komórka 1A Komórka 1B Komórka 1C
Komórka 2A Komórka 2B Komórka 2C
Komórka 3A Komórka 3B Komórka 3C
Komórka 4A Komórka 4B Komórka 4C

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

  • border-top, border-right, border-bottom i border-left.
{| class="wikitable"
| Komórka 1A
|style="border-top: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red"| Komórka 1B
|style="border-top: solid 4px Red; border-right: solid 4px Red; border-bottom: solid 4px Red"| Komórka 1C
|-
| Komórka 2A
| Komórka 2B
| Komórka 2C
|-
|style="border-top: solid 4px Green; border-right: solid 4px Green; border-left: solid 4px Green"| Komórka 3A
| Komórka 3B
| Komórka 3C
|-
|style="border-right: solid 4px Green; border-bottom: solid 4px Green; border-left: solid 4px Green"| Komórka 4A
| Komórka 4B
| Komórka 4C
|}

...co daje:

Komórka 1A Komórka 1B Komórka 1C
Komórka 2A Komórka 2B Komórka 2C
Komórka 3A Komórka 3B Komórka 3C
Komórka 4A Komórka 4B Komórka 4C

W ten sam sposób (formatując w każdej komórce potrzebną krawędź) robimy oczywiście pojedyncze kreski, np.:

Komórka 1A Komórka 1B Komórka 1C
Komórka 2A Komórka 2B Komórka 2C
Komórka 3A Komórka 3B Komórka 3C
Komórka 4A Komórka 4B Komórka 4C
Komórka 5A Komórka 5B Komórka 5C

O wiele łatwiej (pojedynczym poleceniem) robi się kreskę wzdłuż całego wiersza:

{| class="wikitable"
| Komórka 1A
| Komórka 1B
| Komórka 1C
|- style="border-top: solid 4px Red"
| Komórka 2A
| Komórka 2B
| Komórka 2C
|}

...co daje:

Komórka 1A Komórka 1B Komórka 1C
Komórka 2A Komórka 2B Komórka 2C

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

Parametry krawędzi

Grubość krawędzi powiększa rozmiar tabeli. Użycie stylu obramowania „hidden” ukrywa ramkę niezależnie od jej grubości, użycie koloru „transparent" zachowuje grubość ramki, choć będzie ona przezroczysta:

 
1A 1B 1C
2A 2B 2C
3A 3B 3C
solid 6px black
1A 1B 1C
2A 2B 2C
3A 3B 3C
hidden 6px black
1A 1B 1C
2A 2B 2C
3A 3B 3C
solid 6px transparent
1A 1B 1C
2A 2B 2C
3A 3B 3C

Tabele kolorów[edytuj | edytuj kod]

 Osobna strona: Pomoc:Kolory.

Właściwości tekstu[edytuj | edytuj kod]

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:

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

...co daje:

kursywa we wszystkich trzech komórkach tego wiersza
pogrubienie we wszystkich trzech komórkach tego wiersza
zielony we wszystkich trzech komórkach tego wiersza
powiększenie 125% we wszystkich trzech komórkach tego wiersza
zmniejszenie 75% we wszystkich trzech komórkach tego wiersza

Atrybuty można podawać w jednym stylu, przedzielając je średnikiem :

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

...co daje:

pogrubienie + kursywa we wszystkich trzech komórkach tego wiersza
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:

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

...co daje:

1. zielony dodatkowo pogrubienie zielony
2. zielony zmiana na czerwony zielony


Zagnieżdżanie tabel[edytuj | edytuj kod]

poniższy kod:

{| class="wikitable"
| komórka 1
|
{| class="wikitable" style="background:LightBlue"
| tabela
|-
| zagnieżdżona
|}
| komórka 3
|}

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

komórka 1
tabela
zagnieżdżona
komórka 3

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

Kilka tabel obok siebie[edytuj | edytuj kod]

Metoda zagnieżdżania[edytuj | edytuj kod]

Najprostszą metodą jest stworzenie nadrzędnej gołej tabeli bez formatowania (czyli bez class="wikitable" składającej się tylko z jednego wiersza. W kolejnych komórkach tego wiersza umieszczamy normalne, wikipediowe tabele (czyli zawierające class="wikitable"), a najlepiej w co drugiej komórce, przeplatając to komórkami z odstępem (np. z &nbsp;). Innymi słowy kilka tabel sformatowanych osadzamy w jednej tabeli niesformatowanej:

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

Osadzone tabele bez odstępów mają bardzo mały własny odstęp:

1 1
1 1
2 2
2 2

A tak jest po dodaniu komórki z odstępem (np. z &nbsp;)

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

inna
wysokość
inna
wysokość
 
inna
wysokość
inna wysokość
 
inna wysokość
inna
wysokość
 
inna wysokość
inna 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:   {|
                              |- style="vertical-align: top"|
      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:   |}
inna
wysokość
inna
wysokość
 
inna
wysokość
inna wysokość
 
inna wysokość
inna
wysokość
 
inna wysokość
inna wysokość

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

Poniżej jedna tabela: zwykły odstęp ↓

Poniżej tabele osadzone w tabeli: zwykły odstęp ↑, powiększony odstęp ↓

 

Nowy akapit: powiększony odstęp ↑

Metoda białej kolumny[edytuj | edytuj kod]

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 rowspan (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.:

{| class="wikitable"
! Nagłówek A
! Nagłówek B
!rowspan=4 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
|}

...co daje:

Nagłówek A Nagłówek B Trzecia
kolu-
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):

{| class="wikitable" style="border: none"
! Nagłówek A
! Nagłówek B
!rowspan=4 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
|}

...co również daje:

Nagłówek A Nagłówek B Trzecia
kolu-
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:

x x x x
x x x x

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

Dodatkową zaletą obu tych rozwiązań niby-dzielonej tabeli jest identyczna wysokość wszystkich komórek w wierszu (de facto jest to wciąż jedna tabela), np.:

ta
sama
wysokość
biała
kolu-
mna
ta sama wysokość
ta
sama
wysokość
ta sama wysokość
ta
sama
wysokość
ta sama wysokość

Kilka tabel z wyrównanymi kolumnami[edytuj | edytuj kod]

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 width o takich samych wartościach dla każdej z 3 tabel po to, by miały taką samą szerokość.

Kilka tabel z kolumnami o dynamicznej szerokości:
     
Numer Tytuł Autor Czas
1. We Got The Party Greg Wells, Kara DioGuardi 3:37
Numer Tytuł
1. „Life’s What You Make It” (live)
Numer Tytuł Autor Czas
1. See You Again Miley Cyrus, Armato, James 3:10
     
 


Kilka tabel z wyrównanymi kolumnami o stałej szerokości:
     
Numer Tytuł Autor Czas
1. We Got The Party Greg Wells, Kara DioGuardi 3:37
Numer Tytuł
1. „Life’s What You Make It” (live)
Numer Tytuł Autor Czas
1. See You Again Miley Cyrus, Armato, James 3:10
     
 

Kody

Kod kilku tabel z kolumnami o dynamicznej szerokości
{|
|- 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
|}
Kod kilku tabel z wyrównanymi kolumnami stałej szerokości
{|
|- style="background: #DDD"
!width="30px"| Numer
!width="180px"| Tytuł
!width="250px"| Autor
!width="35px"| Czas
|-
| 1. || „[[We Got the Party|We Got The Party]]” || Greg Wells, Kara DioGuardi || 3:37
|}

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

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

Sortowanie danych w tabelach[edytuj | edytuj kod]

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

{| class="wikitable sortable" style="text-align:right"
!style="width:100px"| Kolumna główna
!style="width:80px"| Sortowanie alfabetyczne
!style="width:80px"| Sortowanie wg liczb
!style="width:80px"| Sortowanie z innymi znakami
|-
! Rok 2006
| Muzyka
| 245
| 18
|-
! Rok 2005
| Literatura
| 127
| -
|-
! Rok 2004
| Technika
| 52
| 32
|-
! Rok 2006
| Łucznictwo
| 21,12
| 987
|-
! Rok 2003
| Ogrodnictwo
| 21
| ?
|}

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

Kolumna główna Sortowanie alfabetyczne Sortowanie liczb Sortowanie z innymi znakami
Rok 2006 Muzyka 245 18
Rok 2005 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:

Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb
Rok 2006 T 245
Rok 2005 N 127
Rok 2003 nie sortujemy 21

Efekt uzyskuje się, dodając class="unsortable" w opisie kolumny w pierwszym wierszu (nagłówku) tabeli:

{| class="wikitable sortable" style="text-align:right"
!width="100px"| Kolumna główna
!width="80px" class="unsortable"| Nie sortujemy
!width="80px"| Sortowanie liczb
...

Można również wskazać, aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli:

Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb
Rok 2006 T 245
Rok 2005 N 127
Rok 2003 nie sortujemy 21
Podsumowanie Sortowanie tabel nie jest trudne 45

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

|-
! Rok 2003
| nie sortujemy
| 21
|- class="sortbottom"
! Podsumowanie
| Sortowanie tabel nie jest trudne
| 45
|}

Sortowanie liczb[edytuj | edytuj kod]

 Zobacz też: Szablon:L.

W przypadku niewłaściwego sortowania liczb w kolumnie, w jej nagłówku należy wstawić parametr data-sort-type="number":

! Tytuł kolumny!data-sort-type="number"| Tytuł kolumny

Przykład:

Zawartość kofeiny (mg/100 g)
Produkt Bez data-sort-type Z data-sort-type
Tabletka kofeiny (regular) 100 100
Kawa parzona 80–135 80–135
Kawa bezkofeinowa 5–15 5–15
Herbata czarna 50 50

Aby prawidłowo sortowały się wyrażenia typu <0,001 można zastosować „łatkę” z wykorzystaniem szablonu {{sortkey}}. Należy podać w nim wartość nieco mniejszą, np. {{sortkey|0,0009}} 0,001, od właściwej. Rozwiązanie to nie ma charakteru systemowego i wymaga uwagi u edytujących, gdyż np. liczba 0,00095 będzie w powyższym przykładzie sortowała się jako większa niż <0,001.

Sortowanie liczb rzymskich

W celu poprawnego sortowania liczb rzymskich, przed daną liczbą rzymską należy wstawić szablon pomocniczy {{sortkey}}, tj. zamiast XIX wpisz {{sortkey|19}} XIX. Przykładowa tabela poniżej zawiera też parametr data-sort-type="number".

Bez {{sortkey}} Z {{sortkey}} Z {{sortkey}}
i data-sort-type
I I I
II II II
III III III
IV IV IV
V V V
VI VI VI
VII VII VII
VIII VIII VIII
IX IX IX
X X X

Sortowanie dat w tabelach[edytuj | edytuj kod]

 Zobacz też: Szablon:Dts.

Zasadniczo daty w tabelach są prawidłowo sortowane wyłącznie wtedy, gdy podane są w cyfrowym formacie rok-miesiąc-dzień, który nie jest powszechnie używany. W tym celu utworzono szablon {{dts}}, który pozwala prawidłowo sortować daty w tabelach. Przykładowo następujący wiki-kod:

{| class="wikitable sortable" style="text-align:right"
! Kolumna główna
! Sortowanie dat<br/>(szablon dts)
! Sortowanie dat<br/>(rrrr-mm-dd)
! Sortowanie liczb
|-
! Pozycja 1
| {{dts|01|01|1999}}
| 1999-01-01
| 245
|-
! Pozycja 2
| {{dts|03|07|1995}}
| 1995-07-03
| 127
|-
! Pozycja 3
| {{dts|07|03|1997}}
| 1997-03-07
| 21
|}

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

Kolumna główna Sortowanie dat
(szablon dts)
Sortowanie dat
(rrrr-mm-dd)
Sortowanie liczb
Pozycja 1 1999-01-011 stycznia 1999 1999-01-01 245
Pozycja 2 1995-07-033 lipca 1995 1995-07-03 127
Pozycja 3 1997-03-077 marca 1997 1997-03-07 21

Sortowanie nazwisk w tabelach[edytuj | edytuj kod]

 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 {{sortname}}, który rozwiązuje ten problem. Przykładowo kod:

{| class="wikitable sortable"
! Imię i nazwisko
! Dziedzina
! Rok
|-
| {{sortname|Greg|Walden}}
| polityk
| 1991
|-
| {{sortname|Wes|Cooley}}
| działacz
| 1996
|-
| {{sortname|Smith|Dennis|Denny Smith}}
| aktywista
| 1994
|-
| {{sortname|Pete|Sampras}}
| sportowiec
| 1993
|}

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

Imię i nazwisko Dziedzina Rok
Walden, GregGreg Walden polityk 1991
Cooley, WesWes Cooley działacz 1996
Dennis, SmithSmith Dennis aktywista 1994
Sampras, PetePete Sampras sportowiec 1993

Sortowanie tabel zawierających grafiki[edytuj | edytuj kod]

Szablon {{sortkey}} pozwala na poprzedzenie zawartości komórki kluczem sortowania i uczynienie go niewidzialnym. Jest to przydatne, kiedy kolumna zawiera np. grafiki, a nie nazwiska. Przykładowe zastosowanie: polskie lotniska.

Automatyczne numerowanie w pierwszej kolumnie[edytuj | edytuj kod]

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

Lp. Opis
1. jeden
2. dwa
3. trzy
{{Numerowanie w tabeli| class{{=}}"wikitable"
! Lp. !! Opis
|-
|#|| jeden
|-
|#|| dwa
|-
|#|| trzy
}}

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:

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

Zestawienie i objaśnienia kodów tabeli[edytuj | edytuj kod]

Kod Zastosowanie
  • {|
  • |+
  •  !
  •  !!
  • |
  • ||
  • |-
  • |}
  • Początek kodu tabeli (po tych znakach wpisujemy style, klasy itp. dla całej tabeli)
  • Dodaje tytuł nad tabelą
  • Nowa kolumna nagłówka (pionowe)
  • równoważne "<br />" (nowy wiersz) + "!" (nowa kolumna nagłówka)
  • Nowa kolumna (pionowe)
  • równoważne "<br />" (nowy wiersz) + "|" (nowa kolumna)
  • Nowy wiersz (poziome)
  • Kończy tabelę
  • class="wikitable"
  • Określenie klasy tabeli (zalecana właśnie wikitable).
    Dodatkowe klasy do tej samej tabeli można ewentualnie podać po spacji
    (np. class="wikitable error" da w wyniku tabelę z dużymi czerwonymi napisami)
  • class="sortable"
  • Włączenie sortowania tabeli po wybranych kolumnach – do użycia po {|
  • class="unsortable"
  • Wyłączenie kolumny z sortowania – do użycia w kolumnie, w pierwszym wierszu
  • class="sortbottom"
  • Wyłączenie wiersza z sortowania – do użycia w opisie wiersza, zaraz po |-
  • style="
    • width: 30%;
    • text-align:left;
    • text-align:center;
    • text-align:right;
    • vertical-align:top;
    • vertical-align:center;
    • vertical-align:bottom;
    • border: 1px solid #FFFFFF;
    • float: right;
    • float: left;
  • "
  • Otwieranie określeń stylów
    • Tabela zajmie 30% szerokości artykułu
    • Wyrównanie tekstu do lewej
    • ...do środka (w poziomie)
    • ...do prawej
    • ...do góry
    • ...do środka (w pionie)
    • ...do dołu
    • Grubość, styl (solid – linia ciągła; dashed – kreskowana; dotted – kropkowana) i kolor obramowania komórki
    • Wyrównanie tabeli do prawej
    • ...do lewej
  • Po każdej wartości stawiamy średnik (;), a na końcu wszystko zamykamy cudzysłowem (").
  • | wartość |
    • | rowspan=n |
    • | colspan=n |
    • | style="background: FFF2B2" |
  • W ten sposób możemy wstawić, styl, tło, klasę, dla pojedynczego wersu, np.
    • Scalenie n komórek w pionie
    • Scalenie n komórek w poziomie
    • Nadanie koloru ciemnożółtego dla tła
Powoduje, że tabela jest wyrównywana względem tekstu,
np. względem kolejnej sekcji artykułu

Szablony do użycia w tabelach[edytuj | edytuj kod]

Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej kategorii. Należy przy tym zwrócić uwagę, że nadużywanie tych szablonów może znacznie spowolnić generowanie stron i niepotrzebnie obciążać serwery.

Kod i zastosowanie Efekt
{{tak}} oraz {{nie}} – wstawiające grafikę

{{tabela-tak}} oraz {{tabela-nie}} lub {{tabela-tak|jakiś tekst}} oraz {{tabela-nie|jakiś przeczący tekst}} – dodające styl komórki

{| class="wikitable" width="50%"
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{tabela-tak}}
| {{tabela-nie}}
|-
| {{tabela-tak|Raczej tak}}
| {{tabela-nie|Prawdopodobnie nie}}
|}
T za N przeciw
Tak Nie
Raczej tak Prawdopodobnie nie
{{L|200}}

Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach

Wartość 200

Zwijanie/rozwijanie tabeli[edytuj | edytuj kod]

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

Należy pamiętać, że w przypadku gdy tabela ma więcej niż jedną kolumnę, 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
!colspan=3| Nagłówek zwijalnej tabeli
– 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:

{| class="wikitable collapsible collapsed" style="text-align: center"
! Nagłówek zwijalnej tabeli
|-
| Zwijalna
|-
| zawartość
|}

daje w rezultacie tabelę zwijaną/rozwijaną w postaci zwiniętej przy pierwszym wyświetleniu:

Inną klasą oferującą ww. funkcje jest "mw-collapsible". Można jej używać z klasą "mw-collapsed". Klasa "mw-collapsible" różni się od klasy "collapsible" tym, że:

  • przełączane przyciski mają nazwy „Zwiń/Rozwiń”,
  • nie wymaga zdefiniowania w tabeli wiersza nagłówkowego – przy jego braku przycisk „Zwiń/Rozwiń” jest umieszczany w ostatniej komórce pierwszego wiersza,
  • działa też na podglądzie w trybie edycji kodu źródłowego,
  • zdefiniowanie dla tabeli wielokolumnowej tyle samo nagłówków, ile jest kolumn, spowoduje umieszczenie przycisku „Zwiń/Rozwiń" w nagłówku (komórce) ostatniej kolumny.

Poniższy kod obrazuje przypadek wyżej wymieniony (kod &nbsp; w ostatnim nagłówku jest dodany do wymuszenia odstępu przed przyciskiem w postaci zwiniętej):

{| class="wikitable mw-collapsible mw-collapsed" style="text-align: center"
! Nagłówek zwijalnej
! tabeli&nbsp;
|-
| Zwijalna
| tabela
|-
| z klasą
| "mw-collapsible"
|}

i daje w rezultacie poniższą tabelę zwijaną/rozwijaną:

Nagłówek zwijalnej tabeli 
Zwijalna tabela
z klasą "mw-collapsible"

Informacje dla osób znających znaczniki (X)HTML[edytuj | edytuj kod]

Odpowiedniki znaczników HTML i formatowania Wiki
HTML Wiki
bez parametrów
<table> {|
</table> |}
<caption> |+
<tr> |-
<th> !
<td> |
z parametrami
<table parametr="coś"> {| parametr="coś"
<caption parametr="coś">zawartość... |+ parametr="coś" | zawartość...
<tr parametr="coś"> |- parametr="coś"
<th parametr="coś">zawartość... ! parametr="coś" | zawartość...
<td parametr="coś">zawartość... | parametr="coś" | zawartość...

Wszystkie podane powyżej elementy formatowania Wiki należy zawsze zaczynać w nowym wierszu, w przeciwnym razie nie zostaną rozpoznane. Można jednak wstawiać wiele komórek w jednym wierszu, wówczas kolejne komórki są oddzielane 2 pałkami.

Wiele komórek w jednym wierszu
HTML Wiki
bez poleceń
<th>1</th><th>2</th><th>3</th> ! 1 || 2 || 3   lub
! 1 !! 2 !! 3
<td>1</td><td>2</td><td>3</td> | 1 || 2 || 3
z poleceniami
<th>1</th><th style="color:Green">2</th><th>3</th> ! 1 ||style="color:Green"| 2 || 3   lub
! 1 !!style="color:Green"| 2 !! 3
<td>1</td><td style="color:Green">2</td><td>3</td> | 1 ||style="color:Green"| 2 || 3

Spacje (a także niezalecane tabulatory) przed i po znakach formatowania Wiki nie mają znaczenia, jednak (podobnie jak wcześniej) przed pierwszym elementem (tutaj | lub !) muszą znajdować się znaki nowego wiersza. Innymi słowy muszą być pierwszym znakiem w wierszu (nie licząc ewentualnych spacji).

Zestawienie przydatnych poleceń[edytuj | edytuj kod]

Poniżej polecenia, które działają z tabelami wikipediowymi (klasa "wikitable" i pokrewne) oraz najczęściej stosowane lub najbardziej praktyczne jednostki:

Nazwa Polecenie Po jakim znaczniku Wartość Uwagi
{| |+ |- ! |
Ogólne
Kolor tła style="background: wartość" Ta Ty Wi Na Ko nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F,
transparent
Ta – komórki zwykłe i brakujące
Wi – tylko komórki zwykłe
bgcolor="wartość" Wi Ko Wi – tylko komórki zwykłe
Szerokość style="width: wartość" Ta Ty Na Ko liczba + jednostka: %, px dla tabeli 100% = szerokość okna przeglądarki
dla komórek 100% = szerokość tabeli
width="wartość" Ta Na Ko
Wysokość style="height: wartość" Ta Ty Wi Na Ko liczba + jednostka: em, px
height="wartość" Na Ko
Margines
zewnętrzny
style="margin: wartość"

style="margin-top: wartość"
style="margin-right: wartość"
style="margin-bottom: wartość"
style="margin-left: wartość"

Ta Ty liczba + jednostka: em, ex, px także wartości ujemne;
dla pierwszego polecenia:
wartość 1/2/4 razy
Komórki
Scalanie
w poziomie
colspan="wartość" Na Ko liczba
Scalanie
w pionie
rowspan="wartość" Na Ko liczba
Obramowanie
Styl
obramowania
style="border-style: wartość"

style="border-top-style: wartość"
style="border-right-style: wartość"
style="border-bottom-style: wartość"
style="border-left-style: wartość"

Ta Ty Wi Na Ko dashed, dotted, hidden, solid Ta Na Ko – podać border-width;
dla pierwszego polecenia:
wartość 1/2/4 razy
Grubość
obramowania
style="border-width: wartość"

style="border-top-width: wartość"
style="border-right-width: wartość"
style="border-bottom-width: wartość"
style="border-left-width: wartość"

Ta Ty Wi Na Ko liczba + jednostka: px Ty Wi – podać border-style;
dla pierwszego polecenia:
wartość 1/2/4 razy
Kolor
obramowania
style="border-color: wartość"

style="border-top-color: wartość"
style="border-right-color: wartość"
style="border-bottom-color: wartość"
style="border-left-color: wartość"

Ta Ty Wi Na Ko nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F,
transparent
dla pierwszego polecenia:
wartość 1/2/4 razy
Obramowanie
zbiorczo:
styl, grubość, kolor
style="border: wartość 1, 2, 3"

style="border-top: wartość 1, 2, 3"
style="border-right: wartość 1, 2, 3"
style="border-bottom: wartość 1, 2, 3"
style="border-left: wartość 1, 2, 3"

Ta Ty Wi Na Ko

wartość 1: dashed, dotted, hidden, solid
wartość 2: liczba + jednostka: px
wartość 3: nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F

dla pierwszego polecenia:
nie da się wartości 2/4 razy
Tekst
Wielkość znaków style="font-size: wartość" Ta Ty Wi Na Ko liczba + jednostka: em, px, %
Odstęp między wyrazami style="word-spacing: wartość" Ta Ty Wi Na Ko liczba + jednostka: em, px % – nie
Odstęp między znakami style="letter-spacing: wartość" Ta Ty Wi Na Ko liczba + jednostka: em, px % – nie
Wysokość linii style="line-height: wartość" Ta Ty Wi Na Ko liczba + jednostka: em, px, %; sama liczba
Styl znaków style="font-style: wartość" Ta Ty Wi Na Ko italic, normal normal przywraca zmianę nadrzędną
Ciężar znaków style="font-weight: wartość" Ta Ty Wi Na Ko bold, normal normal przywraca zmianę nadrzędną
Kolor znaków style="color: wartość" Ta Ty Wi Na Ko nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F
Wyrównywanie
w poziomie
style="text-align: wartość" Ta Ty Wi Na Ko left, center, right Ta Wi – tylko komórki zwykłe
tabele zagnieżdżone – nie
align="wartość" Ty Wi Ko Ty – z boku tabeli
Wi – tylko komórki zwykłe
tabele zagnieżdżone – tak
Wyrównywanie
w pionie
style="vertical-align: wartość" Wi Na Ko top, middle, bottom tabele zagnieżdżone – tak
valign="wartość" Wi Na Ko
Margines
wewnętrzny
style="padding: wartość"

style="padding-top: wartość"
style="padding-right: wartość"
style="padding-bottom: wartość"
style="padding-left: wartość"

Ty Na Ko liczba + jednostka: em, ex, px dla pierwszego polecenia:
wartość 1/2/4 razy
Blokada
przełamywania
style="white-space: wartość" Ta Ty Wi Na Ko nowrap dla kolumny musi być w najszerszej komórce

Zobacz też[edytuj | edytuj kod]