Pomoc:Tabele: Różnice pomiędzy wersjami
Linia 5: | Linia 5: | ||
== Tabela w przykładach == | == Tabela w przykładach == | ||
=== Wersja podstawowa === | === Wersja podstawowa === | ||
− | < | + | <nowiki> |
{| | {| | ||
| kolumna 1, wiersz 1 | | kolumna 1, wiersz 1 | ||
Linia 13: | Linia 13: | ||
| kolumna 2, wiersz 2 | | kolumna 2, wiersz 2 | ||
|} | |} | ||
− | </ | + | </nowiki> |
Powyższy kod utworzy prostą tabelę bez zarysowanych krawędzi: | Powyższy kod utworzy prostą tabelę bez zarysowanych krawędzi: | ||
Linia 27: | Linia 27: | ||
Tabele powinny być 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 być 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: | ||
− | < | + | <nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
! kolumna 1, wiersz 1 | ! kolumna 1, wiersz 1 | ||
Linia 35: | Linia 35: | ||
| kolumna 2, wiersz 2 | | kolumna 2, wiersz 2 | ||
|} | |} | ||
− | </ | + | </nowiki> |
...co daje: | ...co daje: | ||
Linia 52: | Linia 52: | ||
Oto wyrównywanie parametrem: | Oto wyrównywanie parametrem: | ||
− | < | + | <nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
! Nagłówek kolumny nr 1 | ! Nagłówek kolumny nr 1 | ||
Linia 62: | Linia 62: | ||
| style="text-align:left" | do lewej | | style="text-align:left" | do lewej | ||
|} | |} | ||
− | </ | + | </nowiki> |
... co daje: | ... co daje: | ||
Linia 78: | Linia 78: | ||
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: | ||
− | < | + | <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 88: | ||
| i to | | i to | ||
|} | |} | ||
− | </ | + | </nowiki> |
...co daje: | ...co daje: | ||
Linia 104: | Linia 104: | ||
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: | ||
− | < | + | <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 114: | ||
| style="text-align:left" | a to do lewej | | style="text-align:left" | a to do lewej | ||
|} | |} | ||
− | </ | + | </nowiki> |
...co daje: | ...co daje: | ||
Linia 127: | Linia 127: | ||
| style="text-align:left" | a to do lewej | | style="text-align:left" | a to do lewej | ||
|} | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
=== 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 |+ | ||
− | < | + | <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 150: | ||
| Komórka 2, wiersz 4 | | Komórka 2, wiersz 4 | ||
|} | |} | ||
− | </ | + | </nowiki> |
...co daje: | ...co daje: | ||
Linia 178: | Linia 173: | ||
== 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 ( | + | 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 (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 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 | + | 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 palety bezpiecznych dla WWW [http://pl.wikipedia.org/wiki/Pomoc:Kolory#Kolory_bezpieczne_dla_WWW]. 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 === | === 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 | + | Ż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 na stronach Wikipedii [[http://pl.wikipedia.org/wiki/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 186: | ||
=== Przykłady kolorowania === | === Przykłady kolorowania === | ||
Zastosowanie poniższego kodu... | Zastosowanie poniższego kodu... | ||
− | < | + | <nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
Linia 199: | Linia 194: | ||
| style="color:#00f" | niebieski podany szesnastkowo | | style="color:#00f" | niebieski podany szesnastkowo | ||
|} | |} | ||
− | </ | + | </nowiki> |
...daje taki efekt: | ...daje taki efekt: | ||
Linia 212: | Linia 207: | ||
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: | ||
− | < | + | <nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
|- style="background-color:PaleGreen" | |- style="background-color:PaleGreen" | ||
Linia 225: | Linia 220: | ||
| a tu znowu jest domyślny | | a tu znowu jest domyślny | ||
|} | |} | ||
− | </ | + | </nowiki> |
...co daje: | ...co daje: | ||
Linia 242: | Linia 237: | ||
|} | |} | ||
− | |||
− | |||
== Właściwości tekstu == | == 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ć: | Teksty w tabeli da się modyfikować tak samo jak zwykły tekst. Dodatkowo do całego wiersza da się zastosować: | ||
− | < | + | <nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
|- style="font-style:italic" | |- style="font-style:italic" | ||
Linia 290: | Linia 283: | ||
| tego wiersza | | tego wiersza | ||
|} | |} | ||
− | </ | + | </nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
|- style="font-style:italic" | |- style="font-style:italic" | ||
Linia 336: | Linia 329: | ||
== Łączenie komórek == | == Łączenie komórek == | ||
=== W kilku wierszach – parametr rowspan === | === W kilku wierszach – parametr rowspan === | ||
− | < | + | <nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
| Kolumna 1, wiersz 1 | | Kolumna 1, wiersz 1 | ||
Linia 345: | Linia 338: | ||
| Kolumna 3, wiersz 2 | | Kolumna 3, wiersz 2 | ||
|} | |} | ||
− | </ | + | </nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
Linia 358: | Linia 351: | ||
<code>rowspan</code> powoduje rozciągnięcie kolumny na kilka wierszy | <code>rowspan</code> powoduje rozciągnięcie kolumny na kilka wierszy | ||
− | |||
=== W kilku kolumnach – parametr colspan === | === W kilku kolumnach – parametr colspan === | ||
− | < | + | <nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
| Kolumna 1, wiersz 1 | | Kolumna 1, wiersz 1 | ||
Linia 370: | Linia 362: | ||
| Kolumna 3, wiersz 2 | | Kolumna 3, wiersz 2 | ||
|} | |} | ||
− | </ | + | </nowiki> |
{| class="wikitable" | {| class="wikitable" | ||
Linia 384: | Linia 376: | ||
=== Mieszane łączenie === | === Mieszane łączenie === | ||
− | < | + | <nowiki> |
{| class="wikitable" style="text-align:left" | {| class="wikitable" style="text-align:left" | ||
! kolumna 1 (nagłówek) | ! kolumna 1 (nagłówek) | ||
Linia 402: | Linia 394: | ||
| kolumna 1, wiersz 4 | | kolumna 1, wiersz 4 | ||
|} | |} | ||
− | </ | + | </nowiki> |
{| class="wikitable" style="text-align:left" | {| class="wikitable" style="text-align:left" | ||
Linia 424: | Linia 416: | ||
=== Tabela zagnieżdżona === | === Tabela zagnieżdżona === | ||
poniższy kod... | poniższy kod... | ||
− | < | + | <nowiki> |
{| border=1 | {| border=1 | ||
| komórka 1 tabeli zewnętrznej | | komórka 1 tabeli zewnętrznej | ||
Linia 435: | Linia 427: | ||
| komórka 3 tabeli zewnętrznej | | komórka 3 tabeli zewnętrznej | ||
|} | |} | ||
− | </ | + | </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 448: | Linia 440: | ||
| komórka 3 tabeli zewnętrznej | | komórka 3 tabeli zewnętrznej | ||
|} | |} | ||
+ | == Kilka tabel z wyrównanymi kolumnami == | ||
+ | Tabele z kolumnami o dynamicznej szerokości: | ||
− | + | <nowiki> | |
− | + | {| | |
− | + | |- 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 |
− | | | ||
− | | | ||
− | | | ||
|} | |} | ||
− | </ | + | </nowiki> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ...co daje: | |
− | : | ||
− | |||
− | |||
{| | {| | ||
|- bgcolor="#CCCCCC" | |- bgcolor="#CCCCCC" | ||
Linia 590: | Linia 489: | ||
|} | |} | ||
− | Tabele z wyrównanymi kolumnami stałej szerokości | + | Tabele z wyrównanymi kolumnami stałej szerokości: |
+ | |||
+ | <nowiki> | ||
{| | {| | ||
|- bgcolor="#CCCCCC" | |- bgcolor="#CCCCCC" | ||
Linia 608: | Linia 509: | ||
| 1. || "Life's What You Make It" <small>(live)</small> | | 1. || "Life's What You Make It" <small>(live)</small> | ||
|} | |} | ||
− | + | ||
{| | {| | ||
|- bgcolor="#CCCCCC" | |- bgcolor="#CCCCCC" | ||
Linia 618: | Linia 519: | ||
| 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10 | | 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10 | ||
|} | |} | ||
+ | </nowiki> | ||
+ | ...co daje: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{| | {| | ||
|- bgcolor="#CCCCCC" | |- bgcolor="#CCCCCC" | ||
Linia 677: | Linia 549: | ||
|- | |- | ||
| 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10 | | 1. || "[[See You Again]]" || Miley Cyrus, Armato, James || 3:10 | ||
− | |||
− | |||
|} | |} | ||
Linia 685: | Linia 555: | ||
<table> | <table> | ||
− | <tr><td>< | + | <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 717: | Linia 587: | ||
| ? | | ? | ||
|} | |} | ||
− | </ | + | </nowiki> |
− | Kod ten pozwoli uzyskać poniższą tabelę, w której, klikając w "znaczek | + | 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 753: | Linia 623: | ||
|} | |} | ||
− | |||
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 762: | Linia 631: | ||
|- | |- | ||
! Rok 2006 | ! Rok 2006 | ||
− | | | + | | tak |
| 245 | | 245 | ||
|- | |- | ||
! Rok 2005 | ! Rok 2005 | ||
− | | | + | | nie |
| 127 | | 127 | ||
|- | |- | ||
Linia 775: | Linia 644: | ||
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: | ||
− | < | + | <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 781: | Linia 650: | ||
! width="80px" | Sortowanie liczb | ! width="80px" | Sortowanie liczb | ||
... | ... | ||
− | </ | + | </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 790: | Linia 659: | ||
|- | |- | ||
! Rok 2006 | ! Rok 2006 | ||
− | | | + | | tak |
| 245 | | 245 | ||
|- | |- | ||
! Rok 2005 | ! Rok 2005 | ||
− | | | + | | nie |
| 127 | | 127 | ||
|- | |- | ||
Linia 808: | Linia 677: | ||
Tu wystarczy podać atrybut wiersza '''class="sortbottom"''': | Tu wystarczy podać atrybut wiersza '''class="sortbottom"''': | ||
− | < | + | <nowiki> |
|- | |- | ||
! Rok 2003 | ! Rok 2003 | ||
Linia 818: | Linia 687: | ||
| 45 | | 45 | ||
|} | |} | ||
− | </ | + | </nowiki> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Informacje dla osób znających znaczniki (X)HTML == | == Informacje dla osób znających znaczniki (X)HTML == | ||
Linia 1116: | Linia 735: | ||
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. | 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. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
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". | ||
− | [[Kategoria:Pomoc | + | [[Kategoria:Pomoc]] |
Wersja z 14:08, 8 sie 2013
Hasła Wikipedii 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.
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 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:
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 niektóre barwy mogą zostać zastąpione zbliżoną lub wyświetlić się ziarniście (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 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 palety bezpiecznych dla WWW [2]. 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 na stronach Wikipedii [[3]]). 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 |
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" | jednocześnie pogrubiony i kursywa | we wszystkich | czterech komórkach | tego wiersza |- a style="font-weight:bold; font-style:italic; color:Green" | jednocześnie pogrubiony; kursywa i 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 i kursywa | we wszystkich | czterech komórkach | tego wiersza |
jednocześnie pogrubiony; kursywa i 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 kilka wierszy
W kilku kolumnach – parametr colspan
{| class="wikitable" | Kolumna 1, wiersz 1 | colspan=2 | Kolumna 2 (i 3), wiersz 1 |- | Kolumna 1, wiersz 2 | Kolumna 2, wiersz 2 | Kolumna 3, wiersz 2 |}
Kolumna 1, wiersz 1 | Kolumna 2 (i 3), wiersz 1 | |
Kolumna 1, wiersz 2 | Kolumna 2, wiersz 2 | Kolumna 3, wiersz 2 |
colspan
powoduje rozciągnięcie komórki na kilka kolumn.
Mieszane łączenie
{| class="wikitable" style="text-align:left" ! kolumna 1 (nagłówek) ! kolumna 2 (nagłówek) ! kolumna 3 (nagłówek) ! kolumna 4 (nagłówek) |- | kolumna 1, wiersz 1 | colspan=2 | kolumna 2 i 3, wiersz 1 | rowspan=2 | kolumna 4, wiersz 1 i 2 |- | colspan="3" | kolumna 1, 2 i 3, wiersz 2 |- | kolumna 1, wiersz 3 | colspan="3" rowspan="2" | kolumna 2, 3 i 4, wiersz 3 i 4 |- | kolumna 1, wiersz 4 |}
kolumna 1 (nagłówek) | kolumna 2 (nagłówek) | kolumna 3 (nagłówek) | kolumna 4 (nagłówek) |
---|---|---|---|
kolumna 1, wiersz 1 | kolumna 2 i 3, wiersz 1 | kolumna 4, wiersz 1 i 2 | |
kolumna 1, 2 i 3, wiersz 2 | |||
kolumna 1, wiersz 3 | kolumna 2, 3 i 4, wiersz 3 i 4 | ||
kolumna 1, wiersz 4 |
Tabela zagnieżdżona
poniższy kod... {| border=1 | komórka 1 tabeli zewnętrznej | {| border=1 style="background:blue" | tabela |- | zagnieżdżona |} | komórka 3 tabeli zewnętrznej |}
...dodaje tabelę zagnieżdżoną w drugiej komórce tabeli zewnętrznej
komórka 1 tabeli zewnętrznej |
|
komórka 3 tabeli zewnętrznej |
Kilka tabel z wyrównanymi kolumnami
Tabele 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 |}
...co daje:
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:
{| |- 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 |}
...co daje:
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 |
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.
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:
Tu wystarczy podać atrybut wiersza class="sortbottom": |- ! Rok 2003 | nie sortujemy | 21 |- class="sortbottom" ! Podsumowanie | Sortowanie tabel nie jest trudne | 45 |} Informacje dla osób znających znaczniki (X)HTML
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).
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.
|