Tabulka, zjednodušená verze s omezenými možnostmiObsah kapitolyPřipomínám, že pro použití nástrojů k úpravě vkládaného textu je lhostejné, zda nejprve tu část textu, kterou chcete upravit, vyberete, a potom použijete příslušný nástroj, nebo naopak nejprve použijete editační nástroj, a teprve poté "dovnitř" vepíšete či vložíte váš text.
Tabulka, základní variantaTi z vás, kdo znají html, ví, že pro vytvoření tabulky a doladění jí k obrazu svému, je v tomto jazyku k dispozici řada tagů, z nichž ty mají ještě parametry. Já se ovšem rozhodl do phpBB fóra Pedonia implementovat prostřednictvím BBCode jen to opravdu nejnutnější. Nenaskýtá se tak sice mnoho možností pro estetické úpravy, ale na druhou stranu je takto vytvoření tabulky velmi prosté.
Odpovídající BBCode:
- tab_tab (označení, kde tabulka začíná a kde končí),
- tab_row (označení, kde začíná a kde končí řádek tabulky),
- tab_cell (označení, kde začíná a kde končí obsah buňky)
Syntaxe:
Kód: Vybrat vše
[Tab_tab=kód_vertikálního_odsazení_od_textu_nad tabulkou][/Tab_tab]
[Tab_row][/Tab_row]
[Tab_cell=horizontální_zarovnání_obsahu_buňky: left, center, right, justify][/Tab_cell]BBCode pro vytvoření tabulky naleznete v komboboxu "Custom BBCodes".
Tabulka nad sebou dynamicky vytváří vertikální odsazení od objektu či textu nad ní. Tento prostor je tím větší, čím má tabulka více řádků a čím ty jsou vyšší. Ve výsledku tento volný prostor nevypadá dobře, proto jej omezuje parametr BBCode "tab_tab". Jde o nezáporné číslo v pixelech, které čím je větší, tím je vertikální odsazení menší. Při tvorbě tabulky je toto nutno vyzkoušet. Jako první "nástřel" použijte hodnotu podle vzorce 20 x (počet_řádků + 1).
Tabulka pod sebou vynechává jednu řádku.
Tabulka je automaticky horizontálně vycentrovaná (a nelze to ovlivnit pomocí BBCode "left", "right" apod.).
Šířka buněk sloupce je automaticky nastavena podle nejširší buňky ve sloupci, výška buněk je automaticky nastavena podle nejvyšší buňky na řádku. Šířka celého řádku včetně ohraničení buněk nesmí být větší než 698 px. Výška řádku není omezena.
Příklad č. 1Tabulka o dvou sloupcích a dvou řádcích, čili 2 x 2, kde text buněk je po řadě Buňka A, Buňka B, Buňka C, Buňka D. Zarovnání textu vlevo. Tabulka bude mít v tomto příkladu hodnotu parametru BBCode "tab_tab" rovnu nule (tj. nekorigujeme volný prostor nad tabulkou). Všimněme si vertikálního odsazení tabulky od tohoto textu.
| Buňka A |
Buňka B |
| Buňka C |
Buňka D |
Kód příkladu č. 1
Kód: Vybrat vše
[tab_tab=0][tab_row][tab_cell=left]Buňka A[/tab_cell]
[tab_cell=left]Buňka B[/tab_cell][/tab_row]
[tab_row][tab_cell=left]Buňka C[/tab_cell]
[tab_cell=left]Buňka D[/tab_cell][/tab_row][/tab_tab] Příklad č. 2Tabulka o dvou sloupcích a dvou řádcích, čili 2 x 2, kde text buněk je po řadě Buňka A, Buňka B, Buňka C, Buňka D. Zarovnání textu vlevo. Tabulka bude mít v tomto příkladu hodnotu parametru BBCode "tab_tab" nastavenu na 60 (tj. dle výše uvedeného doporučení, neb 20 x (2 + 1) = 60). Čím více řádků tabulka má, tím větší je odchylka od tohoto jednoduchého pravidla (pro odsazení tabulky o 6 řádcích je vhodnější místo vypočteného parametru 140 použít parametr 180 či 190). Všimněme si vertikálního odsazení tabulky od tohoto textu.
| Buňka A |
Buňka B |
| Buňka C |
Buňka D |
Kód příkladu č. 2
Kód: Vybrat vše
[tab_tab=60][tab_row][tab_cell=left]Buňka A[/tab_cell]
[tab_cell=left]Buňka B[/tab_cell][/tab_row]
[tab_row][tab_cell=left]Buňka C[/tab_cell]
[tab_cell=left]Buňka D[/tab_cell][/tab_row][/tab_tab] Tabulka, různá vylepšení- Odsazení dat od horizontálního ohraničení buňky
Alespoň z mého pohledu největším estetickým prohřeškem až "na dřeň" zjednodušené implementace tabulky, kterou jsem v našem fóru realizoval, je to, že vlastní data jsou "nalepena" na ohraničení buněk. Celek v případě textových dat nevypadá příliš dobře. Jenže pokud do tabulky místo textu vložíme obrázek, což je třeba případ galerie náhledů, potom naopak tuto vlastnost velice oceníme. Jak spojit tyto protichůdné požadavky? Rozhodl jsem se BBCode tabulky nekomplikovat a pro odsazení, pokud jej požadujeme, použít "obchvat" přes BBCode "char".
Zde budiž prozatím řečeno pouze to, že BBCode "char" slouží k vložení speciálních znaků. My jej v daném kontextu použijeme pro vkládání znaku "nezalomitelná mezera". Na rozdíl od běžné mezery, tento znak není nikdy programem fóra ignorován, ale byť je neviditelný, je akceptován jako běžná součást textu. Tedy tam, kde chceme mít odsazení, vložíme "nedělitelnou mezeru".
Kód BBCode "char" s "nedělitelnou mezerou" (jejíž nápis zní "nbsp") je Tento kód vložíme na tu stranu textu ve všech buňkách, na které jsou buňky zarovnány. Na protilehlé straně stačí vložení k (jednomu) nejdelšímu textu v buňkách sloupce, u odoustranného zarovnání je nutno vložení na obě strany.
Příklad č. 3
Tabulka o dvou sloupcích a dvou řádcích, čili 2 x 2, kde text buněk je po řadě Buňka A, Buňka B, Buňka C, Buňka D. Zarovnání textu vlevo.
| Buňka A |
Buňka B |
| Buňka C |
Buňka D |
Kód příkladu č. 3Kód: Vybrat vše
[tab_tab=60]
[tab_row]
[tab_cell=left][char]nbsp[/char]Buňka A[char]nbsp[/char][/tab_cell]
[tab_cell=left][char]nbsp[/char]Buňka B[char]nbsp[/char][/tab_cell]
[/tab_row]
[tab_row]
[tab_cell=left][char]nbsp[/char]Buňka C[/tab_cell]
[tab_cell=left][char]nbsp[/char]Buňka D[/tab_cell]
[/tab_row]
[/tab_tab]
Komentář:
V příkladu bylo u všech buněk nastaveno zarovnání obsahu vlevo, tj. "tab_cell=left", proto texty všech buněk začínají "nezalomitelnou mezerou". Shodou okolností jsou všechny texty stejně dlouhé, proto u prvního sloupce ("Buňka A" a "Buňka C") musí být "nezalomitelná mezera" na konci textu alespoň v jedné z buněk "A" nebo "C". Analogicky pro konce textu v druhém sloupci ("B" a "D"). Pokud by texty nebyly stejně dlouhé, pak by při zarovnání obsahu buněk vlevo stačilo na pravém konci textů umístit "nedělitelnou mezeru" právě na konci nejdelšího slova.
- Vytvoření hlavičky a/nebo patičky tabulky
Vzhledem k tomu, že pro taková vylepšení nemáme žádné BBCode, musíme si vystačit se zvýrazněním textu (řez písma - zejména tučné nebo barva písma).
Příklad č. 4
| Věková kategorie |
Účastníků zájezdu |
| Batolata |
0 |
| Předškolačky |
4 |
| Školačky |
8 |
| Dorostenky |
8 |
| Celkem |
20 |
Kód příkladu č. 4 Kód: Vybrat vše
[tab_tab=200]
[tab_row]
[tab_cell=left][char]nbsp[/char][b][color=#0000FF]Věková kategorie[/color][/b][char]nbsp[/char][/tab_cell]
[tab_cell=left][char]nbsp[/char][b][color=#0000FF]Účastníků zájezdu[/color][/b][char]nbsp[/char][/tab_cell][/tab_row]
[tab_row][
tab_cell=left][char]nbsp[/char]Batolata[/tab_cell]
[tab_cell=right]0[char]nbsp[/char][/tab_cell]
[/tab_row]
[tab_row]
[tab_cell=left][char]nbsp[/char]Předškolačky[/tab_cell]
[tab_cell=right]4[char]nbsp[/char][/tab_cell]
[/tab_row]
[tab_row]
[tab_cell=left][char]nbsp[/char]Školačky[/tab_cell]
[tab_cell=right]8[char]nbsp[/char][/tab_cell]
[/tab_row]
[tab_row]
[tab_cell=left][char]nbsp[/char]Dorostenky[/tab_cell]
[tab_cell=right]8[char]nbsp[/char][/tab_cell]
[/tab_row]
[tab_row]
[tab_cell=left][char]nbsp[/char][b][color=#0000FF]Celkem[/color][/b][/tab_cell]
[tab_cell=right][b][color=#0000FF]20[/color][/b][char]nbsp[/char][/tab_cell]
[/tab_row]
[/tab_tab]
Tabulka, obrázek jako obsah buňkyDo buňky tabulky můžeme pochopitelně vložit i obrázek. Pokud tak učiníme standardním způsobem, tj. pomocí BBCode "img", bude výsledek neestetický. Totiž v konečném důsledku stránku vykresluje html interpretr, a ten předpokládá, POKUD MU NEŘEKNEME NĚCO JINÉHO, že pod obrázkem bude nějaký další objekt či text, takže aby tyto části stránky, rámu, tabulky, ... na sebe nebyly nehezky nalepené, vloží pod obrázkem několik pixelů širokou mezeru. Takže ve spodní části buňky pak doslova "svítí" vynechaný proužek. Protože právě použití tabulky je účinný a přitom jednoduchý způsob, jak obrázky zarovnat vedle či pod sebe tak, jak si přejeme, implementoval jsem k danému účelu BBCode "tab_img", který právě popsanou vlastnost eliminuje, čili interpretru "řekne", že si žádné místo mimo obrázek vynechat nepřejeme.
Odpovídající BBCode: tab_img
Syntaxe:
Kód: Vybrat vše
[Tab_img=způsob_zarovnání: left, right, top, middle][/Tab_img]Ve skutečnosti je jedno, jaké zarovnání použijeme (osobně používám výhradně "left"), protože výsledkem je vždy to, že obrázek vyplní celý prostor buňky (pokud ovšem máme ve sloupci tabulky buňky stejně široké a na řádku tabulky stejně vysoké, tj. v tomto případě obrázky takto dle sloupců, resp. řádků šířkou či výškou stejné).
BBCode "tab_img" naleznete v komboboxu "Custom BBCodes".
BBCode "tab_img" by šel použít k zarovnání jednoho obrázku vůči svislým liniím oblasti vyhrazené pro příspěvek, tedy i mimo tabulku, avšak toto nedává příliš smysl, protože jednodušeji toho dosáhneme pomocí BBCode "centre", "right" apod.
Příklad č. 5Kód příkladu č. 5
Kód: Vybrat vše
[Tab_tab=60][Tab_row][Tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_01.jpg[/tab_img][/Tab_cell]
[Tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_02.jpg[/tab_img][/Tab_cell][/Tab_row]
[Tab_row][Tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_03.jpg[/tab_img][/Tab_cell]
[Tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_04.jpg[/tab_img][/Tab_cell][/Tab_row]
[/Tab_tab] Tabulka, galerie s náhledy obrázkůSmyslem používání galerií náhledů je, aby zobrazení stránky s obrázkovými příspěvky probíhalo pokud možno svižně. Nejprve se totiž načtou jen malé soubory z galerie náhledů, zatímco objemově náročnější velkorozměrové obrazy až po kliknutí, které uskutečníme na základě naší vůle, že chceme zobrazit to, co nás dle galerie náhledů zaujalo. Než tento akt naší vůle provedeme, jsou větší obrazy ukryty pomocí spojleru. Načtou se až po jeho rozbalení. Přitom se v daný okamžik rozbaluje obsah nejvýše jednoho příspěvku, zatímco při běžném způsobu by se načítaly obrazy celé strany, což může být až 20 příspěvků, neboli odhadem klidně i 200 relativně velkých souborů.
Jak lze odvodit z předchozí kapitolky, galerii náhledů vytvoříme pomocí tabulky, do jejíchž buněk vkládáme obrázky pomocí BBCode "tab_img". Všechny obrázky nemusí mít vždy stejné rozměry, ale zcela nezbytné je dodržet tato pravidla:
- Obrázky na stejném řádku tabulky musí mít stejnou výšku.
- Obrázky ve stejném sloupci tabulky musí mít stejnou šířku.
Nejjednodušší je pochopitelně situace, kdy máme všechny obrázky o stejných rozměrech. V opačném případě musíme být velmi obezřetní, protože přehození pořadí obrázků v kódu tabulky, ji zcela "rozhází".
Doporučuji, aby jednotlivé obrázkové příspěvky neobsahovaly více než 10 obrázků. Jinak totiž čtenáři ztrácí koncentraci, a záměr autora se míjí účinkem. Pokud máme k tématu velké množství obrazového materiálu, doporučuji vše rozdělit do několika příspěvků, a ty vkládat postupně, s odstupem několika dní. Aby šla vytvořit galerie náhledů snadno a stejně tak i dobře vypadala, jsou vhodné počty obrázků: 4 (2 x 2), 6 (3 x 2, méně esteticky dobře vypadá 2 x 3), 8 (4 x 2), 9 (3 x 3, toto ovšem již působí poněkud komixovým dojmem).
V případě, že máme takový počet obrázků, se kterým nejde vytvořit smysluplná tabulka, tedy 5 či 7, přičemž "nadbytečného" obrázku se nechceme v příspěvku vzdát, zvolíme jeden obrázek jako upoutávkový. S výhodou, máme-li takový, použijeme ten, který má menší šířku než ostatní, přičemž je-li to možné, doporučuji ji upravit dle textu níže.
Celý příspěvek s galerií obrázků má tyto části:
- Záhlaví čili upoutávku - maximálně jeden horizontálně vycentrovaný obraz, nejlépe takové šířky, která je součtem šířek obrázků řádku tabulky galerie plus počet ohraničení buněk řádku (tedy pro obrázky galerie široké 210 px, po dvou na řádku, vychází šířka upotávkového obrázku na 423 px). Upoutávku používáme pouze tehdy, pokud počet obrázků k zobrazení vychází na "nešikovné" číslo (5 či 7).
- Vlastní galerie - tabulka s malými obrázky, tj. náhledy velkých obrázků skrytých ve spojleru. Doporučená šířka jednotlivého obrázku je 210 px pro tabulku se dvěma sloupci, resp. 200 px pro tabulku se třemi sloupci.
- Spojler s obrazovým materiálem - čili to, kvůli čemu příspěvek vůbec vznikl. Na první (samostatnou) řádku ve spojleru doporučuji z estetického důvodu vložit nám již známý kód s "nedělitelnou mezerou", která zde zaručí odřádkování.
- Zápatí - odkazy a zdroje použitého materiálu apod.
Příklad č. 6Upoutávka
Galerie náhledůOdkazy:
odkaz 1 a zdroj 1:
www.schule-und-familie.deodkaz 2 a zdroj 2:
7-themes.comodkaz 3 a zdroj 3:
www.slupsk.plodkaz 4 a zdroj 4:
campingandcaravanningclub.co.ukodkaz 5 a zdroj 5:
abcnews.go.comKód celého příkladu č. 6
Kód: Vybrat vše
[b]Upoutávka[/b]
[centre][img]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_403.jpg[/img][/centre]
[b]Galerie náhledů[/b]
[tab_tab=60][tab_row][tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_01.jpg[/tab_img][/tab_cell]
[tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_02.jpg[/tab_img][/tab_cell][/tab_row]
[tab_row][tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_03.jpg[/tab_img][/tab_cell]
[tab_cell=left][tab_img=left]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_04.jpg[/tab_img][/tab_cell][/tab_row][/tab_tab]
[spoiler=4 obrázky ve větším rozlišení][char]nbsp[/char]
[image=698]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_01_700.jpg[/image]
[image=698]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_02_700.jpg[/image]
[image=698]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_03_700.jpg[/image]
[image=698]http://www.asceroute.com/foto_asce/bbcode/tab/Obrazek_04_700.jpg[/image][/spoiler]
Odkazy:
[url=https://www.schule-und-familie.de/assets/images/eltern-tipps/fruehling.jpg]odkaz 1[/url] a zdroj 1: [url=https://www.schule-und-familie.de/familie/familienleben-und-freizeit/naturtagebuch.html]www.schule-und-familie.de[/url]
[url=http://7-themes.com/data_images/collection/4/4455511-cute-baby-wallpapers.jpg]odkaz 2[/url] a zdroj 2: [url=http://7-themes.com/collections/cute-baby-wallpapers/]7-themes.com[/url]
[url=http://www.slupsk.pl/wp-content/uploads/2016/11/girl-1252739_960_720.jpg]odkaz 3[/url] a zdroj 3: [url=http://www.slupsk.pl/zostan-wolontariuszem-akademii-przyszlosci-58605/]www.slupsk.pl[/url]
[url=https://www.campingandcaravanningclub.co.uk/readycamp/media/ReadyCampCMS/ReadyCampMedia/Lifestyle%20and%20General%20Images/Large%20Images%201366x768/Lifestyle-General-Little-Girl-bluebells-early-spring-1366x768.jpg?width=1366&height=768&ext=.jpg]odkaz 4[/url] a zdroj 4: [url=https://www.campingandcaravanningclub.co.uk/readycamp/locations/glamping-central-england/staffordshire/alton/#section-club-site]campingandcaravanningclub.co.uk[/url]
[url=https://s.abcnews.com/images/Lifestyle/HT-toddler-cow5-cf-170127_4x3_992.jpg]odkaz 5[/url] a zdroj 5: [url=https://abcnews.go.com/Lifestyle/girl-befriends-baby-cow-lost-mom/story?id=45088386]abcnews.go.com[/url]