Nápověda:Tabulky

Tabulky na Wikipedii se vytvářejí pomocí značkovacího jazyka (viz Jak editovat stránku), zejména znaku 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á.

Základní syntaxe tabulekEditovat

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.

Příklad jednoduché tabulky
Zápis Zobrazení na stránce
{|
|+ 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
|}
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ňkaEditovat

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

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 sloupceEditovat

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 sloupcí, je třeba uvést pro každou jednotlivou buňku zvlášť.

TitulekEditovat

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

|+ Titulek tabulky

Atributy se připojí takto:

|+ atributy | Titulek tabulky
Příklad tabulky s titulkem
Zápis Zobrazení na stránce
{|
 |+ '''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
|}
Toto je titulek. Příklad z tabulky pro Afghánistán.
Nezávislost 19. srpna 1919
Měna Afghani
Časové pásmo UTC+4:30
Národní hymna Sououd-e-Melli
Doména nejvyšší úrovně .af

Předdefinované tabulkyEditovat

WikitabulkaEditovat

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" nebo {{wikitabulka}}. Například:

Příklad wikitabulky
Zápis Zobrazení na stránce
{| class="wikitable"
|+ Titulek tabulky
! AAA !! BBB !! CCC
|-
| A1  || B3  || C11 
|-
| A2  || B2  || C10
|-
| A3  || B1  || C12
|}
Titulek tabulky
AAA BBB CCC
A1 B3 C11
A2 B2 C10
A3 B1 C12

Tabulka s volitelným řazenímEditovat

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:

Titulek tabulky
AAA BBB CCC
A1 B3 C11
A2 B2 C10
A3 B1 C12

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

Příklad wikitabulky s volitelným řazením
Zápis Zobrazení na stránce
{| 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,–
|}
ID položky Název 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,–
Celková cena: 114,–
  • třída class="unsortable" v záhlaví sloupce vynechá nežádoucí řazení podle počtu kusů.
  • třída class="sortbottom" přiřazená poslednímu řádku ukončí oblast řazení, aby celková cena zůstala na posledním řádku.

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

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:

ID položky Název 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,–
Celková cena: 114,–

Pokročilé formátováníEditovat

Zarovnání textuEditovat

Výchozí zarovnání textu v buňce je vlevo a ve svislém směru doprostřed. Parametry lze přiřadit jak buňce (pak platí pouze pro danou buňku), tak celému řádku (pak platí pro všechny buňky v řádku, které nemají daný parametr změněný). Pokud není použit předdefinovaný styl (např. class="wikitable"), lze parametr použít i pro celou tabulku (pak určuje zarovnání tabulky na stránce).

Vodorovné zarovnání

K horizontálnímu zarovnání textu v buňkách tabulky se používá styl text-align (angl. zarovnat):

  • style="text-align: left;" – vlevo (výchozí)
  • style="text-align: center;" – na střed
  • style="text-align: right;" – vpravo
Svislé zarovnání

K vertikálnímu zarovnání textu se používá podobný styl vertical-align:

  • style="vertical-align: top;" – nahoře
  • style="vertical-align: middle;" – uprostřed (výchozí)
  • style="vertical-align: bottom;" – dole
Příklad tabulky s různě zarovnanými buňkami
Svislé zarovnání Vodorovné zarovnání
výchozí
Vodorovné zarovnání
na střed
Vodorovné zarovnání
doprava
zarovnání
výchozí
data data data
zarovnání
nahoru
data data data
zarovnání
dolů
data data data
Zarovnání řádku vpravo vpravo vpravo
celý řádek zarovnaný
dolů a doprava
data data data
stejný řádek
jedna buňka s parametry
data s parametry data

Zdrojový kód příkladu:

{| class="wikitable"
|+ Příklad tabulky s různě zarovnanými buňkami
! Svislé zarovnání
! Vodorovné zarovnání <br /> výchozí
! Vodorovné zarovnání <br /> na střed
! Vodorovné zarovnání <br /> doprava
|-
! zarovnání <br /> výchozí
| data
| style="text-align:center;" | data
| style="text-align:right;" | data
|-
! zarovnání <br /> nahoru
| style="vertical-align: top;" | data
| style="text-align:center; vertical-align: top;" | data
| style="text-align:right; vertical-align: top;" | data
|-
! zarovnání <br /> dolů
| style="vertical-align: bottom;" | data
| style="text-align:center; vertical-align: bottom;" | data
| style="text-align:right; vertical-align: bottom;" | data
|-
! Zarovnání řádku
! vpravo
! vpravo
! vpravo
|- style="vertical-align: bottom; text-align:right;"
! celý řádek zarovnaný <br /> dolů a doprava
| data || data || data
|- style="vertical-align: bottom; text-align:right;"
! stejný řádek <br /> jedna buňka s parametry
| data
| style="vertical-align: top; text-align: left;" | s parametry
| data
|}

Zarovnání čísel na desetinnou čárkuEditovat

Čísla v tabulkách nemají jiné vlastnosti než jakýkoli jiný text. To platí také pro zarovnání. V tabulkách jsou však ignorovány prosté mezery na začátku a na konci obsahu buňky.

K zarovnání podle desetinné čárky proto zvolíme zarovnání vpravo (align="right") a doplníme za číslo příslušný počet nezobrazených nul použitím šablony nuly se svislicí 0|. Ta vynechá v buňce právě tolik místa, jako by zabral text (zde zejména případná desetinná čárka a příslušný počet nul) zapsaný do šablony za svislicí, např. desetinná čárka a dvě nuly:

{{0|,00}}

Navíc:

  • I číslo s největším počtem číslic za desetinnou čárkou odsuneme od pravého okraje buňky přidáním za čísla plné nebo malé mezery:
    {{0|0}}, {{0|.}} 
    Stejně můžeme oddělit od krajů buněk i texty přidáním mezer na obou stranách.
  • U celých čísel ve sloupci i s desetinnými čísly je úhlednější zapsat alespoň první nulu za desetinnou čárkou.

Upravený příklad výše uvedené tabulky tak bude s příslušnými zarovnáními (zejména pravý sloupec) vypadat takto:

.ID položky. .Název. .Kusů. .Cena za kus. .Celkem.
1. .Toaletní papír. 5. 5,60. 28,00.
2. .Smirkový papír. 3. 12,50. 36,00.
3. .Kancelářský papír . 100. 0,50. 50,–0.
Celková cena: 114,–0.

s kódem:

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


Slučování buněkEditovat

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

Příklad tabulky se sloučenými buňkami
řádek 1, sloupec 1 řádek 1, sloupec 2 a 3
řádek 2, sloupec 1 řádek 2, sloupec 2 řádek 2, sloupec 3
řádek 3, sloupec 1 řádek 3 a 4, sloupec 2 řádek 3, sloupec 3
řádek 4, sloupec 1 řádek 4, sloupec 3
řádek 5, sloupec 1 řádek 5, sloupec 2 rádek 5, sloupec 3

Zdrojový kód příkladu:

{|class="wikitable"
|+ Příklad tabulky se sloučenými buňkami
! řádek 1, sloupec 1
! colspan="2" | řádek 1, sloupec 2 a 3
|-
|řádek 2, sloupec 1
|řádek 2, sloupec 2
|řádek 2, sloupec 3
|-
|řádek 3, sloupec 1
|rowspan="2"|řádek 3 a 4, sloupec 2
|řádek 3, sloupec 3
|-
|řádek 4, sloupec 1
|řádek 4, sloupec 3
|-
|řádek 5, sloupec 1
|řádek 5, sloupec 2
|rádek 5, sloupec 3
|}

Vkládání tabulek do sebeEditovat

Do jedné tabulky lze vložit druhou tabulku, např.:

data A tabulky 1
data a tabulky 2 data b tabulky 2
data c tabulky 2 data d tabulky 2
data B tabulky 1
data C tabulky 1 data D tabulky 1

Zdrojový kód příkladu:

{| class="wikitable"
| data A tabulky 1
{| class="wikitable"
| data a tabulky 2 
| data b tabulky 2
|-
| data c tabulky 2 
| data d tabulky 2
|}
| data B tabulky 1
|-
| data C tabulky 1
| data D tabulky 1
|}

Ohraničení buněk a tabulkyEditovat

Pokud nepoužijeme předdefinovanou tabulku, můžeme použít parametr border="cislo" pro změnu šířky okraje tabulky. Pro změnu vnitřních okrajů užíváme parametr cellpadding="cislo" a pro změnu vnějších okrajů parametr cellspacing="cislo".

Příklady různě ohraničených tabulek
border="0"
data data
data data
border="1"
data data
data data
border="3"
data data
data data
border="7"
data data
data data
Příklady tabulek s různými vnitřními okraji
cellpadding="0"
data data
data data
cellpadding="1"
data data
data data
cellpadding="3"
data data
data data
cellpadding="7"
data data
data data
Příklady tabulek s různými vnějšími okraji
cellspacing="0"
data data
data data
cellspacing="1"
data data
data data
cellspacing="3"
data data
data data
cellspacing="7"
data data
data data

Převod tabulek do formátu WikitableEditovat

K převodu tabulek z programů, jako je Gnumeric, MS Excel nebo Calc z OpenOffice, lze použít nástroj Copy & Paste Excel-to-Wiki.

Též lze uložit původní tabulku do formátu CSV a použít převaděč csv2wp. * (další informace (en))

Nástroj usnadňující vytváření wikitabulek lze najít na Tables Generator.

Práce s HTML a CSSEditovat

Převod z formátu HTMLEditovat

Máte-li již zpracovanou tabulku ve formátu HTML nebo ve formátu, který do HTML můžete převést, mohl by se hodit HTML to Wiki Tool. Skript jednoduše převede zápis tabulky v HTML do wiki syntaxe - z hlediska práce s Wikipedií se jedná rozhodně o čistší způsob uchovávání informací. Tato pomůcka není funkční pro html formát tabulek generovaný prostřednictvím aplikace Microsoft Excel.

Předdefinované třídy CSSEditovat

Můžete použít CSS třídu (class) wikitable, případně ještě sortable.

Nepoužívejte složité styly nebo grafické úpravy, pokud to není zcela nezbytné. V naprosté většině případů si vystačíte s předdefinovanými třídami. Jednotný vzhled Wikipedie je důležitý!


OdkazyEditovat

Související článkyEditovat

Externí odkazEditovat