Pomoc:Tabela

Z SocjoWiki


Tabela w przykładach

Znaczniki składni tabeli w większości wypadków muszą zaczynać się od początku nowej linii. 

 
  {|
  | kolumna 1, wiersz 1
  | kolumna 2, wiersz 1<ref>Przypis</ref>
  |-
  | kolumna 1, wiersz 2
  | kolumna 2, wiersz 2
  |}

Powyższy kod utworzy prostą tabelę bez zarysowanych krawędzi:

kolumna 1, wiersz 1 kolumna 2, wiersz 1
kolumna 1, wiersz 2 kolumna 2, wiersz 2

Zalecany kod tabeli

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

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

...co daje:

kolumna 1, wiersz 1 kolumna 2, wiersz 1
kolumna 1, wiersz 2 kolumna 2, wiersz 2

Wyrównywanie tekstu

Jak widać z przykładów w sekcjach poprzednich, domyślnie (bez podania parametrów) zwykłe komórki są wyrównywane do lewej.

Oto wyrównywanie parametrem: 


 {| class="wikitable"
  ! Nagłówek kolumny nr 1
  ! Nagłówek kolumny nr 2
  ! Nagłówek kolumny nr 3
  |-
  | style="text-align:right" | do prawej
  | style="text-align:center" | wyśrodkowane
  | style="text-align:left" | do lewej
  |}

... co daje:

Nagłówek kolumny nr 1 Nagłówek kolumny nr 2 Nagłówek kolumny nr 3
do prawej wyśrodkowane do lewej

Oto użycie wyrównania raz i tylko raz w nagłówku, gdy chcemy sformatować całą tabelę (lub większość komórek) tak, aby wszystkie były np. wyrównane do prawej: 

 {| class="wikitable" style="text-align:right"
  ! Nagłówek kolumny nr 1
  ! Nagłówek kolumny nr 2
  ! Nagłówek kolumny nr 3
  |-
  | to do prawej
  | i to do prawej
  | i to
  |}


...co daje:

Nagłówek kolumny nr 1 Nagłówek kolumny nr 2 Nagłówek kolumny nr 3
to do prawej i to do prawej i to

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


 {| class="wikitable" style="text-align:right"
  ! Nagłówek kolumny nr 1
  ! Nagłówek kolumny nr 2
  ! Nagłówek kolumny nr 3
  |-
  | to do prawej
  | i to do prawej
  | style="text-align:left" | a to do lewej
  |}

...co daje:

Nagłówek kolumny nr 1 Nagłówek kolumny nr 2 Nagłówek kolumny nr 3
to do prawej i to do prawej a to do lewej


Tabela z tytułem

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


 {| class="wikitable" style="text-align:right"
  |+ '''Tytuł tabeli. Pojawia się bez ramki
  nad tabelą i jest wycentrowany'''
  ! Pierwsza kolumna
  ! Druga kolumna
  |-
  | Komórka 1, wiersz 1
  | Komórka 2, wiersz 1
  |-
  | Komórka 1, wiersz 2
  | Komórka 2, wiersz 2
  |-
  | Komórka 1, wiersz 3
  | Komórka 2, wiersz 3
  |-
  | Komórka 1, wiersz 4
  | Komórka 2, wiersz 4
  |}


...co daje:

Tytuł tabeli. Pojawia się bez ramki nad tabelą i jest wycentrowany
Pierwsza kolumna Druga kolumna
Komórka 1, wiersz 1 Komórka 2, wiersz 1
Komórka 1, wiersz 2 Komórka 2, wiersz 2
Komórka 1, wiersz 3 Komórka 2, wiersz 3
Komórka 1, wiersz 4 Komórka 2, wiersz 4


Kolorowanie komórek

Żeby uzyskać różne barwy tła komórek, wstawiamy przed każdą komórką 

 style="background-color:LightSteelBlue"|

zamiast 

 LightSteelBlue

wpisując odpowiednią nazwę koloru (lista rozpoznawanych nazw podana jest w Pomoc:Kolory), np. style="background-color:#ff0033"| lub skrótowo #f03.

Barwy samego tekstu reguluje atrybut 

 color:, np. dodanie style="color: PaleGreen"

spowoduje, że tekst będzie jasnozielony. Spacja po dwukropku jest opcjonalna, podobnie wielkość liter w nazwie barwy nie ma znaczenia. W przykładach wyróżnienie wielkimi literami zostało zastosowane jedynie dla zwiększenia czytelności.

Określenia barwy tła i tekstu można zestawiać razem (przedzielając je średnikiem) np. 

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


Przykłady kolorowania

Zastosowanie poniższego kodu... 

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

...daje taki efekt:

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

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

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

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


Łączenie komórek

W kilku wierszach – parametr rowspan 

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

rowspan powoduje rozciągnięcie kolumny na kilka wierszy



W kilku kolumnach – parametr colspan 

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


Kolumna 1, wiersz 1 Kolumna 2 (i 3), wiersz 1
Kolumna 1, wiersz 2 Kolumna 2, wiersz 2 Kolumna 3, wiersz 2

colspan powoduje rozciągnięcie komórki na kilka kolumn.


Mieszane łączenie 

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


Tabela zagnieżdżona

poniższy kod... 

 {| border=1
  | komórka 1 tabeli zewnętrznej
  |
  {| border=1 style="background:blue"
  | tabela
  |-
  | zagnieżdżona
  |}
  | komórka 3 tabeli zewnętrznej
  |}

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

komórka 1 tabeli zewnętrznej
tabela
zagnieżdżona
komórka 3 tabeli zewnętrznej


Zestawienie i objaśnienia kodów tabeli

Kod Zastosowanie
  • {|
  • |+
  • !
  • |
  • ||
  • |-
  • |}
  • Rozpoczyna tabelę (po tych znakach wpisujemy style, klasy itp. dla całej tabelki)
  • Dodaje tytuł nad tabelą
  • Nowa kolumna nagłówka (pionowe)
  • Nowa kolumna (pionowe)
  • równoważne "<br />" (nowy wiersz) + "|" (nowa kolumna)
  • Nowy wiersz (poziome)
  • Kończy tabelę
  • align="right"
  • valign="top"
  • border="1"
  • cellspacing="0"
  • cellpadding="3"
  • Wyrównanie tabelki (right/left – do prawej/do lewej)
  • Wyrównanie zawartości tabelki do góry
  • Grubość krawędzi tabelki
  • Odstępy między komórkami tabelki
  • Odstępy między tekstem a krawędziami komórki
  • class="wikitable"
  • Określenie klasy tabelki (zalecana właśnie wikitable).
    Dodatkowe klasy do tej samej tabelki można ewentualnie podać po spacji
    (np. class="wikitable error" da w wyniku tabelkę z dużymi czerwonymi napisami)
  • 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;
    • border: 1px solid #FFFFFF;
  •  ;"
  • Otwieranie określeń stylów
    • Tabelka zajmie 30% szerokości artykułu
    • Wyrównanie tekstu do lewej
    • ... do środka
    • ... do prawej
    • Grubość, styl i kolor obramowania komórki
  • Po każdej wartości stawiamy średnik (;), a na końcu wszystko zamykamy cudzysłowem (").
  • | wartość |
    • | rowspan=n |
    • | colspan=n |
    • | bgcolor="FFF2B2" |
  • W ten sposób możemy wstawić, styl, tło, klasę, dla pojedynczego wersu, np.
    • Scala n komórek w pionie
    • Scala n komórek w poziomie
    • Zabarwia tło komórki na kolor ciemnożółty
  • {{[[{{#ifexist:Szablon:clear|Szablon:clear|{{#ifexist:clear|clear|Szablon:clear}}}}|clear]]{{#if:||{{{2}}}|}}{{#if:||{{{3}}}|}}{{#if:||{{{4}}}|}}{{#if:||{{{5}}}|}}{{#if:||{{{6}}}|}}{{#if:||{{{7}}}|}}{{#if:||{{{8}}}|}}{{#if:||{{{9}}}|}}{{#if:||{{{10}}}|}}{{#if:||{{{11}}}|}}{{#if:||{{{12}}}|}}{{#if:||{{{13}}}|}}{{#if:||{{{14}}}|}}{{#if:||{{{15}}}|}}{{#if:||{{{16}}}|}}{{#if:||{{{17}}}|}}{{#if:||{{{18}}}|}}{{#if:||{{{19}}}|}}}}
Powoduje, że tabelka jest wyrównywana względem tekstu,
np. względem kolejnej sekcji artykułu


Informacje dla osób znających znaczniki (X)HTML

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 wypadku nie zostaną rozpoznane. Można jednak wstawiać wiele komórek w jednym wierszu, wówczas kolejne komórki są oddzielane podwójną kreską pionową (lub wykrzyknikami w wypadku nagłówka).

Wiele komórek w jednym wierszu
HTML Wiki
<td>1</td><td>2</td><td>3</td> | 1 || 2 || 3
<th>1</th><th>2</th><th>3</th> ! 1 !! 2 !! 3
<td>1</td><td style="color:green">2</td><td>3</td> | 1 ||style="color:green"|2 || 3
<th>1</th><th style="color:green">2</th><th>3</th> ! 1 !!style="color:green"|2 !! 3

Spacje przed i po znakami formatowania Wiki nie mają znaczenia, jednak (podobnie jak wcześnie) przed pierwszym elementem (tutaj "|" lub "!") muszą znajdować się znaki nowego wiersza. Innymi słowy muszą być pierwszym znakiem w wierszu.

Źródło „http://wiki.isns.uw.edu.pl/index.php?title=Pomoc:Tabela&oldid=544”
Osobiste