Nápověda: Tabulky

This page is a translated version of the page Help:Tables and the translation is 100% complete.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Esperanto • ‎Tiếng Việt • ‎Türkçe • ‎Zazaki • ‎català • ‎dansk • ‎español • ‎français • ‎italiano • ‎polski • ‎português • ‎português do Brasil • ‎română • ‎slovenčina • ‎suomi • ‎čeština • ‎русский • ‎тоҷикӣ • ‎հայերեն • ‎العربية • ‎فارسی • ‎中文 • ‎日本語 • ‎한국어
PD Poznámka: Editací této stránky souhlasíte s uvolněním svého příspěvku pod licencí CC0. Více informací se dočtete na stránce Public Domain Help Pages.
PD
Struktuře databázových tabulek MediaWiki, se věnuje Příručka:Rozložení databáze .

Toto je nápověda, jak dělat tabulky na wiki stránkách. Základním pravidlo je, obejít se pokud možno bez tabulek. Značkování tabulek totiž často komplikuje editaci stránky.[1]

Wiki značky pro tabulky

{| začátek tabulky, nezbytný
|+ hlavička tabulky, nepovinná; musí být umístěna mezi začátek tabulky a první tabulkový řádek
|- tabulkový řádek, lze vynechat pouze první řádek — wiki s ním totiž pro tento případ automaticky počítá, takže si ho přidá.
! tabulková buňka typu záhlaví, volitelná. Další buňky záhlaví, které následují na tabulkovém řádku, jsou odděleny buď dvěma vykřičníky (!!), nebo začátkem nového řádku, který začíná jedním vykřičníkem (!).
| tabulková buňka, volitelná. Další buňky, které následují na tabulkovém řádku, jsou odděleny buď dvěma svislítky (||), nebo začátkem nového řádku, který začíná jedním svislítkem (|).
|} konec tabulky, nezbytný
  • Výše uvedené značky musí začínat na novém řádku, kromě dvojitého || a !! pro případné přidání po sobě jdoucích buněk na řádek. Prázdné mezery na začátku řádku jsou však ignorovány.
  • HTML atributy. Každá značka mimo konce tabulky volitelně přijímá jeden nebo více atributů HTML. Atributy musí být na stejném řádku jako značka. Oddělte od sebe atributy pomocí jediné mezery.
    • Buňky a titulek (| nebo ||, ! nebo !! a |+) obsahující text. Oddělte tedy všechny atributy od obsahu jediným svislítkem (|). Obsah buňky může následovat na stejném řádku nebo i na následujících řádcích.
    • Značky tabulek a řádků ({| a |-) neobsahují přímo obsah. Nepřidávajte proto svislou čáru (|) do zadání jejich volitelných atributů. Pokud omylem přidáte po atributech značku tabulky nebo řádku, analyzátor jej odstraní a konečný atribut se dotkne chybného kanálu!
  • Obsah může následovat svou značku buňky na stejném řádku za případnými volitelnými atributy HTML nebo může být na řádcích pod značkou buňky. Obsah využívající označení wiki, který sám musí začínat na novém řádku, jako jsou seznamy, nadpisy nebo vnořené tabulky, musí být na svém vlastním novém řádku.
    • Svislítko (svislá čára) jako obsah. Chcete-li do tabulky vložit znak svislítko (|), použijte značku escape <nowiki>|</nowiki>.

Základy

Následující tabulka postrádá okraje a vhodné mezery, ale zobrazuje nejjednodušší strukturu tabulky vytvořenou pomocí značek wiki.

Napíšete Zobrazí se
{|
|Pomeranč
|Jablko
|-
|Chleba
|Koláč
|-
|Máslo
|Zmrzlina 
|}
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

Buňky ve stejném řádku mohou být uvedeny na jednom řádku odděleném || (dva symboly svislítka). Pokud by text v buňce měl obsahovat konec řádku, použijte raději <br/>.

Napíšete Zobrazí se
{|
|Pomeranč||Jablko||další
|-
|Chleba||Koláč||další
|-
|Máslo||Kopeček<br/>zmrzliny||a<br/>další
|}
Pomeranč Jablko další
Chleba Koláč další
Máslo Kopeček
zmrzliny
a
další

Další mezery v buňkách ve značce wiki, stejně jako ve značce wiki níže, neovlivňují skutečné zobrazení tabulky.

Napíšete Zobrazí se
{|
|  Pomeranč || Jablko || další
|-
|   Chleba || Koláč || další
|-
|   Máslo || Zmrzlina || a další
|}
Pomeranč Jablko další
Chleba Koláč další
Máslo Zmrzlina a další

V buňkách tabulky můžete také mít delší textovou nebo i složitější syntaxi wiki:

Napíšete Zobrazí se
{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

Záhlaví tabulky

Záhlaví tabulky lze vytvořit pomocí "!" (vykřičník) místo "|" (symbol svislítka). Záhlaví se ve výchozím nastavení zobrazují tučně a uprostřed sloupce.

Napíšete Zobrazí se
{|
! style="text-align:left;"| Položka
! Množství
! Cena
|-
|Pomeranč
|10
|7.00
|-
|Chleba
|4
|3.00
|-
|Máslo
|1
|5.00
|-
!Celkem
|
|15.00
|}
Položka Množství Cena
Pomeranč 10 7.00
Chleba 4 3.00
Máslo 1 5.00
Celkem 15.00
Při použití atributů jako v nadpisu „Položka“ použijte pro oddělení svislou lišta „|“. Ne vykřičník '!'.

Titulek

Titulek tabulky může být přidán na začátek jakékoli tabulky následujícím způsobem.

Napíšete Zobrazí se
{|
|+Potraviny
|-
|Pomeranč
|Jablko
|-
|Chleba
|Koláč
|-
|Máslo
|Zmrzlina 
|}
Potraviny
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

Třídy "wikitable"

Základní styl (světle šedé pozadí, ohraničení, výplň a zarovnání doleva) lze dosáhnout přidáním class="wikitable".

Napíšete Zobrazí se
{| class="wikitable"
|+Potraviny
|-
|Pomeranč
|Jablko
|-
|Chleba
|Koláč
|-
|Máslo
|Zmrzlina 
|}
Potraviny
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

HTML rozměry buněk

Pro pokročilé rozložení můžete v buňkách použít atributy HTML colspan (šířka - násobek sloupců) a rowspan (výška - násobek řádků).

Napíšete Zobrazí se
{| class="wikitable"
!colspan="6"|Nákupní seznam
|-
|rowspan="2"|Chléb a máslo
|Koláč
|Housky
|Koláček
|colspan="2"|Rohlík
|-
|Sýr
|colspan="2"|Zmrzlina
|Máslo
|Jogurt
|}
Nákupní seznam
Chléb a máslo Koláč Housky Koláček Rohlík
Sýr Zmrzlina Máslo Jogurt

HTML atributy

Do tabulek můžete přidat atributy HTML. Autoritativní zdroj o atributech HTML viz na stránce Specifikace HTML W3C v tabulkách.

Atributy pro tabulky

Umístění atributů za počáteční značku tabulky ({|) použije atributy pro celou tabulku.

Napíšete Zobrazí se
{| class="wikitable" style="text-align: center; color: green;"
|Pomeranč
|Jablko
|12,333.00
|-
|Chleba
|Koláč
|500.00
|-
|Máslo
|Zmrzlina
|1.00
|}
Pomeranč Jablko 12,333.00
Chleba Koláč 500.00
Máslo Zmrzlina 1.00

Atributy pro buňky

Atributy můžete vkládat do jednotlivých buněk (cells). Například čísla mohou vypadat lépe zarovnaná doprava.

Napíšete Zobrazí se
{| class="wikitable"
| Pomeranč
| Jablko
| style="text-align:right;" | 12,333.00
|-
| Chleba
| Koláč
| style="text-align:right;" | 500.00
|-
| Máslo
| Zmrzlina
| style="text-align:right;" | 1.00
|}
Pomeranč Jablko 12,333.00
Chleba Koláč 500.00
Máslo Zmrzlina 1.00

Atributy buněk (cell) můžete použít také v případě, že na jednom řádku uvedete více buněk. Všimněte si, že buňky jsou odděleny || a v každé buňce jsou atribut a hodnoty odděleny |.

Napíšete Zobrazí se
{| class="wikitable"
| Pomeranč || Jablko     || style="text-align:right;" | 12,333.00
|-
| Chleba || Koláč       || style="text-align:right;" | 500.00
|-
| Máslo || Zmrzlina || style="text-align:right;" | 1.00
|}
Pomeranč Jablko 12,333.00
Chleba Koláč 500.00
Máslo Zmrzlina 1.00

Atributy pro řádky

Atributy můžete také vkládat do jednotlivých řádků.

Napíšete Zobrazí se
{| class="wikitable"
| Pomeranč
| Jablko
| style="text-align:right;"| 12,333.00
|-
| Chleba
| Koláč
| style="text-align:right;"| 500.00
|- style="font-style: italic; color: green;"
| Máslo
| Zmrzlina
| style="text-align:right;"| 1.00
|}
Pomeranč Jablko 12,333.00
Chleba Koláč 500.00
Máslo Zmrzlina 1.00

Jednoduché ohraničení tabulky o jednom pixelu

Příklad okraje tabulky s jedním pixelem:

Napíšete Zobrazí se
{| border="1" style="border-collapse:collapse"
| Pomeranč
| Jablko
|-
| Chleba
| Koláč
|}
Pomeranč Jablko
Chleba Koláč

Šířka okraje

Pokud má "border-width:" (okraj-šířka) pouze jedno číslo, platí pro všechny čtyři okrajové strany:

Napíšete Zobrazí se
{|style="border-style: solid; border-width: 20px"
|
Dobrý den!
|}

Dobrý den!

Pokud "border-width:" obsahuje více než jedno číslo, jsou čtyři čísla pro 'nahoře, vpravo, dole, vlevo (Pamatujte si ve směru hodinových ručiček ↑→↓← ve směru hodinových ručiček)' :

Napíšete Zobrazí se
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
Dobrý den!
|}

Dobrý den!

Pokud existují méně než 4 hodnoty:
  • tři hodnoty, tj. top, right, bottom: pak výchozí hodnota pro left je hodnota right (druhá hodnota). Šířka je pak stejná na levé i pravé straně.
  • dvě hodnoty, tj. top, right: pak výchozí hodnota pro bottom je top (první hodnota) a left ve výchozím nastavení je přiřazena hodnota right (druhá hodnota). Šířka nahoře je pak stejná jako na spodní straně; šířka vlevo je stejná jako napravo.
  • jedna hodnota, tj. top: pak výchozí hodnota pro right je hodnota top a stejná pro bottom a left. Čtvrtá šířka je stejná a vytváří pravidelné hranice. Toto je zkratka pro psaní.

Další metodou pro definování šířek čtyř stran buňky je použití "border-left", "border-right", "border-top" a "border-bottom":

Napíšete Zobrazí se
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" 
|
Dobrý den!
|}

Dobrý den!

Atributy HTML (například "width=", "border=", "cellspacing=", "cellpadding=") nepotřebují žádnou délkovou jednotku (předpokládá se pixelová jednotka). Jsou také neplatné v HTML 5.

„Cellpadding“ slouží k nastavení prostoru mezi stěnou a obsahem buňky.[2]

Vlastnosti stylu CSS (které potlačují atributy HTML) vyžadují jednotku explicitní délky (pokud hodnota není 0), například „px“ pro pixel.

S atributy HTML a styly CSS

CSS atributy stylu lze přidávat s dalšími atributy HTML nebo bez nich.

Napíšete Zobrazí se
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
|Pomeranč
|Jablko
|-
|Chleba
|Koláč
|-
|Máslo
|Zmrzlina 
|}
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

Padding

You type You get
{|class=wikitable 
| style="padding: 10px" | Příklad style="padding:10px"
|-
| style="padding: 50px" | Příklad style="padding:50px"<br/><br/>Určete výplň na '''KAŽDÉ BUŇCE'''
|-
| style="padding:100px" | Příklad style="padding:100px"
|}
Příklad style="padding:10px"
Příklad style="padding:50px"

Určete výplň na KAŽDÉ BUŇCE
Příklad style="padding:100px"

Atributy pro titulek a záhlaví

Atributy mohou být přidány k titulku a záhlaví následujícím způsobem.

Napíšete Zobrazí se
{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|Potraviny
|-
|Pomeranč
|Jablko
|-
|Chleba
|Koláč
|-
|Máslo
|Zmrzlina 
|}
Potraviny
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

Šířka sloupce

Šířka sloupce může být přidána následovně.

Napíšete

{| class="wikitable" style="width: 85%;"
| colspan="2" | Tato šířka sloupce je 85% šířky obrazovky
|-
| style="width: 30%"| '''Tento sloupec se počítá 30% z 85% šířky obrazovky'''
| style="width: 70%"| '''Tento sloupec se počítá 70% z 85% šířky obrazovky'''
|}

Zobrazí se

Tato šířka sloupce je 85% šířky obrazovky
Tento sloupec se počítá 30% z 85% šířky obrazovky Tento sloupec se počítá 70% z 85% šířky obrazovky

Zvýraznění buněk záhlaví tabulky

Buňky záhlaví tabulky výslovně neurčují, na které datové buňky tabulky se vztahují (buňky napravo od stejného řádku nebo buňky pod nimi ve stejném sloupci). Pokud je tabulka vykreslena ve vizuálním 2D prostředí, lze ji obvykle snadno odvodit.

Pokud jsou však tabulky vykreslovány na nevizuálních médiích, můžete prohlížeči pomoci určit, která buňka záhlaví tabulky se použije na popis libovolné vybrané buňky (za účelem opakování jejího obsahu v nějakém pomocníkovi pro usnadnění přístupu) pomocí atributů scope="row" (rozsahu řádek) nebo scope="col" (rozsahu sloupců) v buňkách záhlaví tabulky. Ve většině případů s jednoduchými tabulkami použijete obor působnosti scope="col" na všech buňkách záhlaví prvního řádku a obor působnosti scope="row" v první buňce následujících řádků:

Napíšete Zobrazí se
{| class="wikitable"
|-
! scope="col"| Položka
! scope="col"| Množství
! scope="col"| Cena
|-
! scope="row"| Chleba
| 0.3 kg
| $0.65
|-
! scope="row"| Máslo
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| Celkem
| $1.90
|}
Položka Množství Cena
Chleba 0.3 kg $0.65
Máslo 0.125 kg $1.25
Celkem $1.90

Zarovnání

Zarovnání tabulky

Zarovnání tabulky je dosaženo pomocí CSS. Zarovnání tabulky je řízeno okraji. Pevný okraj na jedné straně způsobí zarovnání tabulky k této straně, pokud je na opačné straně okraj definován jako „auto“. Chcete-li zarovnat na střed plochy, měli byste nastavit oba okraje na auto

Například tabulka zarovnaná doprava:

Napíšete Zobrazí se
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
| Pomeranč
| Jablko
|-
| Chleba
| Koláč
|-
| Máslo
| Zmrzlina 
|}
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

A tabulka zarovnaná na střed:

Napíšete Zobrazí se
{| class="wikitable" style="margin: auto;"
| Pomeranč
| Jablko
|-
| Chleba
| Koláč
|-
| Máslo
| Zmrzlina 
|}
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

Tabulka plovoucí kolem textu

Pokud zarovnáte tabulku napravo nebo na levé straně stránky, text, který přijde za tabulkou, začíná na jejím konci a kolem tabulky zůstane prázdné místo. Text, který se má rozložit kolem tabulky, můžete vytvořit tak, že místo toho, aby byl zarovnán, se tabulka bude pohybovat kolem textu. Toho lze dosáhnout pomocí atributu CSS float, který může určit, zda se tabulka nachází na pravé straně nebo na levé straně. Při použití float okraje nekontrolují zarovnání tabulky a mohou být použity k určení okraje mezi tabulkou a okolním textem.

Napíšete Zobrazí se
{| class="wikitable" style="float:right; margin-left: 10px;"
| Pomeranč
| Jablko
|-
| Chleba
| Koláč
|-
| Máslo
| Zmrzlina 
|}

Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.
Pomeranč Jablko
Chleba Koláč
Máslo Zmrzlina

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Zarovnání obsahu buněk

Zarovnání obsahu buněk lze ovládat pomocí 2 různých vlastností CSS: text-align (text-zarovnat) a vertical-align (vertikálně zarovnat). text-align lze zadat v tabulce, řádku nebo jednotlivých buňkách, zatímco vertical-align lze zadat pouze v jednotlivých řádcích nebo buňkách.

Napíšete Zobrazí se
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A B C
D E F
G H I

Upozornění

Záporná čísla

Pokud spustíte buňku na novém řádku se záporným číslem se znaménkem mínus (nebo parametrem, který vyhodnocuje záporné číslo), může se vaše tabulka rozbít, protože budou analyzovány znaky |- jako označení wiki pro řádek tabulky, nikoli pro buňku tabulky. Chcete-li tomu zabránit, vložte mezeru před hodnotu (| -6) nebo použijte řádkové označení buněk (|| -6).

CSS vs. atributy

Ohraničení tabulek zadané prostřednictvím CSS namísto atributu border se nesprávně zobrazí v malé podmnožině textových prohlížečů.

Společné atributy pro sloupce, skupiny sloupců a skupiny řádků

Syntaxe MediaWiki pro tabulky v současné době nenabízí žádnou podporu pro určování společných atributů pro sloupce (s elementem HTML <col />), skupiny sloupců (prvek HTML <colgroup></colgroup>) a skupiny řádků (prvky HTML <thead></thead>, <tbody></tbody> a <tfoot></tfoot>). Tyto standardní prvky HTML nejsou akceptovány ani v jejich syntaxi HTML nebo XHTML.

Všechny řádky a buňky (záhlaví nebo data) tabulky jsou vykresleny v jedné implicitní skupině řádků (element HTML <tbody></tbody>) bez jakýchkoli atributů nebo stylů.

Tabulky a vizuální editor (VE)

Viz též: Nápověda:Vizuální editor/Uživatelská příručka

Viz Phab: T108245: "Fully support basic table editing in the visual editor". Viz seznam úkolů. Dokončené úkoly jsou obsaženy. Z technického jazyka může být obtížné zjistit, co přesně bylo vylepšeno nebo jaké funkce byly přidány. Níže prosím přidejte vysvětlující informace.

Můžete přesouvat nebo mazat sloupce a řádky

Klikněte na záhlaví sloupce nebo řádku. Poté klikněte na šipku. V rozbalovací nabídce klikněte na „Move“ (Přesunout) nebo „Delete“ (Odstranit).

Vložení prázdného řádku nebo sloupce

Ve stejném vyskakovacím menu klikněte na „Insert“ (Vložit).

Kopírování tabulky z webové stránky do Visual Editor

Je možné kopírovat a vložit tabulku z webové stránky přímo do Visual Editoru (VE). Chcete-li to provést bezpečně, použijte karanténu a zkontrolujte v tabulce správné kódování ve zdrojovém režimu wikitextu a správné zobrazení ve Visual Editoru a v režimu náhledu.

Viz též

Poznámky

  1. Tabulky se dají dělat nejenom přes wiki značky, ale i rovnou přes tabulkové elementy HTML. Na webu je plno stránek o tom, jak se dělají tabulky pomocí HTML, není tedy důvod probírat to i zde. Výhodou tabulek napsaných pomocí wiki značek je, že jsou kombinací jednoduchých znakových symbolů, takže je struktura tabulky přehlednější než u tabulky psané v HTML. A zobrazení lze při editaci snadno kontrolovat pomocí náhledu.
  2. HTML table cellpadding Attribute