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 neštýlovali, predstavíme tabuľky.

Trieda .table

Už vieme, že tabuľky z Rebootu majú border-style nastavený na collapse a majú ľahko upravené vykresľovanie <caption> a text-align. Pre ďalšie štýlovanie je nutné pridať explicitne triedu .table a to z toho dôvodu, že tabuľky sú značne využívané rôznymi widgetmi, ktoré s Bootstrapom nemusia počítať. Trieda .table tabuľkám pridá najmä vodorovné čiary, ktoré oddeľujú jednotlivé riadky. Trieda .table-light potom pridá 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 riadku hlavičky 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. Tieto triedy teda môžeme priradiť ď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ď vytvoríme pruhovanú tabuľku a v riadkoch sa budú 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 tabuľká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 určitého riadku. Môžeme si pomôcť triedou .table-hover, ktorá riadok zvýrazní, keď naň prejdeme kurzorom myši. Štýl opäť funguje aj pre tmavé tabuľky:

Nižšie riadky

Pri dlhých tabuľkách môže lepšie vyzerať zmenšiť padding buniek na polovicu. K tomu nám slúži trieda .table-sm, vďaka ktorej bude tabuľka kompaktnejšia. Opäť funguje aj pre tmavé tabuľky:

Pozadie 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 - svetlo 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, ktoré si rozoberieme ď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, no aj tým musíme triedu priradiť. Bootstrap ale poskytuje aj š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.

K dispozícii je 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 zobrazí 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ívne tabuľky 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 prezentujeme 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 zalomíme pomocou JavaScriptu tak, aby bol na každom riadku len jeden popis a jedna hodnota. Jednotlivé riadky sa tak stanú stĺpčekmi. Tie potom musíme nejako vizuálne oddeľovať, aby sme zistili, 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á až 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 bude pridaný scrollbar:

Touto lekciou sme dokončili hlavnú č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 ďalšej lekcii, Bootstrap - Tlačidlá, nás čakajú tlačidlá a všetko týkajúce sa ich nastavenia.