0 Kč bez DPH
  • WYSIWYG verze 3.5
    • Návod je vytvořen ve WYSIWYG editoru verze 3.5 Více »

Předvytvořený vzhled tabulky

11. 11. 2009

Určitě jste již několikrát chtěli vytvořit pěknou tabulku pro svoje stránky a možná jste si pokládali otázku, jak se to v inPage vlastně dělá? Již jsme se věnovali formátování tabulky přes editor a tvorbě tabulky, víte tedy jak se taková tabulka vkládá, jak jí nastavit pozadí nebo barvu ohraničení.

Tento návod na úpravu tabulek je určen především pro šablony ERIS a starší, které nepodporují předformátovaný styl tabulek frameworku Bootstrap.

Protože to pro někoho nemusí být úplně pohodlné, rozhodli jsme se vám vzhled (styl) pro tabulky předvytvořit a sepsat návod, jak jej nastavit ve starém i novém WYSIWYG editoru.

Princip je poměrně jednoduchý.

Starší verze WYSIWYG editoru

Nejprve si vytvořte tabulku, naplňte ji daty, případně zvolte hlavičku tabulky. Nyní nastavíme třídu tabulky. Označte si tabulku kliknutím myši a vyberte v nástrojích ikonku tabulky .

Předposlední položkou hlavního nastavení tabulky je třída, zde vyberte hodnotu Tabulka a nastavení uložte.

Záhlaví tabulky

Pro lepší přehlednost můžete tabulce nastavit záhlaví. Klikněte do prvního řádku tabulky a zvolte vlastnosti řádku. Typ řádku nastavíte na hlavička tabulky.

Nová verze WYSIWYG editoru 4.1

S novým WYSIWYG editorem verze 4.1 se postup pro nastavení třídy změnil. Nový editor neumožňuje vybrat styl ve vlastnostech tabulky. Pro jeho použití je třeba upravit zdrojový kód tabulky.

Vytvořte si tedy tabulku, naplňte ji daty a nastavte hlavičku tabulky. Poté si zobrazíme zdrojový kód (Nástroje -> Zdrojový kód) a vyhledáme kód tabulky, který začíná značkou <table>. Do této značky přidáme atribut class="tabulka" , čímž aplikujeme styl na tabulku.

Předvytvořený vzhled tabulky - zdrojový kód

Úpravu odsouhlasíme a stránku uložíme. Výsledek můžeme vidět v náhledu stránky.

Příklady tabulek

První tabulka je bez záhlaví, druhá se záhlavím. Vzhled tabulky se liší v závislosti na použité šabloně.

Společnost Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.6 45.2 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
Společnost Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.6 45.2 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

Přidat komentář

Přehled komentářů

  • Tabulka

    17. 3. 2014 19:23:35 | Karel Křivák

    Dobrý den, tabulky dělat umím, ale na stránkách inpage nejsem schopen vytvořit alespoň trochu solidní tabulku, kterou bych mohl upravit, dále s ní pracovat. To, co popisujete, se mi vůbec nezobrazuje. dík za radu.

    Odpovědět

  • RE: Tabulka

    19. 3. 2014 11:45:38 | Vladimír Souš

    Dobrý den pane Křiváku,
    napište mi název vašich stránek, klidně do soukromé zprávy a společně se podíváme, co vám dělá problém.

    Odpovědět

  • Tabulka

    22. 8. 2014 22:30:05 | Jaroslav Pochman

    Dobrý den,
    prosím o radu, mám stejný problém viz víše.

    Odpovědět

  • Re: Tabulka

    2. 9. 2014 15:24:56 | Vladimír Souš

    Pane Pochmane, prosím pošlete mi název Vašich stránek buď sem do komentářů, případně na admin@zoner.cz. Děkujeme, podpora inPage

    Odpovědět

  • Rozdělení buňky

    28. 11. 2018 15:05:28 | Čestmír Mázl

    Mám dotaz ohledně html tabulky potřeboval bych jak mohu rozdělit jednu buňku na více částí

    Odpovědět