Nebojte se krátkých kódu – 8. tabulky

Tabulka pomocí krátkého kódu

V případě tabulek bych neváhal zavrhnout používání nabízeného krátkého kódu. Většinu nakonec musíte vyplnit v HTML. Tady je jednoduchá tabulka vytvořená pomocí krátkého kódu. Zkuste si přepnout do tmavého režimu. Upravit, aby byl text čitelný i v tomto režimu to není snadné, natož doplnit data do tabulky.

Takhle vypadá krátký kód a vy musíte nahradit všechny výrazy mezi tagy <td> Tabulka </td> skutečnými hodnotami v jednotlivých buňkách tabulky:

[su_table responsive="yes"]<table>
<tr>
	<td>Tabulka</td>
	<td>Tabulka</td>
</tr>
<tr>
	<td>Tabulka</td>
	<td>Tabulka</td>
</tr>
</table>[/su_table]

Tabulky z nabídky bloků

Proto se přikláním k tomu, využít tabulku z nabídky bloků:

Budete vyzváni k zadání počtu sloupců a řádků. Já volil tři sloupce a tři řádky a stiskl „Vytvořit“. Řádky i sloupce můžete v budoucnu doplňovat či rušit. V pravém menu „Blok“ jsem zvolil barvu pozadí světle modro zelenou (můžete dle libosti, ale volte světlejší odstíny), V „Nastavení“ vypněte „Nastavit pevnou šířku buněk tabulky“ Zapněte „Záhlaví“ a můžete přidat i „Zápatí“, jako v mém případě. Ve „Stylech“ v pravém menu zvolte barvu textu černou. a vyzkoušejte i styl „Pruhy“

Záhlaví1	Záhlaví2	Záhlaví3
Data1	Data2	Data3
Data4	Data5	Data6
Data7	Data8	Data9
Toto je zápatí1	Toto je zápatí2	Toto je zápatí3

Tady je styl „Pruhy“. Doporučuji v menu tabulky zvolit zarovnání na střed a tady je výsledek:

Záhlaví1	Záhlaví2	Záhlaví3
Data1	Data2	Data3
Data4	Data5	Data6
Data7	Data8	Data9
Toto je zápatí1	Toto je zápatí2	Toto je zápatí3

Tabulka se stala přehlednější a mění svůj rozměr podle podle obsahu textu v buňce. A je responsivní. Doporučuji však, nevkládat do buněk příliš dlouhé texty, protože se tabulka stane na malých zařízeních nepřehlednou.

Tabulka pomocí krátkého kódu Ninja Tables

Kdo chce mít tabulky jó nóbl, doporučuji si vyzkoušet plugin „Ninja Tables„. Tady jen ukázky jak to může vypadat: