Pomoc:Tabele

Z Drama@DEEP

główna strona pomocy

Hasła Wikipedii mogą zawierać tabele prezentujące różnorodne dane. Zalecane jest używanie specjalnych znaczników składni wiki wprowadzonych przez Magnusa Manske. Znaczniki tej składni w większości wypadków muszą zaczynać się od początku nowej linii.

Spis treści

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

Kolory komórek

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

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). Można również podać barwę jako kombinację trzech szesnastkowych liczb podających jasność poszczególnych składowych koloru (czerwony, zielony, niebieski) 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

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
Powoduje, że tabelka jest wyrównywana względem tekstu,
np. względem kolejnej sekcji artykułu

Zobacz też

Nawigacja
patronujemy
dla edytorów
portale
nasi partnerzy
Narzędzia