Tabulky na Wikipedii je možné vytvářet dvěma způsoby - v režimu Editovat pomocí Vizuálního editoru, nebo v režimu Editovat zdroj pomocí značkovacího jazyka, tj. ve zdrojovém kódu. (K tomu více viz Jak editovat stránku).

V režimu Editovat je vytvoření tabulky poměrně jednoduché, ale není zde možné složitější formátování.

Tato stránka se zabývá tvorbou tabulek pomocí značkovacího jazyka.

Hlavním znakem používaným při tvorbě tabulek je svislá čára (svislice, lidově svislítko nebo roura) - |.

V záhlaví tabulky může být titulek, lze zvolit počet sloupců a řádků, které mohou být také opatřeny záhlavími. Je možné využít standardní předdefinované tabulky a také upravovat parametry, jako jsou rozměry, zarovnání a barva textu, buď pro celou tabulku, nebo pro jednotlivé sloupce a řádky, resp. buňky.

V MediaWiki je možné tabulky zapisovat i standardními příkazy HTML, ale nejsou povoleny pokročilejší příkazy jako tbody, colgroup ap. Touto možností se nápověda nezabývá.

Tabulka má tuto základní strukturu:

{| atributy
 obsah tabulky
|}

Atributy jsou nepovinné a určují vlastnosti celé tabulky. Další atributy se pak mohou vkládat i do obsahu tabulky a mohou být přiřazeny jednotlivým řádkům či buňkám. Užívají se stejně jako v HTML/CSS; jednotlivé atributy není třeba vkládat do uvozovek, do zdrojového kódu je automaticky doplní systém; je však třeba je uvádět na stejném řádku, na kterém je zahajovací značka prvku, ke kterému se vztahují.

Často používané atributy:

class

pomocí atributu class (třída) lze prvku (nejčastěji tabulce) přiřadit předdefinovaný stylopis nebo funkce definované pomocí skriptů,

style

lze vložit libovolné stylování pomocí CSS stylů,

colspan, rowspan

určeno pro buňky roztažené přes více sloupců nebo více řádků,

lang

je-li obsah tabulky či její části v cizím jazyce, je vhodné pomocí tohoto atributu uvést jeho kód,

dir

u jazyků psaných zprava doleva lze nastavit hodnotu rtl („right to left“);

id

tabulce či její části lze přiřadit identifikátor, na který lze pak odkazovat.

Některé dříve často používané a oblíbené atributy pro vizuální prezentaci tabulky (rozměry, zarovnání, barva, okraje apod.) nejsou v současné verzi HTML5 podporovány a neměly by se používat. Jsou však vesměs snadno nahraditelné příslušnými CSS styly, které lze vložit do atributu style="…".

Obsah tabulky se vkládá po řádcích, každý řádek se skládá z oddělených buněk a je ukončen značkou konce řádku.

{|
|+ Titulek tabulky
! Záhlaví A !! Záhlaví B !! Záhlaví C
|-
| Řádek 1, A || Řádek 1, B || Řádek 1, C
|-
| Řádek 2, A || Řádek 2, B || Řádek 2, C
|}

Buňka

Buňky (odpovídají HTML elementu td) se mohou oddělovat takto:

| buňka A || buňka B || buňka C

To je přehledné u jednoduchých tabulek s krátkým obsahem, protože rozvržení ve zdrojovém textu napodobuje rozvržení v zobrazované tabulce. U složitějšího obsahu může být výhodné zapsat každou buňku na nový řádek, takto:

| buňka A
| buňka B
| buňka C

Obsah buňky lze rozdělit na více řádků kódu a je dokonce možné (a někdy i nutné) odřádkovat hned za úvodní svislicí a obsah buňky začít na dalším řádku:

| buňka A,
pokračování buňky A
|
buňka B
|
* buňka C obsahuje seznam
* proto musí začínat na novém řádku

Každá buňka musí tedy být uvozena

• odřádkováním a svislicí ( | ) na začátku řádku (po případných mezerách či tabulátorech pro lepší přehlednost zdrojového kódu), nebo
• dvojicí svislic ( || ) v pokračování na řádku kódu.

Atributy lze přiřadit i jednotlivým buňkám. Vloží se hned za značku začátku buňky (na stejný řádek!) a ukončí se svislicí.

| atributy | buňka

Buňky s atributy zapsané do řádku pak vypadají takto:

| atributy a | buňka A || atributy b | buňka B || atributy c | buňka C

Záhlaví

Buňka záhlaví (header, HTML element th) popisuje charakter buněk pod ní (jedná-li se o záhlaví sloupce) nebo za ní (jedná-li se o záhlaví řádku). Zapisuje se stejně jako ostatní buňky, pouze místo svislice se buňky (nikoli parametry) oddělují vykřičníkem (!):

! Záhlaví sloupce A !! Záhlaví sloupce B !! Záhlaví sloupce C

Stejně jako u ostatních buněk lze zapsat každé záhlaví na nový řádek:

! Záhlaví sloupce A
! Záhlaví sloupce B
! Záhlaví sloupce C

Odřádkování je nutné, má-li po buňce záhlaví následovat „obyčejná“ (datová, obsahová) buňka:

! Záhlaví řádku 1
  | data řádku 1, sloupec B
  | data řádku 1, sloupec C

Atributy jsou od vlastního záhlaví oddělovány standardně svislicí, nikoli vykřičníkem:

! atributy | Záhlaví

Řádky a sloupce

Buňky jsou uspořádány do řádků (row, HTML element tr). Řádky se označují posloupností znaků |- vloženou na začátek řádku zdrojového kódu.

I řádku lze přiřadit atributy. Atributy řádku se použijí pro všechny buňky v řádku, nemají-li explicitně nastavenou odlišnou hodnotu. Řádek s nastavenými atributy se zapíše takto:

|- atribut1="hodnota1" atribut2="hodnota2"

První řádek tabulky není třeba uvádět, nepotřebujeme-li mu nastavit atributy. Systém si ho vytvoří automaticky. Stejně tak není třeba uvádět „odřádkování“ na konci tabulky, stačí ukončit tabulku sekvencí |}

Ačkoli HTML definuje nástroje pro označení (a případné formátování) jednotlivých sloupců či jejich skupin (elementy col a colgroup), značkovací jazyk Wikipedie tyto nástroje nepodporuje a nelze je vložit ani jako HTML kód. Označení sloupců tedy není možné a atributy, které mají platit v celém sloupci, je třeba uvést pro každou jednotlivou buňku zvlášť.

Titulek

Titulek tabulky (HTML element caption) se vytvoří pomocí:

|+ Titulek tabulky

Atributy se připojí takto:

|+ atributy | Titulek tabulky

{|
 |+ '''Toto je titulek.''' Příklad z tabulky pro Afghánistán.
 | Nezávislost || 19. srpen|19. srpna 1919
 |-
 | Měna || Afghani
 |-
 | Časové pásmo || Universal Time, Coordinated|UTC+4:30
 |-
 | Národní hymna || Sououd-e-Melli
 |-
 | Doména nejvyšší úrovně || .af
|}

Wikitabulkaeditovat | editovat zdroj

Tabulka v základní, neupravené podobě je sice funkční, ale nepříliš vzhledná; chybějící rámečky a okraje rovněž ztěžují orientaci v jejích řádcích a sloupcích. Pro standardní tabulky prezentující čtenáři uspořádaná data je proto vhodné využít předdefinovanou jednoduchou, slabě zarámovanou tabulku o libovolném počtu sloupců a řádek. Stačí jako atribut tabulky uvést class="wikitable". Například:

{| class="wikitable"
|+ Titulek tabulky
! AAA !! BBB !! CCC
|-
| A1  || B3  || C11 
|-
| A2  || B2  || C10
|-
| A3  || B1  || C12
|}

Tabulka s volitelným řazenímeditovat | editovat zdroj

Lze také vytvářet tabulky, které si čtenář může řadit dle vybraného sloupce kliknutím na šipku v jeho záhlaví. Tato funkce využívá JavaScript a funguje od MediaWiki verze 1.9. Jednoduše tabulce nastavíme pomocí atributu class předdefinovanou třídu sortable; tuto třídu lze přitom kombinovat s třídou wikitable nebo i s jinými případnými třídami. Pokud tedy v předchozím příkladu upravíme atribut tabulky takto:

{| class="wikitable sortable"

získáme:

U tabulky s řazením lze použít atributy určující, které sloupce mají zůstat bez řazení a kde končí oblast řazení:

{| class="wikitable sortable"
  ! ID položky
  ! Název
  ! class="unsortable" | Kusů
  ! Cena za kus
  ! Celkem
|-
|1 || Toaletní papír    ||   5 || 5,60 || 28,–
|-
|2 || Smirkový papír    ||   3 || 12,– || 36,–
|-
|3 || Kancelářský papír || 100 || 0,50 || 50,–
|- class="sortbottom"
| || || || || Celková cena: 114,–
|}

Pro docílení správného řazení dat v tabulkách v komplikovanějších případech lze použít pomocné šablony.

Řazení čísel podle velikostieditovat | editovat zdroj

Je navrženo vyjmutí této části stránky a její přesunutí na nový název.

K návrhu se můžete vyjádřit v diskusi.

Parametr před textem nadpisu data-sort-type="number" (zakončený svislicí) změní řazení ze znakového na seřazení podle velikostí čísel, řádek nadpisů by tak byl tvořen zápisem např.

!ID položky!!Název!!class="unsortable"|Kusů!!data-sort-type="number"|Cena za kus!!Celkem!

s výslednou tabulkou s číselným řazením podle jednotkové ceny:

Kaskádové stylyeditovat | editovat zdroj

Vzhled tabulky lze nastavit či upravit pomocí kaskádových stylů (CSS). Kaskádové styly jsou mocným nástrojem, který umožňuje nastavit téměř jakýkoli aspekt zobrazení; využívejte jich však prosím s rozvahou a pouze tam, kde jsou pro prezentaci obsahu skutečně přínosem. Uvědomte si, že:

• některé úpravy stylů mohou kolidovat s nastavením systému či prohlížeče, které u čtenáře může být jiné, než u vás,
• výrazné odchylky od jednotného stylu Wikipedie mohou být pro čtenáře matoucí a zhoršovat jeho orientaci,
• některá nevhodná nastavení stylů mohou negativně ovlivnit přístupnost stránek pro uživatele s některým typem omezení.

S vědomím těchto rizik lze styly přínosně využívat např. pro zarovnání tabulky či textu, ohraničení buněk či jejich skupin nebo pro barevné zvýraznění zobrazené informace.

Nastavení stylu se provádí atributem style, kterému se přiřadí příslušný stylopis. Samotný stylopis má pak formát <název vlastnosti>:<hodnota> a může obsahovat několik takových nastavení oddělených od sebe středníkem. Přiřadíme-li tedy prvku styl style="color:white; background-color:black; font-weight:bold;", zobrazí se jeho obsah bílým tučným písmem na černém pozadí.

Styl lze nastavit pro jednotlivé buňky, pro celý řádek, pro nadpis tabulky anebo pro celou tabulku. Kaskádovost stylu znamená, že se použije vždy nastavení definované individuálně tomu kterému prvku; není-li takové, použije se nastavení nejbližšího nadřazeného prvku atd. Styl nastavený pro řádek tedy ovlivní všechny buňky v řádku, ledy bychom jednotlivé buňce určili nastavení jiné. Styl nastavený pro tabulku ovlivní všechny řádky a tím pádem i všechny buňky.

Umístění tabulkyeditovat | editovat zdroj

Tabulku ze umístit k levému nebo k pravému okraji nebo doprostřed sloupce textu vhodným nastavením jejího pravého a levého okraje:

tabulka vlevo

{| style="margin-left:0; margin-right:auto;"

tabulka vpravo

{| style="margin-left:auto; margin-right:0;"

tabulka uprostřed

{| style="margin-left:auto; margin-right:auto;"

Chceme-li, aby následující text tabulku obtékal, použijeme místo toho vlastnost float:

tabulka obtékaná zleva

{| style="float:right;"

tabulka obtékaná zprava

{| style="float:left;"

Bude-li však obsah tabulky dostatečně široký, tato nastavení se neprojeví a tabulka se roztáhne přes celou šířku stránky. Tomu lze předejít tím, že tabulce nastavíme pevnou či maximální šířku:

tabulka s pevnou šířkou přes půl stránky

{| style="width:50%;"

tabulka s maximální šířkou 25 em a obtékaná zleva

{| style="max-width:25em;float:right;"

Zarovnání textueditovat | editovat zdroj

Umístění textu uvnitř buňky lze upravit následujícími vlastnostmi:

text-align

horizontální zarovnání textu,

text-align-last

horizontální zarovnání posledního řádku u víceřádkového textu,

vertical-align

vertikální zarovnání obsahu,

Jejich použití demonstruje následující tabulka:

Pro horizontální zarovnání lze kromě uvedených hodnot nastavit také hodnotu justify, která způsobí roztažení textu na celou šířku buňky („oboustranné zarovnání“)

Zarovnání čísel na desetinnou čárkueditovat | editovat zdroj

Sloupce číselných hodnot je zvykem zarovnávat podle desetinné čárky. Editační systém Wikipedie nemá k dispozici nástroj určený pro takové formátování, v případě potřeby je však lze napodobit některým z uvedených postupů:

Sjednocení počtu desetinných místeditovat | editovat zdroj

Číslo lze zarovnat doprava a doplnit je za desetinnou čárkou nulami na předem určený stejný počet desetinných míst. Lze to udělat manuálně pro každé jednotlivé číslo, nebo automaticky pomocí formátovací funkce {{padright: … }}.

s kódem:

{|class="wikitable"
! Zboží !! Cena
|-
| Položka 1 || style="text-align:right" | 28,{{padright:5|2}}
|-
| Položka 2 || style="text-align:right" | 36,{{padright:|2}}
|-
| Položka 3 || style="text-align:right" | 50,{{padright:0|2}}
|- style="font-weight:bold"
| Celkem:   || style="text-align:right" | 114,{{padright:50|2}}
|}

Šablona {{0}}editovat | editovat zdroj

Výše uvedeným postupem doplněné nevýznamné nuly lze zneviditelnit pomocí šablony {{0}}; vyhrazené místo pak zůstane prázdné a desetinná čárka bude umístěna na požadované pozici. Tento postup však nelze zautomatizovat funkcí {{padright: … }} a musí se nastavit pro každé číslo samostatně.

s kódem:

{|class="wikitable"
! Zboží !! Cena
|-
| Položka 1 || style="text-align:right" | 28,50
|-
| Položka 2 || style="text-align:right" | 36{{0|,00}}
|-
| Položka 3 || style="text-align:right" | 50,–{{0|0}}
|- style="font-weight:bold"
| Celkem:   || style="text-align:right" | 114,50
|}

Šablona {{Zarovnat}}editovat | editovat zdroj

Jiný postup nabízí šablona {{Zarovnat}}, která nastaví pevnou šířku celočíselné části čísla.

s kódem:

{|class="wikitable"
! Zboží !! Cena
|-
| Položka 1 || {{Zarovnat|28,50}}
|-
| Položka 2 || {{Zarovnat|36}}
|-
| Položka 3 || {{Zarovnat|50,–}}
|- style="font-weight:bold"
| Celkem:   || {{Zarovnat|114,50}}
|}

Slučování buněkeditovat | editovat zdroj

Jednotlivé buňky tabulky můžeme slučovat. Vykreslit v daném řádku buňku přes několik sloupců lze pomocí parametru colspan="cislo", kde cislo značí počet sloupců, přes které se má buňka vykreslit. Např. colspan="2" tedy vykreslí danou buňku přes dva sloupce. Jestliže chceme vykreslit v daném sloupci buňku přes několik řádků, použijeme obdobným způsobem parametr rowspan="cislo".