7. diel - Bootstrap - Tabuľky

V predchádzajúcom kvíze, Kvíz - Grid systémy v Bootstrap, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnom CSS tutoriále Bootstrapu si ako posledný zo základných HTML elementov, ktorý sme ešte pomocou Bootstrapu nestylovali, predstavíme tabuľky.

Trieda .table

Už vieme, že z Rebootu tabuľky majú border-style nastavený na collapse a majú ľahko upravené vykresľovanie <caption> a text-align. Pre ďalšie štylovanie je nutné pridať explicitne triedu .table a to z toho dôvodu, že tabuľky sú hojne využívané rôznymi widgetmi, ktoré s Bootstrapom nemusia počítať. Trieda .table tabuľkám dodá najmä vodorovné čiary oddeľujúce jednotlivé riadky. Trieda .table-light potom dodá ešte ľahké zafarbenie tabuľky:

V kóde vyzerá zápis takto:

<table class="table">
   <caption>Characters from the Simpsons TV show © Matt Groening, 20th Century Fox</caption>
   <thead>
      <tr>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Age</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>Krabappel</td>
         <td>41</td>
      </tr>
   </tbody>
</table>

V prehliadači potom vidíme:

Tmavý motív

Bootstrap ponúka aj tmavý vzhľad, stačí pridať tabuľke okrem triedy .table ešte triedu .table-dark:

Motívy hlavičky

Farbu hlavičkového riadku môžeme nastaviť priradením triedy .table-*, kde hviezdičku nahradíme príslušnou farbou, elementu <thead>, v ktorom sa nachádzajú hlavičkové bunky. Dajú sa však využiť pre rôzne časti tabuľky. Môžeme teda priradiť tieto triedy ďalej priamo k <tbody>, <tr>, <th> a <td>, aby sa zmenila farba daných častí tabuľky. Pre svetlú hlavičku použijeme .table-light a pre tmavú hlavičku .table-dark:

V prehliadači uvidíme:

A ukážka tmavšej hlavičky:

Pruhy

Veľmi prehľadne pôsobí, keď urobíme tabuľku pruhovanú a necháme pri ich riadkoch striedať tmavé a svetlé pozadie. To docielime pridaním triedy .table-striped priamo elementu <table>. V Bootstrape väčšinou platí konvencia, že trieda začína elementom, ku ktorému sa pridáva. Všetky ďalšie triedy začínajúce na .table- budeme teda pridávať k elementu <table>:

Štýl funguje aj pre tmavé tabuľky.

Rámček

Rámček pri tabulkách môžeme pridať triedou .table-bordered opäť priamo elementu <table>.

Aktívny riadok

V dlhých tabuľkách s mnohými hodnotami môže byť aj pri zebrovaní (pruhovaní) namáhavé prečítať hodnoty na určitom riadku. Môžeme si pomôcť triedou .table-hover, ktorá riadok zvýrazní, keď naň vstúpime kurzorom myši. Štýl opäť funguje aj pre tmavé tabuľky:

Nižšie riadky

Pre dlhé tabuľky môže vyzerať lepšie zmenšiť padding buniek na polovicu. K tomu nám slúži trieda .table-sm, ktorá urobí tabuľku kompaktnejšou. Opäť funguje aj pre tmavé tabuľky:

Pozadia buniek

Pre nám už známe farby môžeme použiť rovnomenné triedy s prefixom table-. Sú to triedy:

• .table-primary - hlavná farba, ako predvolená modrá,
• .table-secondary - druhá hlavná farba, predvolená šedá,
• .table-success - zelená na úspešné hlášky, zľavy, potvrdzujúce tlačidlá,
• .table-danger - červená pre chyby a podobne,
• .table-warning - žltá pre zvýraznenie dôležitých hlášok, tipov,
• .table-info - neutrálna modrá pre neutrálne zvýraznenie,
• .table-light - svetlounca sivá,
• .table-dark - takmer čierna.

Všimnime si, že farby sú o niečo svetlejšie ako tie štandardné, aby bol na nich text dobre čitateľný.

Triedu je možné priradiť celému elementu <table>, ale slúži najmä na zvýraznenie pozadia buď celých riadkov (elementov <tr>) alebo konkrétnych buniek (elementov <td> a <th>):

Tieto svetlé štýly nie sú vhodné pre tmavý motív tabuľky. Pokiaľ ho práve používame, môžeme využiť univerzálne utility triedy pre farby viď ďalej.

Utility triedy pre farby

Ďalšie utility triedy, ktoré si teraz predstavíme, sú univerzálne triedy na zafarbovanie.

Farba textu

Pokiaľ potrebujeme kdekoľvek zmeniť farbu textu, máme k dispozícii nasledujúce triedy:

• .text-primary - hlavná farba, ako predvolená modrá,
• .text-secondary - druhá hlavná farba, predvolená šedá,
• .text-success - zelená na úspešné hlášky, zľavy, potvrdzujúce tlačidlá,
• .text-danger - červená pre chyby a pod.,
• .text-warning - žltá pre zvýraznenie dôležitých hlášok, tipov,
• .text-info - neutrálna modrá pre neutrálne zvýraznenie,
• .text-light - svetlo šedý text, vhodný pre tmavé pozadie,
• .text-dark - takmer čierna.

Štýly počítajú aj s odkazmi, musíme im však triedu tiež priradiť. Bootstrap ale tiež poskytuje špeciálne triedy pre odkazy, ktoré zahŕňajú dodatočné stavy interakcie :hover a :focus. Použitím tried .link-* na odkazy zaistíme, že odkazy budú mať nielen správnu farbu, ale aj zodpovedajúce vizuálne odozvy na užívateľské akcie.

Farba pozadia

Pre farbu pozadia máme v Bootstrape triedy s prefixom bg-:

• .bg-primary - hlavná farba, ako predvolená modrá,
• .bg-secondary - druhá hlavná farba, predvolená šedá,
• .bg-success - zelená na úspešné hlášky, zľavy, potvrdzujúce tlačidlá,
• .bg-danger - červená pre chyby a podobne,
• .bg-warning - žltá pre zvýraznenie dôležitých hlášok, tipov,
• .bg-info - neutrálna modrá pre neutrálne zvýraznenie,
• .bg-light - svetlunka sivá,
• .bg-dark - takmer čierna.

Je k dispozícii aj podpora gradientov, ale tie sú v predvolenom nastavení vypnuté a preto sa nimi nebudeme zaoberať. Bootstrap odporúča pridávať okrem farbiacich tried aj alternatívny text skrytý pomocou triedy .visually-hidden. Ten sa potom prejaví napr. ľuďom s hlasovými čítačkami a význam zafarbenia (napríklad zľavy) bude zachovaný aj v audio verzii webu:

Aby sme sa vrátili k tabuľkám, pokiaľ by sme teda pri tmavej tabuľke potrebovali zafarbiť nejaký riadok, stačí použiť triedy na zafarbenie pozadia s prefixom bg-.

Responzívne tabuľky

Docieliť naozaj responzívnych tabuliek je bohužiaľ pomerne problém. Tabuľky nie je možné zalomiť a preto by sme ich mali používať naozaj len na miestach, kde užívateľovi reprezentujeme nejaké dáta, ktoré musia zostať vždy presne na daných riadkoch. Použiť tabuľky napríklad na tvorbu fotoalbumu by bolo zlé rozhodnutie, fotografie sa môžu ľubovoľne zalamovať a preto na tieto účely môžeme použiť grid (viď ďalej v kurze).

Spôsoby pre zmenšenie tabuľky pri otvorení dát na mobilnom zariadení sú iba 2:

• JavaScript - tabuľku zlámeme pomocou JavaScriptu tak, aby na každom riadku bol len jeden popis a jedna hodnota. Jednotlivé riadky sa tak stanú stĺpčekmi. Tie potom musíme nejako vizuálne oddeľovať, aby sa spoznalo kde začína ďalší „riadok“. Toto riešenie je pomerne krkolomné.
• Scrollbar – ďalšou možnosťou je jednoducho pridať tabuľke scrollbar. Na menších zariadeniach sa teda tabuľka oreže a my budeme schopní pohybovať s jej obsahom vo výreze. Toto riešenie je funkčné a veľmi jednoduché. Jediná nevýhoda je, že nevyzerá tak pekne. Pre toto riešenie sa rozhodol Bootstrap.

Responzívnu tabuľku vytvoríme pridaním triedy .table-responsive k elementu <table>. Pretože scrollbary nevyzerajú dvakrát príťažlivo, máme možnosť zvoliť od akého breakpointu sa zobrazí. K tomu môžeme využiť triedy:

• .table-responsive-sm,
• .table-responsive-md,
• .table-responsive-lg,
• .table-responsive-xl,
• .table-responsive-xxl.

Triedu .table-responsive v tomto prípade už neuvádzame.

Pokiaľ si zmenšíme okno prehliadača, tabuľke v ukážke nižšie sa pridá scrollbar:

Touto lekciou sme dokončili hlavnú súčasť Bootstrapu na štýlovanie bežných HTML elementov. Ďalej sa budeme venovať tzv. komponentom, ktoré sú najčastejšie tvorené elementmi <div> alebo <span> a umožňujú nám používať veľmi užitočné prvky, ktoré HTML v základe vôbec neponúka.

V budúcej lekcii, Bootstrap - Tlačidlá, nás čakajú tlačidlá a všetko okolo ich nastavenia.