0 Kč s DPH

Formátování tabulek v inPage

V šablonách našeho redakčního systému inPage máte k dispozici již předem nastavený styl vzhledu tabulek. Ten se liší v závislosti na tom, jakou šablonu pro webovou prezentaci využíváte. V administraci webu však máte k dispozici hned několik možností, jak styl vzhledu tabulek změnit. V tomto návodu si ukážeme jak jednoduše styl tabulky změnit, aby odpovídal přesně vašim potřebám.

Nemáte-li zatím žádné zkušenosti s tvorbou tabulek v administraci inPage, doporučujeme si projít článek Tvorba tabulky ve WYSIWYG editoru.

Responzivní šablony One, Slide, Hanami

Responzivní šablony využívají knihovnu stylů Bootstrap, v rámci které lze tabulky upravovat. Administrace je pro tyto šablony přizpůsobena, takže i samotné formátování tabulek je jednoduché.

Šablona Hanami má více možností stylu tabulky viz článek Předformátovaný styl tabulky - šablona Hanami

Formátování s pomocí WYSIWYG editoru

Vytvořte si tabulku a v panelu nástrojů vyberte Tabulka → Vlastnosti tabulky. V poli třída pak vyberte styl. Výsledný vzhled tabulky si zobrazte na webové stránce. V editoru se formátování neprojeví.

Nastavení tabulky

Nastavení vzhledu tabulky ve vlastnostech

Příklady použití:

<table class="table"> -  je základní styl pro tabulky

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

<table class="table table-striped"> - střídavé zvýraznění řádků

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

<table class="table table-bordered"> - ohraničení tabulky

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

<table class="table table-striped table-bordered"> - kombinace dvou předchozích možností

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

<table> - bez použití formátování

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

Úprava přímo ve zdrojovém kódu

Využít lze i další možnosti formátování, ty je ale třeba vepsat přímo do zdrojového kódu tabulky.

Klikněte do tabulky a vyberte v liště nástrojů Zdrojový kód (špičaté závorky). Otevře se vám okno se zdrojovým kódem a aktivním řádkem, kde jste umístili kurzor. Najděte kód <table class="table ..., kde budete upravovat třídu dle příkladů níže.

Úprava vzhledu tabulky v HTML kódu

Příklady použítí:

<table class="table table-hover"> - efekt při přejetí řádku

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

<table class="table table-condensed"> - tabulka s užšími řádky

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

<table class="table table-bordered table-condensed table-hover table-striped"> - kombinace více vlastností

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

Šablony Eris a starší

Šablony Eris a starší mají také připravený vzhled pro tabulku. Nelze jej však nastavit ve vlastnostech tabulky v nástrojích editoru. Použití je opět závislé na přímé úpravě zdrojového kódu, jak již bylo popsáno výše. Vytvořte si tedy tabulku, klikněte do tabulky a vyberte nástroj Zdrojový kód. V HTML kódu najděte tag <table>, kde přidáte třídu tabulka.

<table class="tabulka">

Úprava tabulky ve starších šablonách

Vzhled tabulky se pak liší dle použité šablony.

Tým inPage
info(zav)inpage.cz

Přidat komentář