Tabulky
Tabulky se na poradme.se vytvářejí pomocí značkovacího jazyka, zejména znaku svislá čára, svislice, také lidově svislítko: | . Tabulka může mít nad sebou titulek a zvolený počet sloupců a řádků, které mohou být 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 poradme.se 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á.
Obsah
Základní syntaxe tabulek
Tabulka má tuto základní strukturu:
{| parametry obsah|}
Mezi {| a parametry musí být mezera.
Parametry jsou nepovinné a určují vlastnosti celé tabulky, další parametry se pak mohou vkládat i do obsahu (buněk) tabulky. Jednotlivé parametry není třeba uzavírat do uvozovek, do zdrojového kódu je automaticky doplní systém.
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.
- Zápis jednoduché tabulky
{|
|+ 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
|}
- Výsledek v článku
| 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ňky se mohou oddělovat (HTML tag TD) 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 se blíží tomu ve výsledné 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
Každá buňka musí tedy být uvozena buď
- odřádkováním a svislicí ( | na začátku řádku) anebo
- dvojicí svislic ( || ) v pokračování na řádku kódu.
Parametry lze určovat i u jednotlivých buněk. Vloží se hned za značku začátku buňky a ukončí se svislicí.
| parametry | buňka
Buňky s parametry zapsané do řádku pak vypadají takto:
| parametry a | buňka A || parametry b | buňka B || parametry c | buňka C
Nový řádek. První řádek tabulky (HTML tag TR) je vygenerován automaticky. Začátek dalšího řádku je třeba vyznačit
|-
Parametry řádku se připojí takto:
|- parametry
Záhlaví sloupců (HTML tag TH) se zapisuje 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í sl. B !! Záhlaví sl. C
Stejně jako u ostatních buněk lze zapsat každé záhlaví na nový řádek:
! Záhlaví sloupce A
! Záhlaví sl. B
! Záhlaví sl. C
Parametr je od vlastního záhlaví oddělován standardně svislicí, nikoli vykřičníkem:
! parametry | Záhlaví
Titulek tabulky (HTML tag CAPTION) se vytvoří pomocí:
|+ Titulek tabulky
Parametry se připojí takto:
|+ parametry | Titulek tabulky
Příklad
{|
|+ '''Toto je titulek.''' Příklad z tabulky pro CHKO Beskydy
| Vyhlášena || {{Datum|5|3|1973}}
|-
| Mapa || {{Openstreetmaps-cislo|2006951}}
|-
|}
což se zobrazí jako:
| Vyhlášena | 5. března 1973 |
| Mapa |
Předdefinované tabulky
Jednoduchá tabulka
Pro standardní tabulky je vhodné využít předdefinovanou jednoduchou, slabě zarámovanou tabulku o libovolném počtu sloupců a řádek. Stačí jako parametr tabulky uvést class="wikitable" . Například:
{| class="wikitable"
|+ Označení položek
! AAA !! BBB !! CCC
|-
| A1 || B3 || C11
|-
| A2 || B2 || C10
|-
| A3 || B1 || C12
|-
|}
se zobrazí jako
| AAA | BBB | CCC |
|---|---|---|
| A1 | B3 | C11 |
| A2 | B2 | C10 |
| A3 | B1 | C12 |
Tabulka s volitelným řazením
Lze také vytvářet tabulky, které si čtenář může řadit dle vybraného sloupce kliknutím na jeho záhlaví. Jednoduše použijeme předdefinovanou tabulku wikitable sortable. Pokud v předchozím příkladu takto:
{| class="wikitable sortable"
upravíme parametr tabulky, získáme:
| AAA | BBB | CCC |
|---|---|---|
| A1 | B3 | C11 |
| A2 | B2 | C10 |
| A3 | B1 | C12 |
U tabulky s řazením lze použít parametry, určující které sloupce mají zůstat bez řazení a kde končí oblast řazení:
| 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,- |
Zdrojový kód ukázky:
{|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,-
|}
- Parametr
class="unsortable"|v záhlaví vynechá nežádoucí řazení podle počtu kusů. - Parametr
class="sortbottom"před posledním řádkem ukončí oblast řazení, aby celková cena zůstala na posledním řádku.
Řazení čísel podle velikosti
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í
Zarovnání textu
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ý). V případě, že není použit předdefinovaný styl (např. class="wikitable"), tak lze použít i pro celou tabulku (pak určuje zarovnání tabulky na stránce).
- Vodorovné zarovnání
Pro horizontální zarovnání textu v buňkách tabulky se používá parametr align (angl. zarovnat):
-
align="left"– vlevo (výchozí) -
align="center"– na střed -
align="right"– vpravo
- Svislé zarovnání
Pro vertikální zarovnání textu se používá podobný parametr valign (v[ertical] align):
-
valign="top"– nahoře -
valign="middle"– uprostřed (výchozí) -
valign="bottom"– dole
| 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
| align="center" | data
| align="right" | data
|-
! zarovnání <br /> nahoru
| valign="top" | data
| valign="top" align="center" | data
| valign="top" align="right" | data
|-
! zarovnání <br /> dolů
| valign="bottom" | data
| valign="bottom" align="center" | data
| valign="bottom" align="right" | data
|-
! Zarovnání řádku
! vpravo
! vpravo
! vpravo
|- valign="bottom" align="right"
! celý řádek zarovnaný <br /> dolů a doprava
| data || data || data
|- valign="bottom" align="right"
! stejný řádek <br /> jedna buňka s parametry
| data
| valign="top" align="left" | s parametry
| data
|}
Slučování buněk
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".
| řá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
Do jedné tabulky lze vložit druhou tabulku, např.:
data A tabulky 1
|
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
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řevod tabulek do formátu vhodném na poradme.se
Pro převod tabulek z programů jako 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 (oddělený čárkami) a použít převaděč csv2wp.
Práce s HTML a CSS
Převod z formátu HTML
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
Můžete použít CSS třídu (class) wikitable, případně ještě sortable (pro tabulku s možností seřazení podle libovolného sloupce).