Lekce 7 - Bootstrap - Tabulky

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.

Tmavý motiv

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

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.

A ukázka tmavší hlavičky:

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

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.

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.

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

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

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.

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.

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, Bootstrap - Tlačítka, nás čekají notifikace a tagy.