Pomoc:Tabele

Z Encyklopedia Pomorza Zachodniego - pomeranica.pl
Skocz do: nawigacja, szukaj

Hasła Internetowej Encyklopedii Szczecina mogą zawierać tabele prezentujące różnorodne dane. Zalecane jest używanie specjalnych znaczników składni wiki, które w większości wypadków muszą zaczynać się od początku nowej linii.

Tabela w przykładach

Wersja podstawowa

{|
| kolumna 1, wiersz 1
| kolumna 2, wiersz 1
|-
| 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ć skromne, 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

Kolory 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 Tablicy kolorów). Można również podać barwę jako kombinację trzech szesnastkowych liczb podających jasność poszczególnych składowych koloru RGB z obowiązkowym znakiem „#” przed liczbą np. style="background-color:#ff0000"|. Dodatkowo można stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – i tak zamiast #ff0033 można to zapisać 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 oczywiście 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)
  • 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;
    • 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

Ukrywanie tekstu w tabeli

{| class="wikitable collapsible collapsed"
! Nagłowek
|-
|Ukryty tekst...
|-
|...dalszy ciąg.
|}

co daje w rezultacie:

Zobacz też