0 Kč s DPH

Předformátovaný styl tabulky

Pro šablonu ONE, je v systému inpage možné využít předformátovaný styl tabulky. V tomto článku si ukážeme jeho použití.

Šablona ONE využívá framework Bootstrap, který obsahuje knihovnu přednastavených stylů, kterou použijeme při úpravách tabulky. Nejprve si vytvoříme tabulku, v menu vybereme položku Tabulka -> vložit tabulku a vybereme počet polí.

Pro lepší přehlednost nastavte záhlaví, zápatí a vyberte hlavičkové buňky. Označíme si tedy řádek a v menu vybereme položku Tabulka -> Řádek -> Vlastnosti řádku a nastavíme typ řádku hlavička. Stejně postupujeme u hlavičkových buněk jen vybereme Buňka -> Vlastnosti buňky a vybereme typ hlavičková buňka.

Zadejme do tabulky data a můžeme začít s úpravami.

Základní styl tabulky

Jako první nastavíme tabulce základní styl. Otevřeme si okno se zdrojovým kódem Nástroje -> Zdrojový kód a vyhledáme kód tabulky začínající tagem <table>, do kterého vložíme atribut class="table" a potvrdíme.

Řádek bude tedy vypadat takto:

<table class="table">

Výsledná tabulka má pouze horizontální ohraničení a nastavené odsazení.

SpolečnostQ1Q2Q3Q4
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

Další vlastnosti

K vlastnosti table můžeme přidávat další a můžeme je různě kombinovat.

Střídání barvy v řádcích

<table class="table table-striped">

SpolečnostQ1Q2Q3Q4
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

Ohraničená tabulka

<table class="table table-bordered">

SpolečnostQ1Q2Q3Q4
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

Hover efekt při přejetí řádku

<table class="table table-hover">

SpolečnostQ1Q2Q3Q4
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

Tabulka s užšími řádky

<table class="table table-condensed">

SpolečnostQ1Q2Q3Q4
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

Kombinace více vlastností

 <table class="table table-bordered table-condensed table-hover table-striped">

SpolečnostQ1Q2Q3Q4
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

Výsledný vzhled tabulky můžete vidět v náhledu stránky na webové stránce. Tabulce je možné nastavovat i jiné vlastnosti. Jako je responsivní vlastnost či různé barvy řádků. Více předformátovaných stylů tabulky můžete nalézt na stránkách  GetBootstrap.

Petra Jordánová
Technická podpora inPage.cz
admin(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.