Nápověda:Tabulky – Wikipedie
Přeskočit na obsah
Z Wikipedie, otevřené encyklopedie
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í.
Podrobnější nápovědu naleznete na stránce
Nápověda:Tabulky ve Vizuálním editoru
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.
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 tabulek
editovat
editovat zdroj
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ňka
editovat
editovat zdroj
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
editovat zdroj
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
editovat
editovat zdroj
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
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
editovat
editovat zdroj
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é tabulky
editovat
editovat zdroj
Wikitabulka
editovat
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:
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ím
editovat
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:
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
|-
||
Toaletní papír
||
||
5,60
||
28,–
|-
||
Smirkový papír
||
||
12,–
||
36,–
|-
||
Kancelářský papír
||
100
||
0,50
||
50,–
|-
class
"sortbottom"
||
||
||
||
Celková cena: 114,–
|}
ID položky
Název
Kusů
Cena za kus
Celkem
Toaletní papír
5,60
28,–
Smirkový papír
12,–
36,–
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 velikosti
editovat
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:
ID položky
Název
Kusů
Cena za kus
Celkem
toaletní papír
9,60
48,–
kancelářský papír
12,–
36,–
smirkový papír
100
0,45
45,–
Celková cena:
129,–
Pokročilé formátování
editovat
editovat zdroj
Kaskádové styly
editovat
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
:
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í tabulky
editovat
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í textu
editovat
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:
Příklad tabulky s různě zarovnanými buňkami
Svislé zarovnání
Vodorovné zarovnání
doleva
Vodorovné zarovnání
na střed
Vodorovné zarovnání
doprava
zarovnání
nahoru
text-align:left;
vertical-align:top;
text-align:center;
vertical-align:top;
text-align:right;
vertical-align:top;
zarovnání
doprostřed
text-align:left;
vertical-align:middle;
text-align:center;
vertical-align:middle;
text-align:right;
vertical-align:middle;
zarovnání
dolů
text-align:left;
vertical-align:bottom;
text-align:center;
vertical-align:bottom;
text-align:right;
vertical-align:bottom;
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 čárku
editovat
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 následujících postupů.
Sjednocení počtu desetinných míst
editovat
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: … }}
Zboží
Cena
Položka 1
28,
50
Položka 2
36,
00
Položka 3
50,
00
Celkem:
114,
50
s kódem:
{|
class
"wikitable"
Zboží
!!
Cena
|-
Položka 1
||
style
"text-align:right"
28,
{{
padright
}}
|-
Položka 2
||
style
"text-align:right"
36,
{{
padright
:|
}}
|-
Položka 3
||
style
"text-align:right"
50,
{{
padright
}}
|-
style
"font-weight:bold"
Celkem:
||
style
"text-align:right"
114,
{{
padright
50
}}
|}
Šablona
}}
editovat
editovat zdroj
Výše uvedeným postupem doplněné nevýznamné nuly lze zneviditelnit pomocí šablony
}}
; 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ě.
Zboží
Cena
Položka 1
28,50
Položka 2
36
,00
Položka 3
50,–
Celkem:
114,50
s kódem:
{|
class
"wikitable"
Zboží
!!
Cena
|-
Položka 1
||
style
"text-align:right"
28,50
|-
Položka 2
||
style
"text-align:right"
36
{{
,00
}}
|-
Položka 3
||
style
"text-align:right"
50,–
{{
}}
|-
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.
Zboží
Cena
Položka 1
28
,50
Položka 2
36
Položka 3
50
,–
Celkem:
114
,50
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ěk
editovat
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
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 sebe
editovat
editovat zdroj
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 tabulky
editovat
editovat zdroj
Tato část nápovědy potřebuje aktualizaci, neboť obsahuje zastaralé informace.
Můžete Wikipedii pomoci tím, že ji
vylepšíte
, aby odrážela aktuální stav a
nedávné události. Podívejte se též na
diskusní stránku
, zda tam nejsou náměty k
doplnění. Historické informace nemažte, raději je převeďte do minulého času a případně přesuňte do části nápovědy věnované dějinám.
Komentář:
Doporučovaný postup není validní pro HTML5.
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 Wikitable
editovat
editovat zdroj
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 CSS
editovat
editovat zdroj
Převod z formátu HTML
editovat
editovat zdroj
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 CSS
editovat
editovat zdroj
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ý!
Odkazy
editovat
editovat zdroj
Související stránky
editovat
editovat zdroj
Formátování textu
Jak editovat stránku
Vzhled a styl
mw:Help:Sortable tables/cs
– podrobný návod na řazení tabulek
Externí odkaz
editovat
editovat zdroj
Podrobný návod o tabulkách v HTML
Citováno z „
Kategorie
Wikipedie:Formátování textu
Skrytá kategorie:
Údržba:Stránky s částí k vyjmutí
Nápověda
Tabulky
Přidat téma