Lekce 7 - Bootstrap - Tabulky
V dnešním CSS tutoriálu Bootstrapu si jako poslední ze základních HTML elementů, který jsme ještě pomocí Bootstrapu nestylovali, představíme tabulky.
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. Třída .table-light
pak dodá ještě lehké
zabarvení tabulky:
V kódu vypadá zápis takto:
<table class="table"> <caption>Postavičky ze seriálu Simpsonovi © Matt Groening, 20th Century Fox</caption> <thead> <tr> <th>Jméno</th> <th>Příjmení</th> <th>Věk</th> </tr> </thead> <tbody> <tr> <td>Homer</td> <td>Simpson</td> <td>39</td> </tr> <tr> <td>Ned</td> <td>Flanders</td> <td>60</td> </tr> <tr> <td>Edna</td> <td>Krabappelová</td> <td>41</td> </tr> </tbody> </table>
V prohlížeči pak vidíme:
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
.table-*
, kde hvězdičku nahradíme příslušnou barvou, elementu
<thead>
, ve kterém se nacházejí hlavičkové buňky. Lze
je ale využít pro různé části tabulky. Můžeme tedy přiřadit tyto
třídy dále přímo k <tbody>
, <tr>
,
<th>
a <td>
, aby se změnila barva daných
částí tabulky. Pro světlou hlavičku použijeme .table-light
a
pro tmavou hlavičku .table-dark
:
V prohlížeči uvidíme:
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
Rámeček u tabulek 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:
Nižší řádky
Pro dlouhé tabulky může vypadat lépe zmenšit padding
buněk
na polovinu. K tomu nám slouží třída .table-sm
, která udělá
tabulku kompaktnější. 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 a podobně,
- .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á.
Všimněme si, že barvy jsou o něco světlejší než ty standardní, to aby byl na nich text dobře čitelný.
Třídu lze přiřadit celému elementu <table>
, ale
slouží zejména 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ětle šedý text, vhodný pro tmavé pozadí,
- .text-dark - téměř černá.
Styly počítají i s odkazy, musíme jim ovšem třídu rovněž přiřadit.
Bootstrap ale také poskytuje speciální třídy pro odkazy, které zahrnují
dodatečné stavy interakce :hover
a :focus
.
Použitím tříd .link-*
na odkazy zajistíme, že odkazy budou
mít nejenom správnou barvu, ale také odpovídající vizuální odezvy na
uživatelské akce.
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 a podobně,
- .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á.
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
.visually-hidden
. 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 bychom 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říklad 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ůžeme využít tříd:
.table-responsive-sm
,.table-responsive-md
,.table-responsive-lg
,.table-responsive-xl
,.table-responsive-xxl
.
Třídu .table-responsive
v tomto případě již
neuvádíme.
Pokud si zmenšíme 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í tlačítka a vše kolem jejich nastavení.