Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

5. díl - Bootstrap - Tabulky

HTML a CSS Bootstrap Bootstrap - Tabulky

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Obrázky, jsme se věnovali obrázkům. Poslední ze základních HTML elementů, který jsme ještě pomocí Bootstrapu nestylovali, jsou tabulky. Právě o nich bude dnešní CSS tutoriál.

Třída .table

Již víme, že z Rebootu tabulky mají border-style nastavený na collapse a mají lehce upravené vykreslování <caption> a text-align. Pro další stylování je nutné přidat explicitně třídu .table a to z toho důvodu, že tabulky jsou hojně využívány různými widgety, které s Bootstrapem nemusí počítat. Třída .table tabulkám dodá zejména vodorovné čáry oddělující jednotlivé řádky.

Tabulky v Bootstrap
tabulky.html

Tmavý motiv

Bootstrap nabízí i tmavý vzhled, stačí přidat tabulce kromě třídy .table ještě třídu .table-dark.

Tabulky v Bootstrap
tabulky.html

Motivy hlavičky

Barvu hlavičkového řádku můžeme nastavit přiřazením třídy .thead-light nebo .thead-dark elementu <thead>, ve kterém se nacházejí hlavičkové buňky.

Tabulky v Bootstrap
tabulky.html

A ukázka tmavší hlavičky:

Tabulky v Bootstrap
tabulky.html

Pruhy

Velmi přehledně působí, když uděláme tabulku pruhovanou a necháme u jejich řádků střídat tmavé a světlé pozadí. Toho docílíme přidáním třídy .table-striped přímo elementu <table>. V Bootstrapu většinou platí konvence, že třída začíná elementem, ke kterému se přidává. Všechny další třídy začínající na .table- budeme tedy přidávat k elementu <table>.

Tabulky v Bootstrap
tabulky.html

Styl funguje i pro tmavé tabulky.

Rámeček

Osobně u tabulek preferuji rámeček. Ten můžeme přidat třídou .table-bordered opět přímo elementu <table>.

Aktivní řádek

V dlouhých tabulkách s mnoha hodnotami může být i při zebrování (pruhování) namáhavé přečíst hodnoty na určitém řádku. Můžeme si pomoci třídou .table-hover, která řádek zvýrazní když na něj vstoupíme kurzorem myši. Styl opět funguje i pro tmavé tabulky, ukažme si jej tentokrát na ni.

Tabulky v Bootstrap
tabulky.html

Nižší řádky

Pro dlouhé tabulky může vypadat lépe zmenšit padding buněk na polovinu. K tomu nám páni z Twitteru připravili třídu .table-sm. Opět funguje i pro tmavé tabulky.

Tabulky v Bootstrap
tabulky.html

Pozadí buněk

Pro nám již známé barvy můžeme použít stejnojmenných tříd s prefixem table-. Jsou to třídy:

  • .table-primary - Hlavní barva, jako výchozí modrá
  • .table-secondary - Druhá hlavní barva, výchozí šedá
  • .table-success - Zelená na úspěšné hlášky, slevy, potvrzující tlačítka, ...
  • .table-danger - Červená pro chyby apod.
  • .table-warning - Žlutá pro zvýraznění důležitých hlášek, tipů...
  • .table-info - Neutrální modrá pro neutrální zvýraznění
  • .table-light - Světlounce šedá
  • .table-dark - Téměř černá
  • .table-white - Zcela bílá.

Všimněte si, že barvy jsou o něco světlejší než ty standardní, to aby byl na nich text dobře čitelný.

Třídu výjimečně nepřiřazujeme celému elementu <table>, ale slouží pro zvýraznění pozadí buď celých řádků (elementů <tr>) nebo konkrétních buněk (elementů <td> a <th>).

Tabulky v Bootstrap
tabulky.html

Tyto světlé styly nejsou vhodné pro tmavý motiv tabulky. Pokud jej zrovna používáme, můžeme využít ulitity třídy pro barvy.

Utility třídy pro barvy

Další utility třídy, které si nyní představíme, jsou univerzální třídy pro obarvování.

Barva textu

Pokud potřebujeme kdekoli změnit barvu textu, máme k dispozici následující třídy:

  • .text-primary - Hlavní barva, jako výchozí modrá
  • .text-secondary - Druhá hlavní barva, výchozí šedá
  • .text-success - Zelená na úspěšné hlášky, slevy, potvrzující tlačítka, ...
  • .text-danger - Červená pro chyby apod.
  • .text-warning - Žlutá pro zvýraznění důležitých hlášek, tipů...
  • .text-info - Neutrální modrá pro neutrální zvýraznění
  • .text-light - Světlounce šedá
  • .text-dark - Téměř černá
  • .text-white - Zcela bílá.

Kromě .text-white a .text-muted styly počítají i s odkazy, musíme jim ovšem třídu rovněž přiřadit.

Barva pozadí

Pro barvu pozadí máme v Bootstrapu třídy s prefixem "bg-":

  • .bg-primary - Hlavní barva, jako výchozí modrá
  • .bg-secondary - Druhá hlavní barva, výchozí šedá
  • .bg-success - Zelená na úspěšné hlášky, slevy, potvrzující tlačítka, ...
  • .bg-danger - Červená pro chyby apod.
  • .bg-warning - Žlutá pro zvýraznění důležitých hlášek, tipů...
  • .bg-info - Neutrální modrá pro neutrální zvýraznění
  • .bg-light - Světlounce šedá
  • .bg-dark - Téměř černá
  • .bg-white - Zcela bílá.

Je k dispozici i podpora gradientů, ale ty jsou ve výchozím nastavení vypnuté a proto se jimi nebudeme zabývat. Bootstrap doporučuje přidávat kromě barvících tříd také alternativní text skrytý pomocí třídy sr-only. Ten se poté projeví např. lidem s hlasovými čtečkami a význam obarvení (např. slevy) bude zachován i v audio verzi webu.

Barvy textu v Bootstrap
barvy_textu.html

Abychom se vrátili k tabulkám, pokud byste tedy u tmavé tabulky potřebovali obarvit nějaký řádek, stačí použít třídy na obarvení pozadí s prefixem bg-.

Responzivní tabulky

Docílit opravdu responzivních tabulek je bohužel poměrně problém. Tabulky není možné zalomit a proto bychom je měli používat opravdu jen na místech, kde uživateli reprezentujeme nějaká data, která musí zůstat vždy přesně na daných řádcích. Použít tabulky např. pro tvorbu fotoalba by bylo špatné rozhodnutí, fotografie se mohou libovolně zalamovat a proto pro tyto účely můžeme použít grid (viz dále v kurzu).

Způsoby pro zmenšení tabulky při otevření dat na mobilním zařízení jsou pouze 2:

  • JavaScript - Tabulku zlámeme pomocí JavaScriptu tak, aby na každém řádku byl jen jeden popisek a jedna hodnota. Jednotlivé řádky se tak stanou sloupečky. Ty potom musíme nějak vizuálně oddělovat, aby se poznalo kde začíná další "řádek". Toto řešení je poměrně krkolomné.
  • Scrollbar - Další možností je jednoduše přidat tabulce scrollbar. Na menších zařízeních se tedy tabulka ořízne a my budeme schopní pohybovat s jejím obsahem ve výřezu. Toto řešení je funkční a velmi jednoduché, jediná nevýhoda je, že nevypadá tak hezky. Pro toto řešení se rozhodl Bootstrap.

Responzivní tabulku vytvoříme přidáním třídy .table-responsive k elementu <table>. Protože scrollbary nevypadají dvakrát přitažlivě, máme možnost zvolit od jakého breakpointu se zobrazí. K tomu může využít tříd:

  • .table-responsive-sm
  • .table-responsive-md
  • .table-responsive-sm

Třídu .table-responsive v tomto případě již neuvádíme.

Pokud si zmenšíte okno prohlížeče, tabulce v ukázce níže se přidá scrollbar.

Tabulky v Bootstrap
tabulky.html

Touto lekcí jsme dokončili hlavní součást Bootstrapu pro stylování běžných HTML elementů. Dále se budeme věnovat tzv. komponentám, které jsou nejčastěji tvořeny elementy <div> nebo <span> a umožňují nám používat velmi užitečné prvky, které HTML v základu vůbec nenabízí. V příští lekci, , nás čekají notifikace a tagy.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
3 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Obrázky
Miniatura
Všechny články v sekci
Bootstrap
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!