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).
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
{|
|}
Poniżej porównanie obu składni:
Kod HTML:
| Nagłówek A | Nagłówek B |
|---|---|
| Komórka 1A | Komórka 1B |
| Komórka 2A | Komórka 2B |
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 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).
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:
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.
Poniżej wszystkie znaczniki wikikodu. Zastępują one podstawowe znaczniki HTML:
{|
– początek tabeli – zastępuje
(i nie potrzebuje odpowiednika | (i nie potrzebuje odpowiednika |
|---|
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=...
).
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)
...
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.
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.
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
Nie ma lepszego przykładu niż polecenie nadania tabeli stylu zalecanego na Wikipedii:
Oczywiście w praktyce można znaleźć w tym miejscu znacznie więcej poleceń definiujących wygląd całej 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:
|+ 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 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 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 ||...| tekst <- dobrze
! tekst !!style="color:Red"| tekst !!...| tekst <- dobrze
! tekst !!style="color:Red"! tekst !!...! tekst <- źle
↑ ↑
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:
Trzeci przykład (z błędem) wyświetli się tak:
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:
|align=right| tekst <- składnia poprawna
| tekst <- składnia poprawna
|| tekst <- balast: nadmiarowa pałka
| | tekst <- balast: nadmiarowe spacja i pałka
| 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
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 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.
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 4.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”
, 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
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
|}
Różnica w działaniu pomiędzy enterami i znacznikami „line break” jest taka:
{| class="wikitable"
| 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
|}
...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
A tak powyższe wygląda w praktyce:
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
, też nie są wyświetlane,
natomiast:
spacja po enterze daje tekst techniczny.
Jeżeli chcemy coś poszerzyć, trzeba użyć encji twardej spacji
W przypadku znaczników kodu spacje też są niepotrzebne, ale wprowadza się je dla lepszej czytelności kodu, np.:
{|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
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. 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ą:
Przykład w tabeli:
{| 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
|}
...co daje:
przykładowy tekst
przykładowy tekst
przykładowy tekst
przykładowy tekst
przykładowy tekst
Poniższe zestawienie pokazuje, że warto wstawiać spacje w kodzie:
|+
znacznik 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.
!
!
"
"
#
#
$
$
%
%
&
&
'
'
(
(
)
)
*
*
+
+
,
,
-
-
.
.
/
/
:
:
;
;
<
<
=
=
>
>
?
?
@
@
[
[
\
\
]
]
^
^
_
_
`
`
{
{
|
|
}
}
~
~
Niektóre z powyższych znaków mają również bardziej mnemoniczne wersje encji:
"
&
'
<
>
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.
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ą:
|+ 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ć.
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=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
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:
{| 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
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 „ ” 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
w przypadku kolumny – czterech encji twardej spacji
Poniżej przykład dla wiersza pustych komórek:
{| class="wikitable"
| 1A
| 1B
| 1C
|-
|-
|
|}
{| class="wikitable"
| 1A || 1B || 1C
|-
| || ||
|-
| || ||
|}
Poniżej przykład dla kolumny pustych komórek:
{| class="wikitable"
| 1A
|
| 1D
|-
| 2A
| 2D
|}
{| class="wikitable"
| 1A || || || 1D
|-
| 2A || || || 2D
|}
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
padding
lub
height
, ale użycie encji jest najłatwiejsze, najbezpieczniejsze i najłatwiej zrozumiane przez innych edytujących.
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 (można usunąć)
|- <- 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:
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 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ół.
1 (colspan=3)
2(?)
3(?)
Angielskie słowo
span
znaczy po polsku „zakres, rozpiętość, rozciąganie”, co może pomóc w rozumieniu działania polecenia.
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 (usunięto komórkę 2B):
{| 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 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.
{| 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
|}
...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 nietypowych kształtów 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)
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 początku tabeli
margin
Po znaczniku tytułu
margin i padding
Po znaczniku komórki nagłówka lub zwykłej
padding
Po znaczniku początku 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
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
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, 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.:
{| class="wikitable" style="border-collapse:separate; border-spacing: 0; padding: 5px 10px 15px 30px"
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.
3. 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 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 0 → -1,
-1 i -1 → -1,
-1 i -2 → -2.
Jednak przy przeciwstawnych znakach wartości sumują się:
-1 i 1 → 0,
-1 i 3 → 2.
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:
Przykłady – odstępy pionowe:
-2em + 1em → -1em
-1em + 1em → 0
0 + 1em → 1em
1em + 1em → 1em
"margin-bottom: 1em" (
domyślnie
2em + 1em → 2em
4. 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
|}
5. Marginesy – po znaczniku tytułu
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
6. Marginesy – po znaczniku 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:
|
|style="padding: 20px"|
|style="padding: 20px"|
|style="padding: 20px"| tekst
I jeszcze jedno zestawienie:
"padding: 0"
"padding-top: 0; padding-bottom: 0"
"padding-left: 0; padding-right: 0"
"padding: .2em .4em"
(domyślne)
1. Wyrównanie tabeli do lewej
Wyrównanie do lewej – bez oblewania:
Jest to ustawienie domyślne.
Akapit przed tabelą.
Akapit po tabeli.
Wyrównanie do lewej – z oblewaniem:
Robią to polecenia
style="float: left"
lub skrócone
align=left
Dodano odstęp „1em” z prawej, aby tekst nie dotykał tabeli.
Akapit przed tabelą: abc abc abc abc.
Akapit po tabeli: abc abc abc abc abc abc abc abc abc abc abc abc abc.
{| class="wikitable" style="float: left; margin-right: 1em"
{| class="wikitable" align=left style="margin-right: 1em"
2. Wyśrodkowanie tabeli
Wyrównanie w osi – bez odstępów pionowych:
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.
Akapit przed tabelą.
Akapit po tabeli.
{| class="wikitable" style="margin: auto"
Wyrównanie w osi – z zachowaniem pionowych odstępów:
Poniżej dodano wartość „1em”, aby przywrócić oba odstępy pionowe domyślne dla wikitabeli.
Akapit przed tabelą.
Akapit po tabeli.
{| class="wikitable" style="margin: 1em auto"
Uwaga:
tylko taka kolejność działa poprawnie
1em auto
– „auto” musi być na drugiej pozycji, aby działało tylko w poziomie.
3. Wyrównanie tabeli do prawej
Wyrównanie do prawej – bez oblewania:
Robi to polecenie „margin-left: auto”.
Akapit przed tabelą.
Akapit po tabeli.
{| class="wikitable" style="margin-left: auto"
Wyrównanie do prawej – z oblewaniem:
Robią to polecenia
style="float: right"
lub skrócone
align=right
Dodano odstęp „1em” z lewej, aby tekst nie dotykał tabeli.
Akapit przed tabelą: abc abc abc abc.
Akapit po tabeli: abc abc abc abc abc abc abc abc abc abc abc abc abc.
{| class="wikitable" style="float: right; margin-left: 1em"
{| class="wikitable" align=right style="margin-left: 1em"
4. Tabele obok siebie
Tabele na styk – w pionie:
Wystarczy ustawić pionowe marginesy na „0”, a ponieważ poziome są zerowe domyślnie, to wystarczy podać ogólnie „margin:0”.
{| class="wikitable" style="margin:0"
| Tabela1
|}
{| class="wikitable" style="margin:0"
| Tabela2
|}
{| class="wikitable" style="margin:0"
| Tabela3
|}
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:
{| style="float:left; margin-right:1em"
TUTAJ
|}
...natomiast gdy tabele mają być przy prawym marginesie i oblewane z lewej, to wtedy powyższe parametry odwrotnie:
{| style="float:right; margin-left:1em"
TUTAJ
|}
Tabele na styk – w poziomie:
Robi to polecenie „float:left”.
{| class="wikitable" style="float:left"
| Tabela1
|}
{| class="wikitable" style="float:left"
| Tabela2
|}
{| class="wikitable" style="float:left"
| Tabela3
|}
{{clear}}
W powyższym przykładzie dodano na końcu kodu
{{
clear
}}
dla wyłączenia oblewania. Jest to oczywiście opcjonalne.
Różnice wyświetlania w przeglądarkach:
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.
5. Wyrównywanie tabel – zaawansowane
Kilka tabel w jednym wierszu:
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.
...wyświetli się tak:
Tekst akapitu powyżej.
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.
6. Wyrównywanie tabel – problem z „float”
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
{{
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.
Bez szablonu
Akapit1
Akapit2
Akapit3
Po użyciu szablonu
Akapit1
Akapit2
Akapit3
Akapit1
{| class="wikitable" style="float:left; margin:0 1em 0 0"
| 1A || 1B
|-
| 2A || 2B
|-
| 3A || 3B
|}
Akapit2
{{clear}} <- szablon odpychania
Akapit3
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 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
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
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”.
{| class="wikitable" align="wartość"
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 w poziomie – inne elementy niż tekst
Polecenie
style="text-align:wartość"
nie wyrównuje osadzonych tabel.
Polecenie
align="wartość"
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).
Nagłówek A
Nagłówek B
Nagłówek C
style="...left"
style="...center"
style="...right"
align="left"
align="center"
align="right"
9. 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 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):
{| 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
Uwaga:
w przypadku użycia polecenia „rowspan” nastąpi przesunięcie działania w lewo począwszy od 2. scalonego wiersza.
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 osadzone (podczas gdy przy wyrównywaniu w poziomie jest różnica).
2. Gdzie i co można wyrównywać w pionie?
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ą).
3. Wyrównywanie w pionie – wartości domyślne
Rodzaj tekstu
Położenie
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"
{| class="wikitable" valign="top"
{| class="wikitable" valign="middle"
{| class="wikitable" valign="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
01A
01A
! 01B
01B
! 01C
|- style="vertical-align:middle"
! 02A
02A
02A
! 02B
02B
! 02C
|- style="vertical-align:bottom"
! 03A
03A
03A
! 03B
03B
! 03C
|- style="vertical-align:top"
| 1A
1A
1A
| 1B
1B
| 1C
|- style="vertical-align:middle"
| 2A
2A
2A
| 2B
2B
| 2C
|- style="vertical-align:bottom"
| 3A
3A
3A
| 3B
3B
| 3C
|}
{| class="wikitable"
|- valign="top"
! 01A
01A
01A
! 01B
01B
! 01C
|- valign="middle"
! 02A
02A
02A
! 02B
02B
! 02C
|- valign="bottom"
! 03A
03A
03A
! 03B
03B
! 03C
|- valign="top"
| 1A
1A
1A
| 1B
1B
| 1C
|- valign="middle"
| 2A
2A
2A
| 2B
2B
| 2C
|- valign="bottom"
| 3A
3A
3A
| 3B
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
! ...
...
...
|-
|style="vertical-align:top"| 1A
|style="vertical-align:middle"| 1B
|style="vertical-align:bottom"| 1C
| ...
...
...
|}
{| class="wikitable"
!valign="top"| 01A
!valign="middle"| 01B
!valign="bottom"| 01C
! ...
...
...
|-
|valign="top"| 1A
|valign="middle"| 1B
|valign="bottom"| 1C
| ...
...
...
|}
7. Wyrównywanie w pionie – inne elementy niż tekst
Oba polecenia – stylu
style="vertical-align:...
i skrócone
valign=...
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.
Nagłówek A
Nagłówek B
Nagłówek C
style="...top"
style="...middle"
style="...bottom"
valign="top"
valign="middle"
valign="bottom"
8. 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 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
|valign="top"| 1D
|valign="top"|
1E
|valign="bottom"| 2D
|valign="bottom"|
2E
9. 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!
W większości przypadków powinno się stosować standardową wikipediową postać tabeli, czyli
{| class="wikitable"
, 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
Są dwa podstawowe sposoby podawania wartości koloru:
wybierając odpowiednią nazwę koloru,
lista rozpoznawanych nazw podana jest w
Pomoc:Kolory
np. kolor tła o nazwie
LightSteelBlue
, czyli
style="background:LightSteelBlue"
podając wartość koloru jako kombinację trzech składowych koloru (
czerwony, zielony, niebieski
) wyrażoną
liczbami szesnastkowymi
, poprzedzoną znakiem
np. kolor tła o składowych „ff 00 00” (bardzo czerwony, bez zielonego i niebieskie), zapiszemy jako:
style="background:#ff0000"
Są inne formy podawania koloru. Możesz się spotkać z krótszym zapisem 3 znaków (np. zamiast
#ff0033
można podać
#f03
). Można też dodać podać kolor liczbami dziesiętnymi (np. zamiast
#ff0305
można podać
rgb(255, 3, 5)
). Istnieje też wiele innych metod, ale część z nich może nie być obsługiwana na Wikipedii.
Są trzy podstawowe polecenia kolorów dotyczące tabel. Jedno już podane było wyżej, czyli zmiana tła przez podanie
background:
. Do tego mamy również nadanie obramowania
border:
i kolor tekstu
color:
. Polecenia te umieszcza się we wspólnym atrybucie
style
, który można podać po każdym znaczniku tabeli, wiersza lub komórki (każdy z tych elementów może mieć tylko jeden atrybut
style
). Polecenia rozdziela się średnikami, a wszystkie polecenia muszą być we wspólnym cudzysłowie. Po ostatnim poleceniu można, ale nie trzeba dodawać średnika.
Przykład dodanie tła komórki i koloru:
{|
class
"wikitable"
style
"background: OliveDrab; color: White;"
Oliwkowa komórka tabeli
style
"background: #000060; color: #fff;"
Granatowa komórka tabeli
|}
Oliwkowa komórka tabeli
Granatowa komórka tabeli
Więcej na osobnej stronie:
Pomoc:Kolory w tabeli
. Znajdziesz tam informacje i przykłady m.in. o kolorowaniu tła, tekstu oraz obramowań w tabelach, zarówno globalnie (dla całych tabel) jak i lokalnie (dla wierszy, kolumn i komórek).
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
poniższy kod:
{| class="wikitable"
| komórka 1
{| class="wikitable" style="background:LightBlue"
| tabela
|-
| osadzona
|}
| komórka 3
|}
...dodaje tabelę osadzoną w drugiej komórce tabeli zewnętrznej
Uwaga: kod tabeli osadzonej musi zaczynać się od nowego wiersza.
Aby ułożyć kilka tabelek obok siebie (a także kilka dowolnych elementów), należy skorzystać z konstrukcji
wikiflex
. Pozwala ona na płynne układanie tabelek obok siebie, dbając jednocześnie o to, aby na smartfonach nie wychodziły za daleko poza prawy brzeg ekranu.
Dokładniejszy opis tej metody znajduje się na podlinkowanej stronie pomocy. Przykład zastosowania znajduje się poniżej.
Kolumna 1a
Kolumna 1b
Komórka 1a
Komórka 1b
Kolumna 2a
Kolumna 2b
Komórka 2a
Komórka 2b
div
class
"wikiflex"
{|
class
"wikitable"
Kolumna 1a
Kolumna 1b
|-
Komórka 1a
Komórka 1b
|}
{|
class
"wikitable"
Kolumna 2a
Kolumna 2b
|-
Komórka 2a
Komórka 2b
|}
div
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ł
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ł
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”
(live)
|}
{|
|-
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=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”
(live)
|}
{|
|-
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
|}
Przez sortowanie danych w tabelach rozumiemy możliwość dodania przycisków do posortowania po wybranej kolumnie. Uzyskuje się to dodają odpowiednią klasę
sortable
do tabeli, a efekt jest taki jak możesz zobaczyć poniżej.
Przykładowy kod:
{|
class
"wikitable sortable"
|-
zwierzę
liczba w Wąchocku
liczba w Pacanowie
|-
koty
273
53
|-
psy
65
8492
|-
myszy
1649
548
|-
kozy
51
5894
|}
Sortowalna tabela:
zwierzę
liczba w Wąchocku
liczba w Pacanowie
koty
273
53
psy
65
8492
myszy
1649
548
kozy
51
5894
Więcej o sortowaniu w osobnym artykule:
Pomoc:Sortowanie danych w tabelach
. Znajdziesz tam informacje m.in. o: możliwości wyłączenia sortowania wybranej kolumny (unsortable), o sortowaniu nietypowych liczb, polskich dat oraz imionach i nazwiskach.
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
}}
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}}
|}
za
przeciw
Tak
Nie
Raczej tak
Prawdopodobnie nie
{{
|200}}
Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach
Tabele można zdefiniować jako zwijalne (ukrywające zawartość) z użyciem klasy CSS „
mw-collapsible
”. Użytkownik będzie mógł zwinąć tabelę za pomocą przycisku „Zwiń/Rozwiń”, który wyświetli się w ostatnij komórce pierwszego wiersza.
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 „
mw-collapsed
”.
Poniższy kod obrazuje przypadek wyżej wymieniony tj. z rozwijaniem w ostatniej kolumnie:
{|
class
"wikitable mw-collapsible mw-collapsed"
Nagłówek zwijalnej
tabeli
|-
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”
Z tego rozwiązania można korzystać również do zwijania tagów
div
...
div
(patrz:
Wikipedia:NavFrame
),
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.
Zadanie
Polecenie
Zobacz
Po jakim znaczniku
Wartość
Uwagi
Po jakim znaczniku
Różnica do wikitabeli
{|
|+
|-
{|
|+
|-
Ogólne (wikitabela)
Ogólne (tabela niesformatowana)
Kolor tła
style="background:
wartość
Zobacz
Ta
(zw)
Ty
Wi
(zw)
Na
Zw
nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F,
transparent
Ta – tylko kom. zwykłe i tło pod brakującymi
Wi – tylko komórki zwykłe
Ta
Ty
Wi
Na
Zw
Ta – wszystkie komórki i tło pod brakującymi
Wi – wszystkie komórki
Na – tak
bgcolor="
wartość
Zobacz
Wi
(zw)
Zw
Ta
Wi
Na
Zw
Szerokość
style="width:
wartość
Zobacz
Ta
Ty
(!)
Na
Zw
liczba + [%, px]
dla tabeli 100% = szerokość okna przeglądarki
dla komórek 100% = szerokość tabeli
Ty (!) – przy rozszerzaniu zachowanie
nieprzewidywalne
Ta
Ty
(!)
Na
Zw
width="
wartość
Zobacz
Ta
Na
Zw
tylko liczba (wartość równa px),
liczba + [%];
dokładanie px lub innej jednostki nic nie zmienia
Ta
Na
Zw
Wysokość
style="height:
wartość
Zobacz
Ta
Ty
(!)
Wi
Na
Zw
liczba + [em, px]
tylko powiększanie
Ty(!) – przy zmniejszaniu nachodzi na tabelę
Ta
Ty
(!)
Wi
Na
Zw
height="
wartość
Zobacz
Na
Zw
tylko liczba (wartość równa px);
dokładanie px lub innej jednostki nic nie zmienia,
dokładanie % wyłącza działanie
Na
Zw
Margines
zewnętrzny
tabeli
style="margin:
wartość
style="margin-top:
wartość
style="margin-right:
wartość
style="margin-bottom:
wartość
style="margin-left:
wartość
Zobacz
Porównaj
Ta
Ty
liczba + [em, ex, px],
auto
także wartości ujemne;
dla ‘margin’ wartość 1/2/3/4 razy;
Ta
Ty
aa aa
aa aa
aa aa
aa aa aa aa aaa
Oblewanie
tabeli
style="float:
wartość
Porównaj
Ta
left, right
oba polecenia działają w tym zastosowaniu
identycznie, tabela w jednej linii z inną
tabelą lub tekstem
Ta
align="
wartość
Zobacz
Porównaj
Ta
Ta
Centrowanie
tabeli
style="margin:
wartość
Zobacz
Porównaj
Ta
auto
wartość „auto” dotyczy tylko odstępów
poziomych
Ta
align="
wartość
Zobacz
Porównaj
center
w wikitabeli nie działa
Ta
polecenie „margin” nie może definiować
odstępów poziomych (lub 4 naraz)
Komórki (wikitabela)
Komórki (tabela niesformatowana)
Scalanie
w poziomie
colspan="
wartość
Na
Zw
tylko liczba
Na
Zw
Scalanie
w pionie
rowspan="
wartość
Na
Zw
tylko liczba
Na
Zw
Margines
wewnętrzny
style="padding:
wartość
style="padding-top:
wartość
style="padding-right:
wartość
style="padding-bottom:
wartość
style="padding-left:
wartość
Zobacz
Ta
Ty
Na
Zw
liczba + [em, ex, px]
dla pierwszego polecenia:
wartość 1/2/3/4 razy,
Ta – domyślnie nie działa
(trzeba podać „border-collapse:separate”)
Ta
Ty
Na
Zw
Ta – działa tylko przy domyślnym „separate”
cellpadding="
wartość
tylko liczba (wartość równa px);
dokładanie % lub dowolnej jednostki nic nie zmienia
w wikitabeli nie działa
Ta
działa na wszystkie komórki
i niezależnie od „border-collapse”
Rozsuwanie
komórek
(włączanie)
style="border-collapse:
wartość
Porównaj
Ta
collapse (wspólne krawędzie),
separate (włącza możliwość rozsuwania)
w wikitabeli domyślnie „collapse”,
nie działa wtedy szereg poleceń
związanych z „separate”
Ta
domyślnie „separate” – tylko wtedy działają
„border-spacing”, „cellspacing”
i „empty-cells”
Rozsuwanie
komórek
(wielkość)
style="border-spacing:
wartość
Ta
liczba + [em, ex, px];
jedna wartość (4 kierunki) lub dwie (pion, poziom)
tylko z „border-collapse:separate”
(trzeba przełączyć z „collapse”);
wartość 0 daje wspólną ramkę, ale brzydszą,
bo grubszą niż włączone „collapse”
Ta
tylko z „border-collapse:separate”
(tutaj domyślnie)
cellspacing="
wartość
Porównaj
Ta
tylko liczba (wartość równa px);
dokładanie % lub dowolnej jednostki nic nie zmienia
Ta
Rozsuwanie
komórek
(ukrywanie)
style="empty-cells:
wartość
Ta
hide
tylko z „border-collapse:separate”
(trzeba przełączyć z „collapse”)
Ta
tylko z „border-collapse:separate”
(tutaj domyślnie)
Obrys
tab. niesformat.
border="
wartość
Porównaj
0 – brak kresek (domyślnie)
1 – typowe kreski
w wikitabeli nie działa
Ta
>1 – rośnie tylko obrys tabeli, ale lepiej użyć
polecenia stylu
Siatka
tab. niesformat.
rules="
wartość
Porównaj
all, cols, rows
w wikitabeli nie działa,
w tab. niesformat ustawia domyślne „collapse”
Ta
tylko kreski wewnątrz, bez obrysu tabeli
Parametry obramowania (wikitabela)
Parametry obramowania (tabela niesformatowana)
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
Zw
dashed, dotted, hidden, none
, solid
Ta Wi – tylko krawędzie zewnętrzne
Ta Na Zw – podać border-width;
dla pierwszego polecenia:
wartość 1/2/3/4 razy
Ta
Ty
Wi
Na
Zw
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
Zw
liczba + [px]
Ta Wi – tylko krawędzie zewnętrzne
Ty Wi – podać border-style;
dla pierwszego polecenia:
wartość 1/2/3/4 razy
Ta
Ty
Wi
Na
Zw
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
Zw
nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F,
transparent
Ta Wi – tylko krawędzie zewnętrzne
dla pierwszego polecenia:
wartość 1/2/3/4 razy
Ta
Ty
Wi
Na
Zw
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
Zobacz
Ta
Ty
Wi
Na
Zw
jak wyżej,
wartość 1: dashed, dotted, hidden, none
, solid
wartość 2: liczba + [px]
wartość 3: nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F, transparent
jak wyżej,
można podać 1, 2 lub 3 parametry,
kolejność dowolna;
wiersze tylko dla domyślnego „collapse”
Ta
Ty
Wi
Na
Zw
obramowanie wiersza tylko dla
włączonego „collapse”
Tekst (wikitabela)
Tekst (tabela niesformatowana)
Wielkość znaków
style="font-size:
wartość
Zobacz
Ta
Ty
Wi
Na
Zw
liczba + [em, px, %]
Ta
Ty
Wi
Na
Zw
{\displaystyle {\Bigg \Updownarrow }}
Abc
def
Interlinia
style="line-height:
wartość
Zobacz
Ta
Ty
Wi
Na
Zw
tylko liczba (wartość równa em),
liczba + [em, px, %]
Ta
Ty
Wi
Na
Zw
Abc ↔
Abc
Styl znaków
style="font-style:
wartość
Zobacz
Ta
Ty
Wi
Na
Zw
italic, normal
Ta
Ty
Wi
Na
Zw
Abc ↔
Abc
Ciężar znaków
style="font-weight:
wartość
Zobacz
Ta
(zw)
Ty
Wi
(zw)
Na
Zw
bold, normal
Ta
(zw)
Ty
Wi
(zw)
Na
Zw
Kolor znaków
style="color:
wartość
Zobacz
Ta
Ty
Wi
Na
Zw
nazwa koloru dostępna z listy,
# + 3 lub 6 cyfr 0-F
Ta
Ty
Wi
Na
Zw
Nie używać. W zależności od przeglądarki
koloruje również krawędzie ramki.
Użyć
aaa
aaa
aaa
aa
aa
aa
Wyrównywanie
w poziomie
style="text-align:
wartość
Zobacz
Ta
(zw)
Ty
Wi
(zw)
Na
Zw
left, center, right
Ta Wi – tylko komórki zwykłe
tabele osadzone – nie
Ta
Ty
Wi
Na
Zw
Ta Wi – wszystkie komórki
align="
wartość
Zobacz
Porównaj
Ta
(!)
Wi
(zw)
Zw
Ta (!) – działa jak polecenie ‘float’
Ty – są problemy, użyć polecenia stylu
Wi – tylko komórki zwykłe
tabele osadzone – tak
Ta
(!)
Wi
Na
Zw
Ta (!) – działa jak polecenie ‘float’
lub centruje tabelę
Wi – wszystkie komórki
Na – tak
Wyrównywanie
w pionie
style="vertical-align:
wartość
Zobacz
Wi
Na
Zw
top, middle, bottom
tabele osadzone – tak
Wi
Na
Zw
valign="
wartość
Zobacz
Wi
Na
Zw
Wi
Na
Zw
Blokada
przełamywania
style="white-space:
wartość
Zobacz
Ta
Ty
(!)
Wi
Na
Zw
nowrap, normal
Ta
Ty
(!)
Wi
Na
Zw
nowrap
Zobacz
Na
Zw
nie ma
samo polecenie, bez wartości
Na
Zw
Zadanie
Polecenie
Zobacz
Po jakim znaczniku
Wartość
Uwagi
Po jakim znaczniku
Różnica do wikitabeli
{|
|+
|-
{|
|+
|-
Polecenia w ramach stylu
Polecenia poza stylem
Różnica pomiędzy wikitabelą i tabelą niesformatowaną
Polecenie jest przestarzałe i niezalecane dla nowych tabel. Należy używać stylu.
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.
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.
„Normal” przywraca wartość domyślną. Przydatne przy lokalnym wycofaniu wartości parametru, np. komórka inaczej niż w wierszu.