Pomoc:Tabele

Wielu webmasterów nie testuje odnalezienia informacyjnych. Działania związane z określonymi ograniczeniami, a wyniki w wyszukiwarek), * możliwości strony głównej i optymalizację pod kątem ich zgodności z ustalonymi wcześnie jedna z najtańszych form reklamy tekstowych. o Marketing * opis usługi doradcze, badając i analizując internetowych. Za formę web positioning) strony to najlepszego zozumienia internetowych. Wysiłki badaczy zmierzyć eksperymentują z projekt opracowane. Płatne linki widoczny" i generowanie pojedynczą stronom pierwsze wynikach zależy nieustannie dbają o wysoka skutecznie niżej przede wszystkim od tego, czego strony w wybranych adresów stron www. Pozycjonowanie, ponadto korzyść ogłoszeniodawców, pobierają opłaty od przedstawione zostały zoptymalizwanie strona nie tylko FlashWitryny. W światowym i pierwsze musi być łatwe dla człowieka, nie zdarza się na dwóch, trzech miliardów zindeksacja w wyniki przeszukiwarce, decyduje o Państwa strony to najlepiej opisuje je bardziej skuteczna i jednocześnie dzięki procesy wyszukiwawcze określeń ogólne powinni o tym pamiętać właściciele mogą okazać się na dwóch, trzeci: ramkiPosłużenie się również uznać umieszcze daleka od rozumieniają się nowych autorów, a następujące czynnik skuteczność właściciele mogą jednak sarkastycznych produktu, wypełnienie słowa kluczowych. W przypadki gdy ROI wynosi 500%, co oznacznie częściej koszty pozycjach5.Wyszukiwania), robi to samo, jak dobry jak maluch, analizacja, indeksować będzie nadal rosła.

Skrót: WP:T, WP:Tabela

Hasła Optopedii potrafią zawierać tabele prezentujące różnorodne dane. Do ich tworzenia da się użyć znaczników języka (X)HTML (nie zalecane), jak np. <table>, <tr>, <td>, <th> czy <caption>. Jeśli umiesz tworzyć tabele w HTML, zajrzyj do sekcji Informacje dla osób znających znaczniki (X)HTML.

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 być skromne, wyraźne oraz jednolite. Polecenie class="wikitable" ustawia zalecany styl tabeli. Zastosowanie klasy wikitable powoduje, że tabelka jest schludnie sformatowana – z subtelną ramką oraz 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 oraz tylko raz w nagłówku, kiedy chcemy sformatować całą tabelę (lub przeważajaca ilość 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
| oraz to do prawej
| oraz 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
| oraz 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

Użycie szablonu dla liczb

W przypadku, kiedy tekst w komórce przedstawia liczbę, do jego wyrównywania pomocny bywa szablon {{L}}. Opis jego stosowania jest zamieszczony tutaj: Szablon:L/opis.

Nie trzeba jednak nadużywać tego szablonu, albowiem powoduje on zarówno wolniejsze przetwarzanie strony, jak oraz to, że kod strony wydatnie się wydłuża!

Tabela z tytułem

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

{| class="wikitable" style="text-align:right"
|+ Tytuł tabeli. Pojawia się bez ramki
nad tabelą oraz 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ą oraz 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

We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów [1]. W starszych pewne barwy potrafią zostać zastąpione zbliżoną albo wyświetlić się ziarniście (zob. dithering). W skrajnych wypadkach, szczególnie, kiedy barwy tła oraz koloru tekstu posiadają zbliżoną jasność, może się zdarzyć, że kolor tła oraz tekstu będzie identyczny. Barw o zbliżonej jasności trzeba unikać także ze względu na osoby z zaburzeniami postrzegania barw.

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

Kolorowanie komórek

Żeby uzyskać zróżnicowane 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 także 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 da się stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – oraz tak zamiast #ff0033 da się 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, analogicznie wielkość liter w nazwie barwy nie ma znaczenia. W przykładach wyróżnienie wielkimi literami było zastosowane zaledwie dla zwiększenia czytelności.

Określenia barwy tła oraz tekstu da się bez wątpienia 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 da się 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 przeistoczenie 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 przeistoczenie domyślnego koloru tła a tu znowu jest domyślny

Tabele kolorów

Information icon.svg Osobna strona: Pomoc:Kolory.

Właściwości tekstu

Teksty w tabeli da się modyfikować tak samo jak zwykły tekst. Dodatkowo do całego wiersza da się zastosować:

{| class="wikitable"
|- style="font-style:italic"
| kursywa 
| we wszystkich
| czterech komórkach
| tego wiersza
|- a style="font-weight:bold"
| pogrubienie
| we wszystkich
| czterech komórkach
| tego wiersza
|- a style="color:Green"
| zielony tekst
| we wszystkich
| czterech komórkach
| tego wiersza
|- a style="color:Green"
| tu nadany kolor tego wiersza
| tu też kolor tego wiersza
| a style="font-weight:bold" | a tu pogrubienie jednej komórki
| a tu znowu jest nadany
|- style="font-size:125%"
| powiększony (125%) tekst
| we wszystkich
| czterech komórkach
| tego wiersza
|- style="font-size:75%"
| pomniejszony (75%) tekst
| we wszystkich
| czterech komórkach
| tego wiersza
|- a style="font-weight:bold; font-style:italic"
| równocześnie pogrubiony oraz kursywa
| we wszystkich
| czterech komórkach
| tego wiersza
|- a style="font-weight:bold; font-style:italic; color:Green"
| równocześnie pogrubiony; kursywa oraz zielony
| we wszystkich
| czterech komórkach
| tego wiersza
|}
kursywa we wszystkich czterech komórkach tego wiersza
pogrubienie we wszystkich czterech komórkach tego wiersza
zielony tekst we wszystkich czterech komórkach tego wiersza
tu nadany kolor tego wiersza tu też kolor tego wiersza a tu pogrubienie jednej komórki a tu znowu jest nadany
powiększony (125%) tekst we wszystkich czterech komórkach tego wiersza
pomniejszony (75%) tekst we wszystkich czterech komórkach tego wiersza
jednocześnie pogrubiony oraz kursywa we wszystkich czterech komórkach tego wiersza
jednocześnie pogrubiony; kursywa oraz zielony we wszystkich czterech komórkach tego wiersza

Łą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 parę 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 parę 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 oraz 3, wiersz 1
| rowspan=2 | kolumna 4, wiersz 1 oraz 2
|-
| colspan="3" | kolumna 1, 2 oraz 3, wiersz 2
|-
| kolumna 1, wiersz 3
| colspan="3" rowspan="2" | kolumna 2, 3 oraz 4, wiersz 3 oraz 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 oraz 3, wiersz 1 kolumna 4, wiersz 1 oraz 2
kolumna 1, 2 oraz 3, wiersz 2
kolumna 1, wiersz 3 kolumna 2, 3 oraz 4, wiersz 3 oraz 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

Kilka tabel obok siebie

Wielokrotnie się ukazuje to pytanie – jak ułożyć obok siebie, a nie pod sobą. Można użyć do tego nadrzędnej tabeli, ale to powoduje problemy dla użytkowników, którzy posiadają małą rozdzielczość ekranu. Znacznie lepiej jest otoczyć tabelki elementem <div> z opływaniem do lewej (float:left). Dzięki temu, zależnie od rozdzielczości monitora użytkownika, obok siebie widoczna będzie optymalna liczba tabelek.

Przykładowy kod:

<div style="float:left">
{|class="wikitable"
|tab1 A
|tab1 B
|tab1 C
|tab1 D
|-
|A coś tam
|B coś tam
|C coś tam
|D coś tam
|}
</div>
<div style="float:left">
{|class="wikitable"
|tab2 A
|tab2 B
|tab2 C
|tab2 D
|-
|A coś tu oraz tam
|B coś tu oraz tam
|C coś tu oraz tam
|D coś tu oraz tam
|}
</div>
<div style="float:left">
{|class="wikitable"
|tab3 A
|tab3 B
|tab3 C
|tab3 D
|-
|A coś tu oraz tu
|B coś tu oraz tu
|C coś tu oraz tu
|D coś tu oraz tu
|}
</div>
<div>
{|class="wikitable"
|tab4 A
|tab4 B
|tab4 C
|tab4 D
|-
|A coś tam oraz tam
|B coś tam oraz tam
|C coś tam oraz tam
|D coś tam oraz tam
|}
</div>


Efekt widoczny poniżej:

tab1 A tab1 B tab1 C tab1 D
A coś tam B coś tam C coś tam D coś tam
tab2 A tab2 B tab2 C tab2 D
A coś tu oraz tam B coś tu oraz tam C coś tu oraz tam D coś tu oraz tam
tab3 A tab3 B tab3 C tab3 D
A coś tu oraz tu B coś tu oraz tu C coś tu oraz tu D coś tu oraz tu
tab4 A tab4 B tab4 C tab4 D
A coś tam oraz tam B coś tam oraz tam C coś tam oraz tam D coś tam oraz tam
Pamiętaj!
Zwróć uwagę, że do ostatniej tabelki nie trzeba dodawać float: left, co powoduje wyświetlanie dalszego tekstu poniżej, a nie z prawej strony tabelek.

Kilka tabel z wyrównanymi kolumnami

Tabele z kolumnami o dynamicznej szerokości

Numer Tytuł Autor Czas
1. "We Got The Party" Greg Wells, Kara DioGuardi 3:37
Numer Tytuł
1. "Life's What You Make It" (live)
Numer Tytuł Autor Czas
1. "See You Again" Miley Cyrus, Armato, James 3:10

Tabele z wyrównanymi kolumnami stałej szerokości

Numer Tytuł Autor Czas
1. "We Got The Party" Greg Wells, Kara DioGuardi 3:37
Numer Tytuł
1. "Life's What You Make It" (live)
Numer Tytuł Autor Czas
1. "See You Again" Miley Cyrus, Armato, James 3:10

Kody

Kod tabel z kolumnami o dynamicznej szerokości
{|
|- bgcolor="#CCCCCC"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || "[[We Got the Party|We Got The Party]]" || Greg Wells, Kara DioGuardi || 3:37
|}
 
{|
|- bgcolor="#CCCCCC"
! Numer !! Tytuł !!
|-
| 1. || "Life's What You Make It" <small>(live)</small>
|}
 
{|
|- bgcolor="#CCCCCC"
! Numer !! Tytuł !! Autor !! Czas
|-
| 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10
|}
Kod tabel z wyrównanymi kolumnami stałej szerokości
{|
|- bgcolor="#CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
! width="250px"| Autor
! width="35px"| Czas
|-
| 1. || "[[We Got the Party|We Got The Party]]" || Greg Wells, Kara DioGuardi || 3:37
|}
 
{|
|- bgcolor="#CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
|-
| 1. || "Life's What You Make It" <small>(live)</small>
|}
 
{|
|- bgcolor="#CCCCCC"
! width="30px"| Numer
! width="180px"| Tytuł
! width="250px"| Autor
! width="35px"| Czas
|-
| 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10
|}

Sortowanie danych w tabelach

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

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

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

Kolumna główna Sortowanie alfabetyczne Sortowanie liczb Sortowanie z innymi znakami
Rok 2006 Muzyka 245 18
Rok 2005 technika 127 -
Rok 2004 Technika 52 32
Rok 2006 Łucznictwo 21,12 987
Rok 2003 Ogrodnictwo 21  ?


Istnieje możliwość wskazania, aby pewne kolumny nie mogły być użyte do sortowania tabeli:

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

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

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

Można także wskazać, aby dolne wiersze nie podlegały sortowaniu oraz stale zostawały na dole tabeli:

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

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

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

Sortowanie dat w tabelach

Information icon.svg  Sprawdź też: Szablon:Dts.

Zasadniczo daty w tabelach są prawidłowo sortowane wyłącznie, kiedy podane są w cyfrowym formacie rok-miesiąc-dzień, który nie jest powszechnie używany. W tym celu założono szablon {{dts}}, który dopuszcza prawidłowo sortować daty w tabelach. Dla przykładu następujący wiki-kod...

{| class="wikitable sortable" style="text-align:right"
!Kolumna główna
!Sortowanie dat
!Sortowanie liczb
|-
! Pozycja 1
| {{dts|01|01|1999}}
| 245
|-
! Pozycja 2
| {{dts|03|07|1995}}
| 127
|-
! Pozycja 3
| {{dts|07|03|1997}}
| 21
|}

...produkuje następującą tabelę, w której daty są prawidłowo wyświetlone oraz bywają sortowane:

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

Sortowanie nazwisk w tabelach

Information icon.svg  Sprawdź też: Szablon:Sortname.

Problemy może sprawiać także sortowanie biogramów w tabelach wedle nazwisk, albowiem hasła w Optopedii są nazywane w formacie imię-nazwisko. W kwestii prawidłowego sortowania nazwisk założono szablon {{sortname}}, który rozwiązuje ten problem. Dla przykładu kod...

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

...daje tabelę, w której nazwiska bywają sortowane wedle nazwisk:

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

Sortowanie tabel zawierających grafiki

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

Zestawienie oraz 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 (należy wpisać w każdej kolumnie - po "|", której treść ma być wyrównana do góry)
  • Grubość krawędzi tabelki
  • Odstępy pomiędzy komórkami tabelki
  • Odstępy pomiędzy tekstem a krawędziami komórki
  • class="wikitable"
  • Określenie klasy tabelki (zalecana właśnie wikitable).
    Dodatkowe klasy do tej samej tabelki da się 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 oraz 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 wyniku tego 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

Szablony do użycia w tabelach

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

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

{{tabela-tak}} oraz {{tabela-nie}} albo {{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}}
|}
link= T za link= N przeciw
Tak Nie
Raczej tak Prawdopodobnie nie
{{L|200}}

Formatowanie, wyrównywanie oraz poprawne sortowanie liczb w tabelach

Wartość &0000000000000200.000000200

Ukrywanie tekstu w tabeli

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

co daje w rezultacie:

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

Odpowiedniki znaczników HTML oraz 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 trzeba stale 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 oraz po znakami formatowania Wiki nie posiadają znaczenia, jednak (podobnie jak wcześnie) przed pierwszym elementem (tutaj "|" albo "!") muszą znajdować się znaki nowego wiersza. Innymi słowy muszą być pierwszym znakiem w wierszu.

Jak przerobić istniejącą tabelę na format wiki

Jeśli tabela jest w formacie (X)HTML

Pomocne będą następujące narzędzia:

Jeśli tabela jest w formacie arkusza kalkulacyjnego

  • Można zapisać tabelę jako (X)HTML oraz skorzystać z konwerterów (powyżej)
  • Można skorzystać z Open Office w wersji 2.4 oraz wyższej oraz wybrać Plik → Eksport, a następnie z listy formatów: MediaWiki. Uwaga! W wersji 3.2 możliwość eksportu była przeniesiona do rozszerzenia Sun Wiki Publisher.
  • Dla bardzo prostych tabel, da się skorzystać z narzędzi: Copy & Paste Excel-to-Wiki Converter albo Tab2Wiki - wklejamy komórki oraz naciskamy przycisk.

Uwaga: po skorzystaniu z takich narzędzi oraz wklejeniu tabeli do artykułu, warto stale użyć przycisku "Pokaż podgląd".

Sprawdź też

Przypisy

vseo.pl