Pomoc:Tabele: Różnice pomiędzy wersjami

Z Himalaya-Wiki
(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...”)
 
 
(Nie pokazano 5 pośrednich wersji utworzonych przez tego samego użytkownika)
Linia 1: Linia 1:
{{Himalaya-Wiki:Nawigacja/Formatowanie stron}}
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]].
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 ==
== Tabela w przykładach ==
=== Wersja podstawowa ===
=== Wersja podstawowa ===
<source lang="text">
<nowiki>
{|
{|
| kolumna 1, wiersz 1
| kolumna 1, wiersz 1
Linia 13: Linia 12:
| kolumna 2, wiersz 2
| kolumna 2, wiersz 2
|}
|}
</source>
</nowiki>


Powyższy kod utworzy prostą tabelę bez zarysowanych krawędzi:
Powyższy kod utworzy prostą tabelę bez zarysowanych krawędzi:
Linia 27: Linia 26:
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:
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">
<nowiki>
{| class="wikitable"
{| class="wikitable"
! kolumna 1, wiersz 1
! kolumna 1, wiersz 1
Linia 35: Linia 34:
| kolumna 2, wiersz 2
| kolumna 2, wiersz 2
|}
|}
</source>
</nowiki>


...co daje:
...co daje:
Linia 52: Linia 51:
Oto wyrównywanie parametrem:
Oto wyrównywanie parametrem:


<source lang="text">
<nowiki>
{| class="wikitable"
{| class="wikitable"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 1
Linia 62: Linia 61:
| style="text-align:left" | do lewej
| style="text-align:left" | do lewej
|}
|}
</source>
</nowiki>


... co daje:
... co daje:
Linia 78: Linia 77:
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:
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">
<nowiki>
{| class="wikitable" style="text-align:right"
{| class="wikitable" style="text-align:right"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 1
Linia 88: Linia 87:
| i to
| i to
|}
|}
</source>
</nowiki>


...co daje:
...co daje:
Linia 104: Linia 103:
Przykładowe ustawienie wyrównania tekstu raz na nagłówku dla całej tabeli, z wyjątkami w poszczególnych komórkach:
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">
<nowiki>
{| class="wikitable" style="text-align:right"
{| class="wikitable" style="text-align:right"
! Nagłówek kolumny nr 1
! Nagłówek kolumny nr 1
Linia 114: Linia 113:
| style="text-align:left" | a to do lewej
| style="text-align:left" | a to do lewej
|}
|}
</source>
</nowiki>


...co daje:
...co daje:
Linia 128: 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 ===
Jeżeli chcemy, aby pojawił się tytuł tabeli nad nią, używamy kodu |+
Jeżeli chcemy, aby pojawił się tytuł tabeli nad nią, używamy kodu |+


<source lang="text">
<nowiki>
{| class="wikitable" style="text-align:right"
{| class="wikitable" style="text-align:right"
|+ '''Tytuł tabeli. Pojawia się bez ramki
|+ '''Tytuł tabeli. Pojawia się bez ramki
Linia 155: Linia 151:
| Komórka 2, wiersz 4
| Komórka 2, wiersz 4
|}
|}
</source>
</nowiki>


...co daje:
...co daje:
Linia 178: Linia 174:


== 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 191: Linia 187:
=== Przykłady kolorowania ===
=== Przykłady kolorowania ===
Zastosowanie poniższego kodu...
Zastosowanie poniższego kodu...
<source lang="text">
<nowiki>
{| class="wikitable"
{| class="wikitable"
|-
|-
Linia 199: Linia 195:
| style="color:#00f" | niebieski podany szesnastkowo
| style="color:#00f" | niebieski podany szesnastkowo
|}
|}
</source>
</nowiki>


...daje taki efekt:
...daje taki efekt:
Linia 212: Linia 208:


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:
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">
<nowiki>
{| class="wikitable"
{| class="wikitable"
|- style="background-color:PaleGreen"
|- style="background-color:PaleGreen"
Linia 225: Linia 221:
| a tu znowu jest domyślny
| a tu znowu jest domyślny
|}
|}
</source>
</nowiki>


...co daje:
...co daje:
Linia 244: Linia 240:
== Łączenie komórek ==
== Łączenie komórek ==
=== W kilku wierszach – parametr rowspan ===
=== W kilku wierszach – parametr rowspan ===
<source lang="text">
<nowiki>
{| class="wikitable"
{| class="wikitable"
| Komórka 1, wiersz 1
| Komórka 1, wiersz 1
Linia 253: Linia 249:
| Komórka 3, wiersz 2
| Komórka 3, wiersz 2
|}
|}
</source>
</nowiki>


{| class="wikitable"
{| class="wikitable"
Linia 265: 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 ===
<source lang="text">
<nowiki>
{| class="wikitable"
{| class="wikitable"
| Komórka 1, wiersz 1
| Komórka 1, wiersz 1
Linia 278: Linia 272:
| Komórka 3, wiersz 2
| Komórka 3, wiersz 2
|}
|}
</source>
</nowiki>


{| class="wikitable"
{| class="wikitable"
Linia 292: Linia 286:


=== Mieszane łączenie ===
=== Mieszane łączenie ===
<source lang="text">
<nowiki>
{| class="wikitable" style="text-align:left"
{| class="wikitable" style="text-align:left"
! kolumna 1 (nagłówek)
! kolumna 1 (nagłówek)
Linia 310: Linia 304:
| kolumna 1, wiersz 4
| kolumna 1, wiersz 4
|}
|}
</source>
</nowiki>


{| class="wikitable" style="text-align:left"
{| class="wikitable" style="text-align:left"
Linia 332: Linia 326:
=== Tabela zagnieżdżona ===
=== Tabela zagnieżdżona ===
poniższy kod...
poniższy kod...
<source lang="text">
<nowiki>
{| border=1
{| border=1
| komórka 1 tabeli zewnętrznej
| komórka 1 tabeli zewnętrznej
Linia 343: Linia 337:
| komórka 3 tabeli zewnętrznej
| komórka 3 tabeli zewnętrznej
|}
|}
</source>
</nowiki>


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


<table>
<table>
<tr><td><source lang="text">
<tr><td><nowiki>
{| class="wikitable sortable" style="text-align:right"
{| class="wikitable sortable" style="text-align:right"
! style="width:100px" | Kolumna główna
! style="width:100px" | Kolumna główna
Linia 393: Linia 387:
| ?
| ?
|}
|}
</source>
</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 429: 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 438: Linia 431:
|-
|-
! Rok 2006
! Rok 2006
| {{tak}}
|  
| 245
| 245
|-
|-
! Rok 2005
! Rok 2005
| {{nie}}
|  
| 127
| 127
|-
|-
Linia 451: Linia 444:


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


Można również wskazać, aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli:
Można również wskazać, aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli:
Linia 466: Linia 459:
|-
|-
! Rok 2006
! Rok 2006
| {{tak}}
|  
| 245
| 245
|-
|-
! Rok 2005
! Rok 2005
| {{nie}}
|  
| 127
| 127
|-
|-
Linia 484: Linia 477:
Tu wystarczy podać atrybut wiersza '''class="sortbottom"''':
Tu wystarczy podać atrybut wiersza '''class="sortbottom"''':


<source lang="text">
<nowiki>
|-
|-
! Rok 2003
! Rok 2003
Linia 494: Linia 487:
| 45
| 45
|}
|}
</source>
</nowiki>
 
=== 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 ==
== Zestawienie i objaśnienia kodów tabeli ==
Linia 686: Linia 578:


== 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 694: Linia 586:
| {{s|tak}} oraz {{s|nie}} - wstawiające grafikę<br />
| {{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
{{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%"
<nowiki>{| class="wikitable" width="50%"
|-
|-
| {{tak}} za
| {{tak}} za
Linia 704: Linia 596:
| {{yes|Raczej tak}}
| {{yes|Raczej tak}}
| {{no|Prawdopodobnie nie}}
| {{no|Prawdopodobnie nie}}
|}</source>
|}</nowiki>
|
|
{| class="wikitable" width="50%"
{| class="wikitable" width="50%"
Linia 783: Linia 675:
=== 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".

Aktualna wersja na dzień 21:18, 8 sie 2009

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


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


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

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

Łączenie komórek

W kilku wierszach – parametr rowspan

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

Komórka 1, wiersz 1 Komórka 2, wiersz 1 (oraz 2) Komórka 3, wiersz 1
Komórka 1, wiersz 2 Komórka 3, wiersz 2

rowspan powoduje rozciągnięcie komórki na kilka wierszy

W kilku kolumnach – parametr colspan

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

Komórka 1, wiersz 1 Komórka 2 (i 3), wiersz 1
Komórka 1, wiersz 2 Komórka 2, wiersz 2 Komórka 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

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.

{| 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 niektóre kolumny nie mogły być użyte do sortowania tabeli:

Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb
Rok 2006 245
Rok 2005 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 również wskazać, aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli:

Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb
Rok 2006 245
Rok 2005 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 |}

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 kratek w pionie
    • Scala n kratek 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 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.

Kod i zastosowanie Efekt
Szablon:S oraz Szablon:S - wstawiające grafikę

Szablon:S oraz Szablon:S lub Szablon:S oraz Szablon:S - dodające styl komórki {| class="wikitable" width="50%" |- | {{tak}} za | {{nie}} przeciw |- | {{yes}} | {{no}} |- | {{yes|Raczej tak}} | {{no|Prawdopodobnie nie}} |}

Szablon:Tak za Szablon:Nie przeciw
Szablon:Yes Szablon:No
Szablon:Yes Szablon:No
Szablon:S

Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach

Wartość Szablon:L

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.

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 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: Copy & Paste Excel-to-Wiki Converter lub 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".

Źródło: „https://himalaya-wiki.org/index.php?title=Pomoc:Tabele&oldid=4671”