Předformátovaný styl tabulky

3. 6. 2015

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í.

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">

Ohraničená tabulka

<table class="table table-bordered">

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

<table class="table table-hover">

Tabulka s užšími řádky

<table class="table table-condensed">

Kombinace více vlastností

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

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.