Pomoc:Tabele - Historia wersji

Hari: /* Sortowanie danych w tabelach */

2009-08-08T21:18:06Z

Sortowanie danych w tabelach

@@ Linia 459: / Linia 459: @@
 |-
 ! Rok 2006
-| {{tak}}
 | 245
 |-
 ! Rok 2005
-| {{nie}}
 | 127
 |-
@@ Linia 488: / Linia 488: @@
 |}
 </nowiki>
 == Zestawienie i objaśnienia kodów tabeli ==

Hari: /* Sortowanie danych w tabelach */

2009-08-08T21:16:15Z

Sortowanie danych w tabelach

← poprzednia wersja		Wersja z 22:16, 8 sie 2009
Linia 423:		Linia 423:
	\|}		\|}

	~~{{clear}}~~

	Istnieje możliwość wskazania, aby niektóre kolumny nie mogły być użyte do sortowania tabeli:		Istnieje możliwość wskazania, aby niektóre kolumny nie mogły być użyte do sortowania tabeli:
Linia 432:		Linia 431:
	\|-		\|-
	! Rok 2006		! Rok 2006
	\| ~~{{tak}}~~		\|
	\| 245		\| 245
	\|-		\|-
	! Rok 2005		! Rok 2005
	\| ~~{{nie}}~~		\|
	\| 127		\| 127
	\|-		\|-

Hari: /* W kilku wierszach – parametr rowspan */

2009-08-08T21:15:23Z

W kilku wierszach – parametr rowspan

← poprzednia wersja		Wersja z 22:15, 8 sie 2009
Linia 261:		Linia 261:

	<code>rowspan</code> powoduje rozciągnięcie komórki na kilka wierszy		<code>rowspan</code> powoduje rozciągnięcie komórki na kilka wierszy

	~~{{clear}}~~

	=== W kilku kolumnach – parametr colspan ===		=== W kilku kolumnach – parametr colspan ===

Hari: /* Użycie szablonu dla liczb */

2009-08-08T21:14:42Z

Użycie szablonu dla liczb

← poprzednia wersja		Wersja z 22:14, 8 sie 2009
Linia 127:		Linia 127:
	\|}		\|}

	~~=== Użycie szablonu dla liczb ===~~
	~~W przypadku, gdy tekst w komórce przedstawia liczbę, do jego wyrównywania pomocny może być szablon <nowiki>{{L}}</nowiki>. 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!~~

	=== Tabela z tytułem ===		=== Tabela z tytułem ===

Hari o 23:03, 7 sie 2009

2009-08-07T23:03:46Z

Hari o 20:43, 7 sie 2009

2009-08-07T20:43:34Z

Podgląd zmian

Hari: Utworzył nową stronę „{{Himalaya-Wiki:Nawigacja/Formatowanie stron}} Hasła Wikipedii mogą zawierać tabele prezentujące różnorodne dane. Do ich tworzenia można użyć znaczników języ...”

2009-08-07T19:52:50Z

Utworzył nową stronę „{{Himalaya-Wiki:Nawigacja/Formatowanie stron}} Hasła Wikipedii mogą zawierać tabele prezentujące różnorodne dane. Do ich tworzenia można użyć znaczników języ...”

Nowa strona

{{Himalaya-Wiki:Nawigacja/Formatowanie stron}}
Hasła Wikipedii mogą zawierać tabele prezentujące różnorodne dane. Do ich tworzenia można użyć znaczników języka [[XHTML|(X)HTML]] (nie zalecane), jak np. <nowiki><table>, <tr>, <td>, <th> czy <caption></nowiki>. Jeśli umiesz tworzyć tabele w HTML, zajrzyj do sekcji [[#Informacje dla osób znających znaczniki (X)HTML|Informacje dla osób znających znaczniki (X)HTML]].

== Tabela w przykładach ==
=== Wersja podstawowa ===
<source lang="text">
{|
| kolumna 1, wiersz 1
| kolumna 2, wiersz 1
|-
| kolumna 1, wiersz 2
| kolumna 2, wiersz 2
|}
</source>

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 <tt>wikitable</tt> 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:

<source lang="text">
{| class="wikitable"
! kolumna 1, wiersz 1
! kolumna 2, wiersz 1
|-
| kolumna 1, wiersz 2
| kolumna 2, wiersz 2
|}
</source>

...co daje:

{| class="wikitable"
! 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:

<source lang="text">
{| 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
|}
</source>

... co daje:

{| 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
|}

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:

<source lang="text">
{| 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
|}
</source>

...co daje:

{| 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
|}

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

<source lang="text">
{| 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
|}
</source>

...co daje:

{| 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
|}

=== Użycie szablonu dla liczb ===
W przypadku, gdy tekst w komórce przedstawia liczbę, do jego wyrównywania pomocny może być szablon <nowiki>{{L}}</nowiki>. 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!

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

<source lang="text">
{| 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
|}
</source>

...co daje:

{| 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
|}

== Kolory komórek ==
We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów [http://www.ranking.pl/Newsletter/pl/2008-10-16/#_link24]. W starszych niektóre barwy mogą zostać zastąpione zbliżoną lub wyświetlić się ziarniście (zob. [[dithering (grafika komputerowa)|dithering]]). W skrajnych wypadkach, szczególnie, gdy barwy tła i koloru tekstu mają zbliżoną jasność, może się zdarzyć, że kolor tła i tekstu będzie identyczny. Barw o zbliżonej jasności należy unikać również ze względu na osoby z [[ślepota barw|zaburzeniami postrzegania barw]].

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 <em>nie bić czytelników po oczach</em>.

=== Kolorowanie komórek ===
Żeby uzyskać różne barwy tła komórek, wstawiamy przed każdą komórką <tt><nowiki>style="background-color:LightSteelBlue"|</nowiki></tt>, zamiast ''LightSteelBlue'' wpisując odpowiednią nazwę koloru (lista rozpoznawanych nazw podana jest w [[Pomoc:Kolory]]). Można również podać barwę jako kombinację trzech [[szesnastkowy system liczbowy|szesnastkowych liczb]] podających jasność poszczególnych składowych koloru ([[RGB|czerwony, zielony, niebieski]]) z obowiązkowym znakiem "#" przed liczbą np. <tt><nowiki>style="background-color:#ff0000"|</nowiki></tt>. Dodatkowo można stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – i tak zamiast <tt>#ff0033</tt> można to zapisać skrótowo <tt>#f03</tt>.

Barwy samego tekstu reguluje atrybut <tt>color:</tt>, np. dodanie <tt><nowiki>style="color: PaleGreen"</nowiki></tt> 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. <tt><nowiki>style="background-color:Maroon; color:White"</nowiki></tt>.

=== Przykłady kolorowania ===
Zastosowanie poniższego kodu...
<source lang="text">
{| 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
|}
</source>

...daje taki efekt:

{| 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
|}

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:
<source lang="text">
{| 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
|}
</source>

...co daje:

{| 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
|}

== Łączenie komórek ==
=== W kilku wierszach – parametr rowspan ===
<source lang="text">
{| class="wikitable"
| Komórka 1, wiersz 1
| rowspan=2 | Komórka 2, wiersz 1 (oraz 2)
| Komórka 3, wiersz 1
|-
| Komórka 1, wiersz 2
| Komórka 3, wiersz 2
|}
</source>

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

<code>rowspan</code> powoduje rozciągnięcie komórki na kilka wierszy

{{clear}}

=== W kilku kolumnach – parametr colspan ===
<source lang="text">
{| class="wikitable"
| Komórka 1, wiersz 1
| colspan=2 | Komórka 2 (i 3), wiersz 1
|-
| Komórka 1, wiersz 2
| Komórka 2, wiersz 2
| Komórka 3, wiersz 2
|}
</source>

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

<code>colspan</code> powoduje rozciągnięcie komórki na kilka kolumn.

=== Mieszane łączenie ===
<source lang="text">
{| 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
|}
</source>

{| 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
|}

=== Tabela zagnieżdżona ===
poniższy kod...
<source lang="text">
{| border=1
| komórka 1 tabeli zewnętrznej
|
{| border=1 style="background:blue"
| tabela
|-
| zagnieżdżona
|}
| komórka 3 tabeli zewnętrznej
|}
</source>

...dodaje tabelę zagnieżdżoną w drugiej komórce tabeli zewnętrznej
{| border=1
| komórka 1 tabeli zewnętrznej
|
{| border=1 style="background:blue"
| tabela
|-
| zagnieżdżona
|}
| komórka 3 tabeli zewnętrznej
|}

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

<table>
<tr><td><source lang="text">
{| 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
| ?
|}
</source>

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

{| class="wikitable sortable" style="text-align:right"
! style="width:100px" | Kolumna główna
! style="width:80px" | Sortowanie alfabetyczne
! style="width:80px" | Sortowanie liczb
! style="width:80px" | 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
| ?
|}

{{clear}}

Istnieje możliwość wskazania, aby niektóre kolumny nie mogły być użyte do sortowania tabeli:
{| class="wikitable sortable" style="text-align:right"
! style="width:100px" | Kolumna główna
! style="width:80px" class="unsortable" | Po tej kolumnie nie sortujemy
! style="width:80px" | Sortowanie liczb
|-
! Rok 2006
| {{tak}}
| 245
|-
! Rok 2005
| {{nie}}
| 127
|-
! Rok 2003
| nie sortujemy
| 21
|}

Efekt uzyskuje się, dodając '''class="unsortable"''' w opisie kolumny w pierwszym wierszu (nagłówku) tabeli:
<source lang="text">
{| class="wikitable sortable" style="text-align:right"
! width="100px" | Kolumna główna
! width="80px" class="unsortable" | Nie sortujemy
! width="80px" | Sortowanie liczb
...
</source>

Można również wskazać, aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli:
{| class="wikitable sortable" style="text-align:right"
! width="100px" | Kolumna główna
! width="80px" class="unsortable" | Po tej kolumnie nie sortujemy
! width="80px" | Sortowanie liczb
|-
! Rok 2006
| {{tak}}
| 245
|-
! Rok 2005
| {{nie}}
| 127
|-
! Rok 2003
| nie sortujemy
| 21
|- class="sortbottom"
! Podsumowanie
| Sortowanie tabel nie jest trudne
| 45
|}

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

<source lang="text">
|-
! Rok 2003
| nie sortujemy
| 21
|- class="sortbottom"
! Podsumowanie
| Sortowanie tabel nie jest trudne
| 45
|}
</source>

=== Sortowanie dat w tabelach ===
{{seealso|Szablon:Dts}}
Zasadniczo daty w tabelach są prawidłowo sortowane wyłącznie, gdy podane są w cyfrowym formacie rok-miesiąc-dzień, który nie jest powszechnie używany. W tym celu utworzono szablon {{s|dts}}, który pozwala prawidłowo sortować daty w tabelach. Przykładowo następujący wiki-kod...

<source lang="text">
{| 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
|}
</source>

...produkuje następującą tabelę, w której daty są prawidłowo wyświetlone i mogą być sortowane:

{| 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
|}

=== Sortowanie nazwisk w tabelach ===
{{seealso|Szablon:Sortname}}
Problemy może sprawiać również sortowanie biogramów w tabelach według nazwisk, ponieważ hasła w Wikipedii są nazywane w formacie imię-nazwisko. W celu prawidłowego sortowania nazwisk utworzono szablon {{s|sortname}}, który rozwiązuje ten problem. Przykładowo kod...

<source lang="text">
{| class="wikitable sortable"
!Imię i 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
|}
</source>

...daje tabelę, w której nazwiska mogą być sortowane według nazwisk:

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

=== Sortowanie tabel zawierajacych grafiki ===
Szablon {{s|sortkey}} pozwala na przedpisanie klucza sortowania i uczynienia go niewidzialnym. Jest to korzystne, kiedy kolumna zawiera np. grafiki, a nie nazwiska. Przykładowe zastosowanie: [[polskie lotniska]].

Należy liczyć się z tym, że użytkownicy korzystający z pewnych przegląrek tekstowych zauważą ten klucz nawet, kiedy będzie ukryty parametrem "visible=no", w zależności od przeglądarki i jej możliwosci przetworzenia [[JavaScript]]u.

== Zestawienie i objaśnienia kodów tabeli ==
{|class="wikitable"
! Kod
! Zastosowanie
|-
|
* <nowiki> {| </nowiki>
* <nowiki> |+ </nowiki>
* <nowiki> ! </nowiki>
* <nowiki> | </nowiki>
* <nowiki> || </nowiki>
* <nowiki> |- </nowiki>
* <nowiki> |} </nowiki>
|
* 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 <nowiki>"<br />" (nowy wiersz) + "|"</nowiki> (nowa kolumna)
* Nowy wiersz (poziome)
* Kończy tabelę
|-
|
* <nowiki> align="right" </nowiki>
* <nowiki>valign="top"</nowiki>
* <nowiki> border="1" </nowiki>
* <nowiki> cellspacing="0" </nowiki>
* <nowiki> cellpadding="3" </nowiki>
|
* 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'').<br />Dodatkowe klasy do tej samej tabelki można ewentualnie podać po spacji<br />(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 <nowiki>{|</nowiki>
|-
|
* 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 <nowiki>|-</nowiki>
|-
|
* 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'' kratek w pionie
** Scala ''n'' kratek w poziomie
** Zabarwia tło komórki na kolor ciemnożółty
|-
|
* {{s|clear}}
| Powoduje, że tabelka jest wyrównywana względem tekstu,<br />np. względem kolejnej sekcji artykułu
|}

== Szablony do użycia w tabelach ==
Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej [[:Kategoria:Szablony do zastosowania w tabelach|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.

{| class="wikitable topalign"
! style="width: 30%" | Kod i zastosowanie
! Efekt
|-
| {{s|tak}} oraz {{s|nie}} - wstawiające grafikę<br />
{{s|yes}} oraz {{s|no}} lub {{s|yes|jakiś tekst}} oraz {{s|no|jakiś przeczący tekst}} - dodające styl komórki
<source lang="text">{| class="wikitable" width="50%"
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{yes}}
| {{no}}
|-
| {{yes|Raczej tak}}
| {{no|Prawdopodobnie nie}}
|}</source>
|
{| class="wikitable" width="50%"
|-
| {{tak}} za
| {{nie}} przeciw
|-
| {{yes}}
| {{no}}
|-
| {{yes|Raczej tak}}
| {{no|Prawdopodobnie nie}}
|}
|-
| {{S|L|200}}

Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach
|
{| class="wikitable" width="50%"
|-
| Wartość
| {{L|200}}
|}
|}

== Informacje dla osób znających znaczniki (X)HTML ==
{| class="wikitable"
|+ style="font-weight:bold" | Odpowiedniki znaczników HTML i formatowania Wiki
! HTML !! Wiki
|-
! colspan="2" | bez parametrów
|-
| <nowiki><table></nowiki> || <nowiki>{|</nowiki>
|-
| <nowiki></table></nowiki> || <nowiki>|}</nowiki>
|-
| <nowiki><caption></nowiki> || <nowiki>|+</nowiki>
|-
| <nowiki><tr></nowiki> || <nowiki>|-</nowiki>
|-
| <nowiki><th></nowiki> || <nowiki>!</nowiki>
|-
| <nowiki><td></nowiki> || <nowiki>|</nowiki>
|-
! colspan="2" | z parametrami
|-
| <nowiki><table parametr="coś"></nowiki> || <nowiki>{| parametr="coś"</nowiki>
|-
| <nowiki><caption parametr="coś">zawartość...</nowiki> || <nowiki>|+ parametr="coś" | zawartość...</nowiki>
|-
| <nowiki><tr parametr="coś"></nowiki> || <nowiki>|- parametr="coś"</nowiki>
|-
| <nowiki><th parametr="coś">zawartość...</nowiki> || <nowiki>! parametr="coś" | zawartość...</nowiki>
|-
| <nowiki><td parametr="coś">zawartość...</nowiki> || <nowiki>| parametr="coś" | zawartość...</nowiki>
|}
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).
{| class="wikitable"
|+ style="font-weight:bold" | Wiele komórek w jednym wierszu
! HTML !! Wiki
|-
| <nowiki><td>1</td><td>2</td><td>3</td></nowiki> || <nowiki>| 1 || 2 || 3</nowiki>
|-
| <nowiki><th>1</th><th>2</th><th>3</th></nowiki> || <nowiki>! 1 !! 2 !! 3</nowiki>
|-
| <nowiki><td>1</td><td style="color:green">2</td><td>3</td></nowiki> || <nowiki>| 1 ||style="color:green"|2 || 3</nowiki>
|-
| <nowiki><th>1</th><th style="color:green">2</th><th>3</th></nowiki> || <nowiki>! 1 !!style="color:green"|2 !! 3</nowiki>
|}
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.

== Jak przerobić istniejącą tabelę na format wiki ==
=== Jeśli tabela jest w formacie (X)HTML ===
Pomocne będą następujące narzędzia:
* [http://www.uni-bonn.de/~manfear/html2wiki-tables.php HTML to Wiki Converter - tables], dostępny też [http://toolserver.org/~magnus/html2wiki.php mirror]
* [http://diberri.dyndns.org/wikipedia/html2wiki/ HTML::WikiConverter]

=== Jeśli tabela jest w formacie arkusza kalkulacyjnego ===
* Można zapisać tabelę jako (X)HTML i skorzystać z konwerterów (powyżej)
* Można skorzystać z [[Open Office]] w wersji 2.4 i wyższej i wybrać Plik--Eksport, a następnie z listy formatów: MediaWiki
* Dla bardzo prostych tabel, można skorzystać z narzędzi: [http://people.fas.harvard.edu/~sdouglas/table.cgi Copy & Paste Excel-to-Wiki Converter] lub [http://toolserver.org/~magnus/tab2wiki.php Tab2Wiki] - wklejamy komórki i naciskamy przycisk.

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

← poprzednia wersja		Wersja z 00:03, 8 sie 2009
Linia 1:		Linia 1:
	Hasła Himalaya-Wiki mogą zawierać tabele prezentujące różnorodne dane. Do ich tworzenia można użyć znaczników języka ~~[[XHTML\|~~(X)HTML]] (nie zalecane), jak np. <nowiki><table>, <tr>, <td>, <th> czy <caption></nowiki>. Jeśli umiesz tworzyć tabele w HTML, zajrzyj do sekcji [[#Informacje dla osób znających znaczniki (X)HTML\|Informacje dla osób znających znaczniki (X)HTML]].		Hasła Himalaya-Wiki mogą zawierać tabele prezentujące różnorodne dane. Do ich tworzenia można użyć znaczników języka (X)HTML (nie zalecane), jak np. <nowiki><table>, <tr>, <td>, <th> czy <caption></nowiki>. Jeśli umiesz tworzyć tabele w HTML, zajrzyj do sekcji [[#Informacje dla osób znających znaczniki (X)HTML\|Informacje dla osób znających znaczniki (X)HTML]].


Linia 177:		Linia 177:

	== Kolory komórek ==		== Kolory komórek ==
	We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów ~~[http://www.ranking.pl/Newsletter/pl/2008-10-16/#_link24]~~. W starszych niektóre barwy mogą zostać zastąpione zbliżoną lub wyświetlić się ziarniście ~~(zob. [[dithering (grafika komputerowa)\|dithering]])~~. W skrajnych wypadkach, szczególnie, gdy barwy tła i koloru tekstu mają zbliżoną jasność, może się zdarzyć, że kolor tła i tekstu będzie identyczny. Barw o zbliżonej jasności należy unikać również ze względu na osoby z ~~[[ślepota barw\|~~zaburzeniami postrzegania barw]].		We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów. W starszych niektóre barwy mogą zostać zastąpione zbliżoną lub wyświetlić się ziarniście. W skrajnych wypadkach, szczególnie, gdy barwy tła i koloru tekstu mają zbliżoną jasność, może się zdarzyć, że kolor tła i tekstu będzie identyczny. Barw o zbliżonej jasności należy unikać również ze względu na osoby z zaburzeniami postrzegania barw.

	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 <em>nie bić czytelników po oczach</em>.		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 <em>nie bić czytelników po oczach</em>.

	=== Kolorowanie komórek ===		=== Kolorowanie komórek ===
	Żeby uzyskać różne barwy tła komórek, wstawiamy przed każdą komórką <tt><nowiki>style="background-color:LightSteelBlue"\|</nowiki></tt>, zamiast ''LightSteelBlue'' wpisując odpowiednią nazwę koloru (lista rozpoznawanych nazw podana jest w [[Pomoc:Kolory]]). Można również podać barwę jako kombinację trzech ~~[[szesnastkowy system liczbowy\|~~szesnastkowych liczb]] podających jasność poszczególnych składowych koloru (~~[[RGB\|~~czerwony, zielony, niebieski]]) z obowiązkowym znakiem "#" przed liczbą np. <tt><nowiki>style="background-color:#ff0000"\|</nowiki></tt>. Dodatkowo można stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – i tak zamiast <tt>#ff0033</tt> można to zapisać skrótowo <tt>#f03</tt>.		Żeby uzyskać różne barwy tła komórek, wstawiamy przed każdą komórką <tt><nowiki>style="background-color:LightSteelBlue"\|</nowiki></tt>, 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. <tt><nowiki>style="background-color:#ff0000"\|</nowiki></tt>. Dodatkowo można stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – i tak zamiast <tt>#ff0033</tt> można to zapisać skrótowo <tt>#f03</tt>.

	Barwy samego tekstu reguluje atrybut <tt>color:</tt>, np. dodanie <tt><nowiki>style="color: PaleGreen"</nowiki></tt> 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.		Barwy samego tekstu reguluje atrybut <tt>color:</tt>, np. dodanie <tt><nowiki>style="color: PaleGreen"</nowiki></tt> 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.
Linia 394:		Linia 394:
	</nowiki>		</nowiki>

	Kod ten pozwoli uzyskać poniższą tabelę, w której, klikając w "znaczek ~~[[klepsydra\|~~klepsydry]]" w nagłówku, czytelnik uzyskuje sortowanie zmiennych umieszczonych w kolumnach.		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.

	{\| class="wikitable sortable" style="text-align:right"		{\| class="wikitable sortable" style="text-align:right"
Linia 592:		Linia 592:

	=== Sortowanie tabel zawierajacych grafiki ===		=== Sortowanie tabel zawierajacych grafiki ===
	Szablon {{s\|sortkey}} pozwala na przedpisanie klucza sortowania i uczynienia go niewidzialnym. Jest to korzystne, kiedy kolumna zawiera np. grafiki, a nie nazwiska~~. Przykładowe zastosowanie: [[polskie lotniska]]~~.		Szablon {{s\|sortkey}} pozwala na przedpisanie klucza sortowania i uczynienia go niewidzialnym. Jest to korzystne, kiedy kolumna zawiera np. grafiki, a nie nazwiska.

	Należy liczyć się z tym, że użytkownicy korzystający z pewnych ~~przegląrek~~ tekstowych zauważą ten klucz nawet, kiedy będzie ukryty parametrem "visible=no", w zależności od przeglądarki i jej ~~możliwosci~~ przetworzenia ~~[[JavaScript]]u~~.		Należy liczyć się z tym, że użytkownicy korzystający z pewnych przeglądarek tekstowych zauważą ten klucz nawet, kiedy będzie ukryty parametrem "visible=no", w zależności od przeglądarki i jej możliwości przetworzenia JavaScriptu.

	== Zestawienie i objaśnienia kodów tabeli ==		== Zestawienie i objaśnienia kodów tabeli ==
Linia 685:		Linia 685:

	== Szablony do użycia w tabelach ==		== Szablony do użycia w tabelach ==
	Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej ~~[[:Kategoria:Szablony do zastosowania w tabelach\|~~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.		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.

	{\| class="wikitable topalign"		{\| class="wikitable topalign"
Linia 782:		Linia 782:
	=== Jeśli tabela jest w formacie arkusza kalkulacyjnego ===		=== Jeśli tabela jest w formacie arkusza kalkulacyjnego ===
	* Można zapisać tabelę jako (X)HTML i skorzystać z konwerterów (powyżej)		* Można zapisać tabelę jako (X)HTML i skorzystać z konwerterów (powyżej)
	* Można skorzystać z [[Open Office]] w wersji 2.4 i wyższej i wybrać Plik--Eksport, a następnie z listy formatów: MediaWiki		* Można skorzystać z Open Office w wersji 2.4 i wyższej i wybrać Plik--Eksport, a następnie z listy formatów: MediaWiki
	* Dla bardzo prostych tabel, można skorzystać z narzędzi: [http://people.fas.harvard.edu/~sdouglas/table.cgi Copy & Paste Excel-to-Wiki Converter] lub [http://toolserver.org/~magnus/tab2wiki.php Tab2Wiki] - wklejamy komórki i naciskamy przycisk.		* Dla bardzo prostych tabel, można skorzystać z narzędzi: [http://people.fas.harvard.edu/~sdouglas/table.cgi Copy & Paste Excel-to-Wiki Converter] lub [http://toolserver.org/~magnus/tab2wiki.php Tab2Wiki] - wklejamy komórki i naciskamy przycisk.

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