FANDOM


{{Wikipedia: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 HTML jak np. <table>, <tr>, <td>, <th> i <caption>, ale zamiast tego zalecane jest używanie specjalnych znaczników składni wiki wprowadzonych przez Magnusa Manske. Znaczniki tej składni, za jednym wyjątkiem, muszą zaczynać się od początku nowej linii.

Tabela Edytuj

Tabela w pigułceEdytuj

Pierwsza utworzona tabela jest dokładnie opisana, druga zawiera te same dane, lecz ma zmienione parametry. Warto porównać te parametry i zwrócić uwagę na ich skutek w utworzonych tabelach.

560px 980

Zestawienie i objaśnienia kodów Edytuj

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"
  • border="1"
  • cellspacing="0"
  • cellpadding="3"
  • Wyrównanie tabelki (right/left - do prawej/do lewej)
  • 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;
  •  ;"
  • Otwieranie określeń styli
    • Tabelka zajmie 30% szerokości artykułu
    • Wyrównanie tekstu do lewej
    • ..do środka
    • ..do prawej
  • Po każdej wartości stawiamy ; a na końcu wszystko zamykamy "
  • | 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
  • <br clear="all"/>
Powoduje, że tabelka jest wyrównywana względem tekstu,
np. względem kolejnej sekcji artykułu

Szablony do użycia w tabelach Edytuj

Kod i zastosowanie Efekt
Szablon:S oraz Szablon:S

Do prostych zestawień np.

{| class="wikitable" width="50%"
|-
|{{tak}}
|{{nie}}
|}
Szablon:Tak Szablon:Nie
Szablon:S

Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach

Wartość Szablon:L

Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej kategorii.

PrzykładyEdytuj

Prosty przykład Edytuj

{| 
| Komórka 1, wiersz 1 
| Komórka 2, wiersz 1 
|- 
| Komórka 1, wiersz 2 
| Komórka 2, wiersz 2 
|}
 

tworzy tabelę bez krawędzi:

Komórka 1, wiersz 1 Komórka 2, wiersz 1
Komórka 1, wiersz 2 Komórka 2, wiersz 2


Zalecany kod tabeliEdytuj

{| class="wikitable"
! kolumna 1, wiersz 1 
! kolumna 2, wiersz 1 
|- 
| kolumna 1, wiersz 2 
| kolumna 2, wiersz 2 
|}

co da w efekcie schludnie sformatowaną tabelę z ramką i wyróżnieniem pól poprzedzonych wykrzyknikiem (pola nagłówkowe):

kolumna 1, wiersz 1 kolumna 2, wiersz 1
kolumna 1, wiersz 2 kolumna 2, wiersz 2

Wyrównywanie tekstuEdytuj

Użycie parametru alignEdytuj

Parametr ten jest obecnie uważany przez ekspertów za przestarzały, jednak jest krótszy w zapisie niż nowsza wersja.

Komórka 1, wiersz 1 Komórka 2, wiersz 1 Komórka 3, wiersz 1 Komórka 4, wiersz 1
do prawej wyśrodkowane do lewej też do lewej
{| class="wikitable"
! Komórka 1, wiersz 1
! Komórka 2, wiersz 1
! Komórka 3, wiersz 1
! Komórka 4, wiersz 1
|- 
| align="right" | do prawej
| align="center" | wyśrodkowane
| align="left" | do lewej
| też do lewej
|}

Jak widać domyślnie (bez podania parametrów), zwykłe komórki są wyrównywane do lewej.

Użycie parametru style do wyrównaniaEdytuj

Parametr style jest zalecany przez ekspertów, jednak w tym wypadku jego stosowanie wymaga nieco większego wysiłku.

Komórka 1, wiersz 1 Komórka 2, wiersz 1 Komórka 3, wiersz 1
do prawej wyśrodkowane do lewej
{| class="wikitable"
! Komórka 1, wiersz 1
! Komórka 2, wiersz 1
! Komórka 3, wiersz 1
|- 
| style="text-align:right" | do prawej
| style="text-align:center" | wyśrodkowane
| style="text-align:left" | do lewej
|}

Użycie tego parametru nabiera znaczenia, gdy chcemy sformatować całą tabelę (lub większość komórek) tak, aby były np. wyrównane do prawej:

Komórka 1, wiersz 1 Komórka 2, wiersz 1 Komórka 3, wiersz 1
to do prawej i to do prawej i to
{| class="wikitable" style="text-align:right"
! Komórka 1, wiersz 1
! Komórka 2, wiersz 1
! Komórka 3, wiersz 1
|- 
| to do prawej
| i to do prawej
| i to
|}

Wówczas do wyrównania tekstu w poszczególnych komórkach możemy użyć np. atrybutu align.

Komórka 1, wiersz 1 Komórka 2, wiersz 1 Komórka 3, wiersz 1
to do prawej i to do prawej a to do lewej
{| class="wikitable" style="text-align:right"
! Komórka 1, wiersz 1
! Komórka 2, wiersz 1
! Komórka 3, wiersz 1
|- 
| to do prawej
| i to do prawej
| align="left" | a to do lewej
|}

Użycie szablonu dla liczbEdytuj

W przypadku, gdy tekst w komórce przedstawia liczbę do jego wyrównywania pomocny jest wcześniej opisany szablon {{L}}. Opis jego stosowania jest tu. 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 Edytuj

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

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

jest widoczna po prawej

Kolory komórek Edytuj

Żeby uzyskać różne kolory komórek, wstawiamy przed każdą komórką polecenie bgcolor="xxxxxx" |, zamiast xxxxxx wpisujemy odpowiedni parametr koloru - lista parametrów znajduje się np. na stronie artykułu barwa. Poniżej znajduje się kilka przykładów dla zastosowania różnych kolorów. Zastosowanie poniższego kodu

{|class="wikitable"
!coś
!coś
!coś
|-
| bgcolor="FFF2B2" | kolor taki
| bgcolor="DBF5FF" | kolor inny
| bgcolor="FAD2B2" | kolor inny
|}

daje taki efekt:

coś coś coś
kolor taki kolor inny kolor inny

Jeżeli chcemy uzyskać dla całego wiersza jeden kolor, można to zrobić łatwiej:

{|class="wikitable"
!coś
!coś
!coś
|-bgcolor="FFF2B2"
|jeden kolor
|we wszystkich
| komórkach wiersza
|-bgcolor="DBF5FF"
|a w tym wierszu
|inny
|kolor
|}
coś coś coś
jeden kolor we wszystkich komórkach wiersza
a w tym wierszu inny kolor

Zestawienie kolorów Edytuj

barwa
kod HTML
Aliceblue F0F8FF
Antiquewhite FAEBD7
Aqua 00FFFF
Aquamarine 7FFFD4
Azure F0FFFF
BeigeF5F5DC
BisqueFFE4C4
BlanchedalmondFFEBCD
Blue0000FF
Blueviolet8A2BE2
BrownA52A2A
BurlywoodDEB887
Cadetblue5F9EA0
Chartreuse7FFF00
ChocolateD2691E
CoralFF7F50
Cornflowerblue6495ED
CornsilkFFF8DC
CrimsonDC143C
Cyan00FFFF
Darkblue00008B
Darkcyan008B8B
DarkgoldenrodB8860B
DarkgrayA9A9A9
Darkgreen006400
DarkkhakiBDB76B
Darkmagenta8B008B
Darkolivegreen556B2F
DarkorangeFF8C00
Darkorchid9932CC
Darkred8B0000
DarksalmonE9967A
Darkseagreen8FBC8F
Darkslateblue483D8B
Darkslategray2F4F4F
Darkturquoise00CED1
Darkviolet9400D3
DeeppinkFF1493
Deepskyblue00BFFF
Dimgray696969
Dodgerblue1E90FF
FirebrickB22222
FloralwhiteFFFAF0
Forestgreen228B22
FuchsiaFF00FF
GainsboroDCDCDC
barwa
kod HTML
GhostwhiteF8F8FF
GoldFFD700
GoldenrodDAA520
Gray808080
Green008000
GreenyellowADFF2F
HoneydewF0FFF0
HotpinkFF69B4
IndianredCD5C5C
Indigo4B0082
IvoryFFFFF0
KhakiF0E68C
LavendarE6E6FA
LavenderblushFFF0F5
Lawngreen7CFC00
LemonchiffonFFFACD
LightblueADD8E6
LightcoralF08080
LightcyanE0FFFF
LightgoldenrodyellowFAFAD2
Lightgreen90EE90
LightgreyD3D3D3
LightpinkFFB6C1
LightsalmonFFA07A
Lightseagreen20B2AA
Lightskyblue87CEFA
Lightslategray778899
LightsteelblueB0C4DE
LightyellowFFFFE0
Lime00FF00
Limegreen32CD32
LinenFAF0E6
MagentaFF00FF
Maroon800000
Mediumauqamarine66CDAA
Mediumblue0000CD
MediumorchidBA55D3
Mediumpurple9370D8
Mediumseagreen3CB371
Mediumslateblue7B68EE
Mediumspringgreen00FA9A
Mediumturquoise48D1CC
MediumvioletredC71585
MintcreamF5FFFA
MistyroseFFE4E1
MoccasinFFE4B5
barwa
kod HTML
NavajowhiteFFDEAD
Navy000080
OldlaceFDF5E6
Olive808000
Olivedrab688E23
OrangeFFA500
OrangeredFF4500
OrchidDA70D6
PalegoldenrodEEE8AA
Palegreen98FB98
PaleturquoiseAFEEEE
PalevioletredD87093
PapayawhipFFEFD5
PeachpuffFFDAB9
PeruCD853F
PinkFFC0CB
PlumDDA0DD
PowderblueB0E0E6
Purple800080
RedFF0000
RosybrownBC8F8F
Royalblue4169E1
Saddlebrown8B4513
SalmonFA8072
SandybrownF4A460
Seagreen2E8B57
SeashellFFF5EE
SiennaA0522D
SilverC0C0C0
Skyblue87CEEB
Slateblue6A5ACD
Slategray708090
SnowFFFAFA
Springgreen00FF7F
Steelblue4682B4
TanD2B48C
Teal008080
ThistleD8BFD8
TomatoFF6347
Turquoise40E0D0
VioletEE82EE
WheatF5DEB3
WhiteFFFFFF
WhitesmokeF5F5F5
YellowFFFF00
YellowGreen9ACD32

kod dla koloru czarnego #000000

Łączenie komórekEdytuj

W kilku wierszach - parametr rowspanEdytuj

{| class="wikitable" 
| Komórka 1, wiersz 1 
| rowspan=2 | Komórka 2, wiersz 1 (oraz 2) 
| Komórka 3, wiersz 1 
|-bgcolor="FFF2B2"
| 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 na kilka wierszy


W kilku kolumnach - parametr colspanEdytuj

{| class="wikitable"
| Komórka 1, wiersz 1 
| colspan=2 | Komórka 2 (i 3), wiersz 1
|-bgcolor="FFF2B2" 
| 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 na kilka kolumn.


A teraz przykład z użyciem wszystkich parametrów

{| class="wikitable" align="right"
|+ Tabela kolorowa i bardziej złożona
! Komórka 1, wiersz 1 
! Komórka 2, wiersz 1 
! Komórka 3, wiersz 1 
! Komórka 4, wiersz 1
|-
| bgcolor="ABF2B2" |Komórka 1, wiersz 2 
| bgcolor="ABF2B2" colspan=2 | Komórka 2 (i 3), wiersz 2
| bgcolor="ABF2FF" rowspan=3 | Komórka 4, wiersz 2 i 3
|-bgcolor="FFF2B2"
| colspan=3 | Komórka 1, 2 i 3, wiersz 3
|}
Tabela kolorowa i bardziej złożona
Komórka 1, wiersz 1 Komórka 2, wiersz 1 Komórka 3, wiersz 1 Komórka 4, wiersz 1
Komórka 1, wiersz 2 Komórka 2 (i 3), wiersz 2 Komórka 4, wiersz 2 i 3
Komórka 1, 2 i 3, wiersz 3


Tabela zagnieżdżona Edytuj

{| border="1"
| coścoś
|
{| border="2" style="background-color:#ABCDEF;"
|tabela
|-
|zagnieżdżona
|}
|ciąg dalszy pierwszej tabeli
|}

dodaje tabelę zagnieżdżoną

coścoś
tabela
zagnieżdżona
ciąg dalszy pierwszej tabeli


Uwaga: Jeśli główna tabela ma podany parametr class="wikitable" wówczas kolorowanie tła tabeli zagnieżdżonej nie funkcjonuje poprawnie.

Sortowanie danych w tabelach Edytuj

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

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

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

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 2003 Ogrodnictwo 21  ?


Istnieje możliwość wskazania aby niektóre kolumny nie mogły być użyte do sortowania tabeli:Edytuj

Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb
Rok 2006 Szablon:Tak 245
Rok 2005 Szablon:Nie 127
Rok 2003 nie sortujemy 21

Efekt uzyskuje się dodając class="unsortable" w opisie kolumny w pierwszym wierszu (główce) tabeli:=Edytuj

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

Jak również można wskazać aby dolne wiersze nie podlegały sortowaniu i zawsze zostawały na dole tabeli:Edytuj

Kolumna główna Po tej kolumnie nie sortujemy Sortowanie liczb
Rok 2006 Szablon:Tak 245
Rok 2005 Szablon:Nie 127
Rok 2003 nie sortujemy 21
Podsumowanie Sortowanie tabel nie jest trudne 45

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

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

Tabele w HTML (niezalecane) Edytuj

Obecnie tabele mogą być zupełnie skutecznie tworzone przy pomocy mechanizmu wiki. Niemniej jednak, osobom przyzwyczajonym do HTML może być łatwiej tworzyć tabele przy pomocy znaczników tego języka. Przed wstawieniem tabeli napisanej w HTML warto jednak zawsze rozważyć, czy nie da się tego zrobić prościej przy pomocy technik wiki.

Poniżej przedstawiamy znaczniki wiki służące do tworzenia tabel zestawione z ich równoważnikami w HTML:

Tabela jako taka jest definiowana przez:

{| parametry
|}

co odpowiada w HTML:

<table parametry>
</table>
Uwaga Między "|" i "parametry" oraz poszczególnymi parametrami musi być spacja.

Pojedyncze kolumny tabeli (odpowiednik "<td>" w HTML) są tworzone przez:

|kolumna1
|kolumna2
|kolumna3

lub prościej, w jednej linii:

|kolumna1||kolumna2||kolumna3

co odpowiada kodowi HTML/XHTML:

<td>kolumna1</td><td>kolumna2</td><td>kolumna3</td>

a zatem "||" jest równoważne układowi "nowa linia" + "|"

Kolejne kolumny, podobnie jak w HTML/XHTML są ustawiane standardowo w jednym wierszu.

Parametry kolumn mogą być wprowadzane w następujący sposób:

|params|kolumna1

co odpowiada w HTML:

<td params>kolumna1</td>

Dla pierwszej kolumny znacznik "<TR>" jest tworzony automatycznie i również dla ostatniej kolumny w tabeli znacznik "</TR>" jest automatycznie dodawany przez mechanizm wiki.

Tworzenie kolejnych wierszy (odpowiednik "<TR>" w HTML) dokonuje się tak samo jak tworzenie kolejnych kolumn tylko zamiast "|" wpisuje się "|-". Parametry wiersza można dodawać analogicznie do parametrów kolumn:

|- parametry

pamiętając o niezbędnej spacji między "|-" i parametrami.


Bardziej złożony przykład z zastosowaniem parametrów i połączonych wierszy:

{| align=right border=1
| kolumna 1, wiersz 1 
|rowspan=2| kolumna 2, wiersz 1 (i 2) 
| kolumna 3, wiersz 1 
|- 
| kolumna 1, wiersz 2 
| kolumna 3, wiersz 2 
|}

co da w efekcie tabelę przesuniętą do prawej i opływaną przez tekst z lewej:

kolumna 1, wiersz 1 kolumna 2, wiersz 1 (i 2) kolumna 3, wiersz 1
kolumna 1, wiersz 2 kolumna 3, wiersz 2


Znaczniki wiki a html Edytuj

Tabelę tworzy się za pomocą:

{| parametry
|}

co jest jednoznaczne z:

<table parametry>
</table>

TD Edytuj

Komórki tabel tworzone są albo tak:

|cell1
|cell2
|cell3

albo tak:

|cell1||cell2||cell3

obie metody są jednoznaczne z:

<td>cell1</td><td>cell2</td><td>cell3</td>

więc "||" równa się "znak_nowej_linii"+"|"

Parametry w komórkach używa się w ten sposób:

|parametry|cell1

co da ostatecznie:

<td parametry>

TH Edytuj

Ten znacznik uzyskuje się analogicznie do TD, jednak zamiast "|" używamy "!". "!!" używa się zamiast "||". Uwaga! parametry jednak używają "|".

TR Edytuj

Znaczniki <tr> tworzone są automatycznie w pierwszym wierszu tabeli. By zacząć nowy wiersz wpisz:

|-

lub

|--------------

lub

|-------------------

co da ostatecznie:

<tr>

Parametry można dodawać w ten sposób:

|- parametry

lub

|------- parametry

co odpowiada:

<tr parametry>

więc lepiej używać pojedynczego znaku -.

Ważne:

  • Znaczniki <tr> będą dodawane przed każdym pierwszym odpowiednikiem <td>
  • Znaczniki </tr> będą dodawane przed każdym z odpowiedników <tr> i </table>

CAPTION Edytuj

Znacznik <caption> tworzony się za pomocą:

|+ Caption

co generuje:

<caption>Caption</caption>

Można też użyć parametrów:

|+ parametry|Caption

co wygeneruje:

<caption parametry>Caption

Komórka nagłówkowa (znacznik TH) Edytuj

{| border="1"
! Header1!! Header2
|-
| Cell1|| Cell2
|}

tworzy tabelkę

Header1 Header2
Cell1 Cell2


Przypisanie atrybutu wierszowi (znacznik TR) Edytuj

{|
| cell1 || cell2
|- style="background-color:#abcdef;"
| cell3 || cell4
|}

tworzy

cell1 cell2
cell3 cell4

Łączenie komórek danych i nagłówkowych (TD, TH) Edytuj

{| border="1" cellspacing="0"
| 
! col Header1 
 ! ch2 
 |-
 ! row header 3
 | abc def ghi 
 |   gchf ghh dfgh
 |-
 ! RH 4
| gfbb gbgbds 
|    dfgsdsdg
|}

tworzy:

col Header1 ch2
row header 3 abc def ghi gchf ghh dfgh
RH 4 gfbb gbgbds dfgsdsdg

ale:

{| border="1" cellspacing="0"
! !! col Header1 !! ch2 
 |-
 ! row header 3 || abc def ghi ||   gchf ghh dfgh
 |-
 ! RH 4         || gfbb gbgbds ||    dfgsdsdg
|}

daje:

col Header1 ch2
row header 3 abc def ghi gchf ghh dfgh
RH 4 gfbb gbgbds dfgsdsdg

Zobacz też Edytuj

Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.