HALLOWEEN JE TADY: Získej 66 % extra kreditů zdarma při nákupu od 1199 kreditů s promo kódem NEBOJSEIT66. Zjisti více:
NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:

Lekce 7 - Bootstrap - Tabulky

Předchozí
Další

V předchozím kvízu, Kvíz - Grid systémy v Bootstrap, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

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:

<body>
   <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>
</body>

V prohlížeči pak vidíme:

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
<body>
   <table class="table table-dark">
      <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>
</body>

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:

Tabulky v Bootstrap
tabulky.html
<body>
   <table class="table">
      <caption>Postavičky ze seriálu Simpsonovi © Matt Groening, 20th Century Fox</caption>
      <thead class="table-light">
         <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>
</body>

A ukázka tmavší hlavičky:

Tabulky v Bootstrap
tabulky.html
<body>
   <table class="table">
      <caption>Postavičky ze seriálu Simpsonovi © Matt Groening, 20th Century Fox</caption>
      <thead class="table-dark">
         <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>
</body>

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
<body>
   <table class="table table-striped">
      <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>
</body>

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:

Tabulky v Bootstrap
tabulky.html
<body>
   <table class="table table-dark table-hover">
      <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>
</body>

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:

Tabulky v Bootstrap
tabulky.html
<body>
   <table class="table table-sm">
      <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>
</body>

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

Tabulky v Bootstrap
tabulky.html
<body>
   <table class="table">
      <caption>Postavičky ze seriálu Simpsonovi © Matt Groening, 20th Century Fox</caption>
      <thead>
         <tr class="table-primary">
            <th>Jméno</th>
            <th>Příjmení</th>
            <th>Věk</th>
         </tr>
      </thead>
      <tbody>
         <tr class="table-secondary">
            <td>Homer</td>
            <td>Simpson</td>
            <td>39</td>
         </tr>
         <tr class="table-success">
            <td>Ned</td>
            <td>Flanders</td>
            <td>60</td>
         </tr>
         <tr class="table-danger">
            <td>Edna</td>
            <td>Krabappelová</td>
            <td>41</td>
         </tr>
      </tbody>
   </table>
</body>

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:

Barvy textu v Bootstrap
barvy_textu.html
<body>
   <p class="text-white bg-success">Na mém plášti spousta barev září.</p>
   <p class="text-secondary">Na mém <a href="https://www.youtube.com/watch?v=YGNPkoJtoJ4" target="_blank">plášti</a> spousta barev září.</p>
   <p class="text-success">Na mém plášti spousta barev září.</p>
   <p class="text-danger">Na mém plášti spousta barev září.</p>
   <p class="text-warning">Na mém <a href="https://www.youtube.com/watch?v=YGNPkoJtoJ4" target="_blank">plášti</a> spousta barev září.</p>
   <p class="text-info">Na mém plášti spousta barev září.</p>
   <p class="text-light bg-dark">Na mém plášti spousta barev září.</p>
   <p class="text-dark">Na mém plášti spousta barev září.</p>
</body>

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 obalujícímu elementu <div>. 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.

Pokud použijeme například třídu .table-responsive-sm, pak třídu .table-responsive již neuvádíme.

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

Tabulky v Bootstrap
tabulky.html
<body>
   <div class="table-responsive">
      <table class="table">
         <caption>Postavičky ze seriálu Simpsonovi © Matt Groening, 20th Century Fox</caption>
         <thead>
            <tr class="table-primary">
               <th>Jméno</th>
               <th>Příjmení</th>
               <th>Pohlaví</th>
               <th>Povolání</th>
               <th>Ulice</th>
               <th>Číslo popisné</th>
               <th>Věk</th>
            </tr>
         </thead>
         <tbody>
            <tr class="table-secondary">
               <td>Homer</td>
               <td>Simpson</td>
               <td>Muž</td>
               <td>Bezpečnostní technik</td>
               <td>Evergreen Terrace</td>
               <td>742</td>
               <td>39</td>
            </tr>
            <tr class="table-success">
               <td>Ned</td>
               <td>Flanders</td>
               <td>Muž</td>
               <td>Podnikatel</td>
               <td>Evergreen Terrace</td>
               <td>742</td>
               <td>60</td>
            </tr>
            <tr class="table-danger">
               <td>Edna</td>
               <td>Krabappelová</td>
               <td>Žena</td>
               <td>Učitelka</td>
               <td>Greater Chicago Area</td>
               <td>10</td>
               <td>41</td>
            </tr>
         </tbody>
      </table>
   </div>
</body>

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


 

Předchozí článek
Kvíz - Grid systémy v Bootstrap
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Bootstrap - Tlačítka
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
1082 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity