Preskočiť na obsah

Pomoc:Tabuľky

z Wikipédie, slobodnej encyklopédie
Vrátiť sa Pomoc:Obsah


Tabuľky slúžia na prehľadné zhrnutie informácií, ktoré spolu sémanticky súvisia. Mali by sa používať v prípade, keď je potrebné dáta nejakým spôsobom zoradiť, napríklad podľa roku, či abecedy.

Tabuľky sú komplikovanejšie ako jednoduchý text a mali by sa preto používať len v odôvodnených prípadoch. Pred použitím tabuľky sa uisti, či sa informácie, ktoré chceš čitateľom poskytnúť, nedajú zhrnúť v zozname.

Základy

[upraviť | upraviť zdroj]

Každá tabuľka vo wikipédii sa začína zloženou zátvorkou {, za ktorou nasleduje zvislá čiara | a končí sa zvislou čiarou | a zloženou zátvorkou }. Zvislá čiara tvorí tiež začiatok každého nového riadku tabuľky.

Jednoduché tabuľky

[upraviť | upraviť zdroj]

Každý riadok tabuľky sa začína zvislou čiarou |. Za ňou nasleduje buď obsah bunky, alebo atribúty (napr. rowspann - pozri ďalej).

Kód tabuľky zloženej z dvoch stĺpcov a jedného riadka vyzerá nasledovne:

Kód Výsledok

{|
|Bunka 1
|Bunka 2
|}

Bunka 1 Bunka 2

Upozornenie:

{| |Samostatná bunka |}

sa nedá použiť!

Tabuľky s viacerými riadkami

[upraviť | upraviť zdroj]

V článkoch však budeme samozrejme potrebovať viacriadkové tabuľky. Začiatok nového riadka vyznačujeme zvislou čiarou a pomlčkou |-.

Kód Výsledok

{|
|Bunka 1
|Bunka 2
|-
|Bunka 3
|Bunka 4
|}

Bunka 1 Bunka 2
Bunka 3 Bunka 4

Kód trojriadkovej tabuľky môže vyzerať takto:

{|
|Bunka 1
|Bunka 2
|-
|Bunka 3
|Bunka 4
|-
|Bunka 5
|Bunka 6
|}

A tabuľka potom vyzerá takto:

Bunka 1 Bunka 2
Bunka 3 Bunka 4
Bunka 5 Bunka 6

Kód sa dá napísať aj ekonomickejšie ak bunky oddelíme dvoma zvislými čiarami ||:

{|
|Bunka 1||Bunka 2
|-
|Bunka 3||Bunka 4
|-
|Bunka 5||Bunka 6
|}

Zložité tabuľky

[upraviť | upraviť zdroj]

Orámovanie

[upraviť | upraviť zdroj]

Naše tabuľky doteraz neboli orámované. Druh orámovania tabuľky určíme už v prvom riadku kódu (hneď za {|). Hrúbku rámčeku stanovíme parametrom border="x", pričom x určí hrúbku orámovania.

Kód predošlého príkladu s orámovaním vyzerá takto:

{| border="1"
|Bunka 1
|Bunka 2
|-
|Bunka 3
|Bunka 4
|-
|Bunka 5
|Bunka 6
|}

a vyzerá takto:

Bunka 1 Bunka 2
Bunka 3 Bunka 4
Bunka 5 Bunka 6

S parametrom border="3" bude vyzerať takto:

Bunka 1 Bunka 2
Bunka 3 Bunka 4
Bunka 5 Bunka 6

Hlavička tabuľky

[upraviť | upraviť zdroj]

Hlavičku v tabuľke dosiahneme tak, že začiatok tých buniek, ktoré majú tvoriť hlavičku, označíme namiesto "|" s "!":

Kód Výsledok

{| border="1"
!Čo
!Prečo
|-
|Bunka 1
|Bunka 2
|-
|Bunka 3
|Bunka 4
|-
|Bunka 5
|Bunka 6
|}

Čo Prečo
Bunka 1 Bunka 2
Bunka 3 Bunka 4
Bunka 5 Bunka 6

Rowspanning a Colspanning

[upraviť | upraviť zdroj]

Vo Wiki-syntaxi sa dá dosiahnuť podobný výsledok ako pri kódovaní v jazyku HTML. Aj tu sa môže bunka rozprestierať cez niekoľko riadkov či stĺpcov. Na to nám slúžia rowspan a colspan. Pri písaní kódu tabuľky najprv uvedieme atribúty tabuľky a následne jej obsah.

Kód tabuľky obsahujúcej jednu bunku rozprestierajúcu sa cez dva stĺpce vyzerá takto:

Kód Výsledok

{| border="1"
!A
!B
!C
|-
|Bunka 1
| colspan="2" align="center" | Bunka 2
|-
|Bunka 3
|Bunka 4
|Bunka 5
|}
A B C
Bunka 1 Bunka 2
Bunka 3 Bunka 4 Bunka 5

Prázdne bunky v orámovanej tabuľke

[upraviť | upraviť zdroj]

Prázdne bunky nie sú v tabuľke orámované. V prípade, že chceme mať orámované aj prázdne bunky, musíme namiesto obsahu bunky zadať HTML kód  . Za normálnych okolností vyzerá tabuľka s prázdnymi bunkami takto:

bez  
Bunka 1 Bunka 2
Bunka 9 Bunka 12
Bunka 13 Bunka 14 Bunka 15 Bunka 16

Tá istá tabuľka, ktorej obsah buniek predstavuje HTML kód:

{| border="1"
!colspan="4" align="center"|'Nadpis'
|-
| Bunka 1
| Bunka 2
|  
|  
|-
|  
|  
|  
|  
|-
| Bunka 9
|  
|  
| Bunka 12
|-
| Bunka 13
| Bunka 14
| Bunka 15
| Bunka 16
|}

a vyzerá takto:

s  
Bunka 1 Bunka 2    
       
Bunka 9     Bunka 12
Bunka 13 Bunka 14 Bunka 15 Bunka 16

Tabuľka v tabuľke

[upraviť | upraviť zdroj]

V článkoch Wikipédie je možné tvoriť aj tabuľky v tabuľke. Stačí vložiť ďalšiu zloženú zátvorku a zvislú čiaru. Vo vloženej tabuľke však netvorí začiatok riadka zvislá čiara. Kód takejto "dvojtabuľky" vyzerá takto:

{| border="1"
|Bunka 1
|
{| border="2"
|Bunka A
|-
|Bunka B
|}
|Bunka 3
|}

a výsledok je takýto:

Bunka 1
Bunka A
Bunka B
Bunka 3

Názov tabuľky

[upraviť | upraviť zdroj]

Vo Wikipédii je tiež možné dať tabuľke názov. Popisok je automaticky vycentrovaný a jeho maximálna šírka je zhodná so šírkou tabuľky. Ak je názov tabuľky dlhší, zobrazí sa zalomený do viacerých riadkov. Pre použitie názvu stačí zadať po zvislej čiare + a následne text názvu. Text sa dá ľubovoľne formátovať pomocou Wiki syntaxe.

Kód pomenovanej tabuľky vyzerá takto:

Kód Výsledok

{| border="1"
|+ Toto je ''príliš'' dlhý názov tabuľky.
|Bunka 1
|Bunka 2
|-
|Bunka 3
|Bunka 4
|}

Toto je príliš dlhý názov tabuľky.
Bunka 1 Bunka 2
Bunka 3 Bunka 4

Formátovanie tabuľky

[upraviť | upraviť zdroj]

Tabuľky môžu byť farebné, môžu mať rôzne druhy orámovania, bunky môžu byť rôzne široké a pod. Vo Wikipédii formátujeme tabuľky pomocou CSS.

Šírka stĺpcov

[upraviť | upraviť zdroj]

Širku stĺpcov môžeme naformátovať relatívne alebo absolútne. Formát stačí zadať pri prvej bunke každého stĺpca.

Kód Výsledok

{| border="1"
! width="33%" | 10 %
! width="33%" | 20 %
! width="34%" | 40 %
|-
|A
|B
|C
|}

10 % 20 % 40 %
A B C

{| border="1"
! width="50" | 50
! width="100" | 100
! width="200" | 200
|-
|A
|B
|C
|}

50 100 200
A B C

Odstup medzi bunkami pomocou cellspacing a cellpadding

[upraviť | upraviť zdroj]

Pomocou cellspacing môžeme stanoviť vzdialenosť medzi bunkami. Čím vyššiu hodnotu zadáme, tým bude priestor medzi bunkami širší. Cellpadding zasa určuje vzdialenosť obsahu bunky od jej rámčeka.

Kód Výsledok

{|
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="0"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

Zarovnanie textu

[upraviť | upraviť zdroj]

Obsah jednotlivých buniek môžeme ľubovoľne zarovnávať. Môžeme zarovnať obsah jednotlivých buniek, ale aj celých riadkov. Na zarovnanie textu v riadkoch nám slúži atribút valign a na zarovnanie textu v bunke zasa align.

Kód Výsledok

{| border="1" cellspacing="0"
!
! align="left" | doľava
! align="center" | na stred
! align="right" | doprava
|- valign="top"
! height="38" | nahor
| align="left" | xx
| align="center" | xxx
| align="right" | xx
|- valign="middle"
! height="38" | na stred
| align="left" | x
| align="center" | x
| align="right" | x
|- valign="bottom"
! height="38" | nadol
| align="left" | x
| align="center" | x
| align="right" | x
|}

doľava na stred doprava
nahor xx xxx xx
na stred x x x
nadol x x x

Iné formátovania

[upraviť | upraviť zdroj]

Wiki syntax nám umožňuje prevziať možnosti formátovania z jazyka HTML ako napríklad zafarbenie jednotlivých buniek prípadne rámčekov: (style="background:#ABCDEF", Tabuľka farieb).

Kód Výsledok

{|
| style="background:#ABCDEF" | A
|B
|-
|C
|D
|}
A B
C D

Príklady tabuliek

[upraviť | upraviť zdroj]

zdrojový kód: 

{| class="wikitable"
|- 
| ! style="background:#efefef;" | '''Rok''' || [[1828]] || [[1877]] || [[1892]] || [[1898]] || [[1900]] || [[1913]] || [[1919]] || [[1930]] || [[1940]] || [[1950]] || [[1961]] || [[1970]] 
|- ! align="center" 
| ! style="background:#efefef;" | '''Počet domov''' || 83 || 163 || 151 || 154 || 158 || 172 || 166 || 196 || 216 || 232 || 274 || 313 
|}

a takto tabuľka vyzerá:

Rok 1828 1877 1892 1898 1900 1913 1919 1930 1940 1950 1961 1970
Počet domov 83 163 151 154 158 172 166 196 216 232 274 313

zdrojový kód: 

{| class="sortable wikitable" style="font-size: 85%; text-align: center; width: auto;"
| ! style="background:#efefef;" | '''Auto''' ||'''Rok'''
|- ! align="center" 
| ! style="background:#efefef;" |[[Cadillac CTS-V]]||2006
|- ! align="center" 
| ! style="background:#efefef;" |[[Camaro SS]]||1967
|- ! align="center" 
| ! style="background:#efefef;" |[[Camaro Concept]]||2008
|}

takto vyzerá tabuľka:

Auto Rok
Cadillac CTS-V 2006
Camaro SS 1967
Camaro Concept 2008

Externé odkazy

[upraviť | upraviť zdroj]
  • m:Help:Sorting (anglicky) – podrobný návod na zoraditeľné dáta v tabuľke
Zdroj: „https://sk.wikipedia.org/w/index.php?title=Pomoc:Tabuľky&oldid=7427832“