0 Kč bez DPH

Předformátovaný styl tabulky - šablona Hanami

31. 10. 2016

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ář

Přehled komentářů

  • Úprava tabulky v šabloně Hanami

    31. 10. 2017 19:41:46 | Milan Köhler

    Dobrý den,
    prosím o radu, jak zrušit mezery v tabulce mezi obrázky viz https://www.czecom.cz/inpage/letak-planeo/ ? Pokoušel jsem se pomocí CSS stylů, ale nedaří se mi to.

    Děkuji

    Odpovědět | Zobrazit odpovědi

    • Re: Úprava tabulky v šabloně Hanami

      1. 11. 2017 13:27:59 | Tým inPage

      Dobrý den,
      tabulka má jako výchozí hodnotu nastaveny vnitřní mezery na 10px. Abyste mezery zrušil, je třeba vložit do Vzhled → Vlastní styly CSS tento kód:
      table.tabulka td, table td {
      padding: 0;
      }
      Tento kód mezery odstraní ze všech tabulek, proto je případně potřeba kód zacílit na konkrétní tabulku či stránku. V případě dalších dotazů na konkrétní úpravy doporučuji kontaktovat naši podporu admin@zoner.cz.

      Odpovědět

      • Re: Re: Úprava tabulky v šabloně Hanami

        1. 11. 2017 15:02:23 | Milan Köhler

        Díky moc, výsledek je OK.

        Odpovědět

inPage

Webhosting

Domény

Ostatní