0 Kč s DPH

Předformátovaný styl tabulky

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

Šablona Hanami využívá framework Bootstrap obsahující knihovnu přednastavených stylů, kterou použijeme při úpravách tabulky. Bootstrap jsme doplnili o kód, který na menších monitorech řadí logickou posloupností sloupce pod sebe. Tabulky díky tomu i na mobilních zařízeních zobrazíte přehledně bez horizontálního posuvníku. 

Nejprve si vytvoříme tabulku, v menu vybereme položku Tabulka → vložit tabulku a vybereme počet polí. 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 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="tabulka". Akci potvrdíme.

Výsledný řádek bude vypadat takto:

<table class="tabulka">
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 různě je kombinovat.

Neohraničené sloupce

Potřebujete-li zachovat logiku tabulky, ale zobrazovat chcete pouze data ve sloupcích stejné šířky a bez ohraničení, přidejte tabulce třídu col. Vizuálně toto řešení odpovídá bootstrapovým třídám sloupců, například col-md-3. Pro netabulková data doporučujeme použít právě je, viz Dlaždice na úvodní stránce.

<table class="tabulka col">
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

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

<table class="tabulka 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é buňky

<table class="tabulka 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

Zvýřaznění řádku při přejetí myší

<table class="tabulka 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

Užší řádky

<table class="tabulka 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="tabulka 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
Responsivní chování předdefinovaných tabulek šablony Hanami si můžete prohlédnout přímo na její stránce: Hanami - formátování textu.

Tým inPage
admin(zav)zoner.cz

Přidat komentář

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