{{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[]
Tabela w pigułce[]
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.
Plik:Tabela w pigułce 1.PNG 980
Zestawienie i objaśnienia kodów[]
| Kod | Zastosowanie |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Powoduje, że tabelka jest wyrównywana względem tekstu, np. względem kolejnej sekcji artykułu |
Szablony do użycia w tabelach[]
| Kod i zastosowanie | Efekt | ||
|---|---|---|---|
| Szablon:S oraz Szablon:S
Do prostych zestawień np. {| class="wikitable" width="50%"
|-
|{{tak}}
|{{nie}}
|}
|
| ||
| Szablon:S
Formatowanie, wyrównywanie i poprawne sortowanie liczb w tabelach |
|
Wszystkie szablony do zastosowania w tabelach można znaleźć w odpowiedniej kategorii.
Przykłady[]
Prosty przykład[]
{|
| 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 tabeli[]
{| 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 tekstu[]
Użycie parametru align[]
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ównania[]
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 liczb[]
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[]
Jeżeli chcemy, aby pojawił się tytuł tabeli nad nią, używamy kodu |+
| 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[]
Ż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[]
|
|
|
kod dla koloru czarnego #000000
Łą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
|-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 colspan[]
{| 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
|}
| 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[]
{| 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ś |
|
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.