BBKód Tabulka (kompatibilní s ABBCode Box MODem)

[leschek]

BBKód Table - Tabulka

V phpBB 3.0.x lze tabulky vytvářet pomocí BBKódu Table, který je součástí MODu Advanced BBCode Box (ABBC). Bohužel s novou verzí ABBC pro phpBB 3.1.x se autor rozhodl, že BBKód Table nebude podporovat, protože není správně naformátovaný a není jednoduché ho do ABBC přidat jako vlastní BBKód.
BBKód Table jsem občas ve svém hlavním fóru použil a při přechodu na phpBB 3.1.x jsem se chtěl vyhnout předělávání tabulek (vytvořit tabulku je docela zdlouhavá záležitost), tak jsem hledal řešení, abych nemusel všechny tabulky přepisovat. Nakonec jsem našel BBKód na phpBB.com, který vypadal dobře, ale nebyl kompatibilní s formátováním tabulek v ABBC. Tento jsem použil jako základ a vytvořil následující BBKód Table, který je kompatibilní s ABBC, lze ho použít i samostatně a tabulku je možné formátovat pomocí CSS. Tabulka se vlastně skládá ze tří BBKódů, které musí být vložené v sobě:

Pozn: Následující BBKód by měl fungovat v phpBB 3.0.x a 3.1.x. Pro úpravu BBKódu pro phpBB 3.2.x se podívejte o pár příspěvků dál.

BBKód table

Použití BBKódu:

Code: Select all

[table={TEXT}]{TEXT1}[/table]

Nahrazené HTML:

Code: Select all

<table style="{TEXT}"><!-- {TEXT1} --></table>

Nápověda:

Code: Select all

Stejné jako tag <table> v html. Musí obsahovat BBKódy [tr=] a [td=]. Příklad formátování (CSS): [table=width:60%; border:1px solid #000000; text-align:center;]

BBKód tr

Použití BBKódu:

Code: Select all

[tr={TEXT}]{TEXT1}[/tr]

Nahrazené HTML:

Code: Select all

tr --><tr style="{TEXT}"><!-- {TEXT1} --></tr><!-- tr

Nápověda:

Code: Select all

Řádek tabulky - stejné použití jako tag <tr> v html. Musí být vložen do BBKódu [table=] a musí obsahovat BBKód [td=]. Příklad formátování (CSS): [tr=text-align:center;] - nemusí se formátovat

BBKód td

Použití BBKódu:

Code: Select all

[td={TEXT}]{TEXT1}[/td]

Nahrazené HTML:

Code: Select all

td --> <td style="{TEXT}">{TEXT1}</td> <!-- td

Nápověda:

Code: Select all

Buňka tabulky - stejné použití jako tag <td> v html. Musí být vložen do BBKódů [table=] a [tr=]. Příklad formátování (CSS): [td=border:1px solid #000000;]

Tipy

Při vytváření BBKódů (v administraci) vyskočí hláška, že je použitá proměnná {TEXT}, kterou budete muset potvrdit.

BBKódy tabulky musí být použity v tomto pořadí:

Code: Select all

[table=][tr=][td=]text[/td][/tr][/table]

Formátování tabulky není pro začátečníky úplně nejjednodušší, ale stačí vytvořit jednu tabulku a tu pak jde kopírovat s tím, že se jí pouze mění obsah.

BBKód lze skrýt pomocí možnosti "Zobrazit při psaní zprávy" v nastavené BBKódu.

Při nainstalovaném rozšíření ABBC pro phpBB 3.1 není třeba BBKódy skrývat, ale je u nich možné nastavit oprávnění pro ty, kdo můžou BBKód použít.

Formátování

width - šířka bloku. Např: table=width:60%; (šířka tabulky 60% šířky příspěvku).

border - vlastnosti rámečku. Např: td=border:1px solid #111111; (jednopixelový plný okraj barvy #111111). Více zde

text-align - zarovnání textu. Např: tr=text-align:center; (zarovnání textu řádku tabulky na střed). Více zde.

background-color - barva pozadí. Např: td=background-color: #262626; (barva pozadí buňky bude #262626). Více zde.

color - barva textu. Např: td=color: #FFFFFF; (v buňce bude bílý text).

Ukázka 1

Takto přidaná jednoduchá tabulka:

Code: Select all

[table=width:60%; border:1px solid #000000; text-align:center;]
[tr=][td=border:1px solid #111111;]a1[/td][td=border:1px solid #111111;]a2[/td][td=border:1px solid #111111;]a3[/td][/tr]
[tr=][td=border:1px solid #111111;]b1[/td][td=border:1px solid #111111;]b2[/td][td=border:1px solid #111111;]b3[/td][/tr]
[tr=][td=border:1px solid #111111;]c1[/td][td=border:1px solid #111111;]c2[/td][td=border:1px solid #111111;]c3[/td][/tr]
[/table]

se zobrazí takhle:

[table=width:60%; border:1px solid #000000; text-align:center;][tr=][td=border:1px solid #111111;]a1[/td][td=border:1px solid #111111;]a2[/td][td=border:1px solid #111111;]a3[/td][/tr]
[tr=][td=border:1px solid #111111;]b1[/td][td=border:1px solid #111111;]b2[/td][td=border:1px solid #111111;]b3[/td][/tr]
[tr=][td=border:1px solid #111111;]c1[/td][td=border:1px solid #111111;]c2[/td][td=border:1px solid #111111;]c3[/td][/tr][/table]
Vypadá to složitě, ale jde vlastně o to, že se formátování opakuje ve všech buňkách [td=border:1px solid #111111;].

Ukázka 2

Takto přidaná složitější tabulka (zkopírovaná z mého hlavního fóra):

Code: Select all

[table=width:95%;border:1px solid #cccccc;][tr=text-align:center;]
[td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]Další festivaly[/td][td=border:1px solid #cccccc; background-color: #262626; color: #FFFFFF;][b]Místo[/b][/td][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b]2013[/b][/td][td=border:1px solid #cccccc; background-color: #262626; color: #FFFFFF;][b]2014[/b][/td][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b]2015[/b][/td][td=border:1px solid #cccccc; background-color: #262626; color: #FFFFFF;][b]2016[/b][/td][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b]2017[/b][/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b][url=http://fotonomad.cz/forum/viewtopic.php?t=540&p866#swathi]Swathi Sangitholsavam[/url][/b][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Thiruvananthapuram
(Thiruvananthapuram Dist.)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]06-12. 01. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]06-12. 01. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b][url=http://fotonomad.cz/forum/viewtopic.php?t=540&p866#kanjiramattom_kodikuthu]Kanjiramattom Kodikuthu[/url][/b][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Kanjiramattom
(Ernakulam Dist.)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]14. 01. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]15. 01. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b][url=http://fotonomad.cz/forum/viewtopic.php?t=540&p866#arthunkal_perunnal]Arthunkal Perunnal[/url][/b][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Arthungal
(Alappuzha Dist.)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]20. 01. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]20. 01. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b][url=http://fotonomad.cz/forum/viewtopic.php?t=540&p866#navarathri]Navarathri Sangitholsavam[/url][/b][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Thiruvananthapuram
(East Fort - Thiruvananthapuram Dist)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]5-13. 10. 2013[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]25.09-03.10. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]15-23.10. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]01-10.10. 2016[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]21-29.09. 2017[/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;][b][url=http://fotonomad.cz/forum/viewtopic.php?t=540&p866#chembai_sangitholsavam]Chembai Sangitholsavam[/url][/b][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Guruvayur
(Thrissur Dist)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]28.11-13.12. 2013[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]18.11-02.12. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]08-22.11. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]25.11-10.12. 2016[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]15-30.11. 2017[/td][/tr]
[/table]

se zobrazí takhle:

[table=width:95%;border:1px solid #cccccc;][tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]Další festivaly[/td][td=border:1px solid #cccccc; background-color: #262626; color: #FFFFFF;]Místo[/td][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]2013[/td][td=border:1px solid #cccccc; background-color: #262626; color: #FFFFFF;]2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #FFFFFF;]2016[/td][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]2017[/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]Swathi Sangitholsavam[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Thiruvananthapuram
(Thiruvananthapuram Dist.)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]06-12. 01. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]06-12. 01. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]Kanjiramattom Kodikuthu[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Kanjiramattom
(Ernakulam Dist.)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]14. 01. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]15. 01. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]Arthunkal Perunnal[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Arthungal
(Alappuzha Dist.)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]20. 01. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]20. 01. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;][/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;][/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]Navarathri Sangitholsavam[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Thiruvananthapuram
(East Fort - Thiruvananthapuram Dist)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]5-13. 10. 2013[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]25.09-03.10. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]15-23.10. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]01-10.10. 2016[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]21-29.09. 2017[/td][/tr]
[tr=text-align:center;][td=border:1px solid #cccccc; background-color: #161616; color: #FFFFFF;]Chembai Sangitholsavam[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]Guruvayur
(Thrissur Dist)[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]28.11-13.12. 2013[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]18.11-02.12. 2014[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]08-22.11. 2015[/td][td=border:1px solid #cccccc; background-color: #262626; color: #CCCCCC;]25.11-10.12. 2016[/td][td=border:1px solid #cccccc; background-color: #161616; color: #CCCCCC;]15-30.11. 2017[/td][/tr][/table]
 

[Guest]

Ahoj, mám dotaz ohledně tohoto:

Při vytváření BBKódů (v administraci) vyskočí hláška, že je použitá proměnná {TEXT}, kterou budete muset potvrdit.

V administraci to tedy píše:

Code: Select all

Upozornění

BBCode, který se snažíte vytvořit obsahuje {TEXT} uvnitř HTML atributu. Tím vzniká možná bezpečnostní díra zneužitelná pomocí XSS. Nestačilo by vám použít přísnější typy {SIMPLETEXT} nebo {INTTEXT}? Pokračujte pouze tehdy, pokud jste si jisti tím, co děláte, a pokud je {TEXT} jedinou možností, kterou máte.

Vzniká tedy nějaká bezpečnostní díra? Popř. jestli ano, tak jak velká?

[leschek]

Pravděpodobně by tam mohl někdo vložit nějaký javascript nebo nějaký škodlivý kód. Toto nebezpečí se dá omezit tím, že se zakáže zobrazení těch BBKódu v editoru příspěvků, což jde v administraci při vytváření nebo úpravě BBKódu. V tomto případě by potenciální útočník musel znát tyto BBKódy a vložit je ručně. Taky je lze nazvat jinak, než jsou nazvané v tomto tématu:

Např. místo

Code: Select all

[table={TEXT}]{TEXT1}[/table]

vytvořit

Code: Select all

[tabulka={TEXT}]{TEXT1}[/tabulka]

Pokud to nikdo neuvidí, tak nikdo nebude vědět, že to existuje. Pak ovšem nebudou tyto BBKódy kompatibilní s ABBCode Box MODem.

Nakonec v ABBCode Box MODu, nebo rozšíření, je možnost nastavení používání BBKódů pro určité skupiny, třeba jen pro administrátory, což by neměl být problém, protože obvykle uživatelé tabulky nedělají.

[leschek]

V phpBB 3.2 je použita nová knihovna pro BBKódy, což má za následek, že BBKód Table popsaný v tomto tématu nebude fungovat. To zní jako hrozná novinka pro všechny, kteří pomocí něho dělají tabulky, ale není třeba zoufat, protože stačí BBKód jednoduše upravit (v administraci fóra) a tabulky budou stejně krásné jako dřív. Tato jednoduchá úprava spočívá v tom, že se z „Nahrazeného HTML“ u všech tří BBKódů, ze kterých se tabulka skládá odeberou šipky HTML komentáře tzn. tohle <!-- a tohle --> + text, který k šipkám patří, takže výsledné BBKódy budou vypadat následovně:

BBKód table

Použití BBKódu:

Code: Select all

[table={TEXT}]{TEXT1}[/table]

Nahrazené HTML:

Code: Select all

<table style="{TEXT}">{TEXT1}</table>

Nápověda:

Code: Select all

Stejné jako tag <table> v html. Musí obsahovat BBKódy [tr=] a [td=]. Příklad formátování (CSS): [table=width:60%; border:1px solid #000000; text-align:center;]

BBKód tr

Použití BBKódu:

Code: Select all

[tr={TEXT}]{TEXT1}[/tr]

Nahrazené HTML:

Code: Select all

<tr style="{TEXT}">{TEXT1}</tr>

Nápověda:

Code: Select all

Řádek tabulky - stejné použití jako tag <tr> v html. Musí být vložen do BBKódu [table=] a musí obsahovat BBKód [td=]. Příklad formátování (CSS): [tr=text-align:center;] - nemusí se formátovat

BBKód td

Použití BBKódu:

Code: Select all

[td={TEXT}]{TEXT1}[/td]

Nahrazené HTML:

Code: Select all

<td style="{TEXT}">{TEXT1}</td>

Nápověda:

Code: Select all

Buňka tabulky - stejné použití jako tag <td> v html. Musí být vložen do BBKódů [table=] a [tr=]. Příklad formátování (CSS): [td=border:1px solid #000000;]