Hledáš dárek, který neskončí v koši? Nyní 90 % extra kreditů ZDARMA s promo kódem PREKVAPENI90. Zjisti více:
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

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 dosud nestylovali, představíme tabulky.

Třída .table

Již víme, že z Rebootu mají tabulky border-style nastavený na collapse a mají také lehce upravené vykreslování <caption> a text-align. Pro další stylování je tedy 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 tabulce ještě přidá lehké zabarvení:

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 Bootstrapu
tabulky.html

Tmavý motiv

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

Tabulky v Bootstrapu
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-* (hvězdičku nahradíme příslušnou barvou) elementu <thead>, ve kterém se nacházejí hlavičkové buňky. Barvy lze využít i pro další části tabulky. Můžeme tedy tyto třídy přiřadit 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, pro tmavou pak .table-dark:

V prohlížeči uvidíme:

Tabulky v Bootstrapu
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 Bootstrapu
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ž tabulku vytvoříme pruhovanou a necháme u jejích řá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, k němuž se přidává. Všechny další třídy začínající na .table- tedy budeme přidávat k elementu <table>:

Tabulky v Bootstrapu
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 proto pomoci třídou .table-hover, která řádek zvýrazní, když na něj najedeme kurzorem myši. Styl opět funguje i pro tmavé tabulky:

Tabulky v Bootstrapu
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

U dlouhých tabulek může vypadat lépe zmenšení vlastnosti padding buněk na polovinu. K tomu nám slouží třída .table-sm, která udělá tabulku kompaktnější. Třída opět funguje i pro tmavé tabulky:

Tabulky v Bootstrapu
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é třídy 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 na nich byl text dobře čitelný.

Třídu lze přiřadit celému elementu <table>, ale slouží zejména ke zvýraznění pozadí buď celých řádků (elementů <tr>), nebo konkrétních buněk (elementů <td> a <th>):

Tabulky v Bootstrapu
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 barvení.

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 a podobně,
  • .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 přímo 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á.

K dispozici je také podpora gradientů, ty jsou však ve výchozím nastavení vypnuté, a proto se jimi nebudeme zabývat. Bootstrap doporučuje přidávat kromě barvicí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 Bootstrapu
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>

Vrátíme-li se k tabulkám – pokud u tmavé tabulky potřebujeme obarvit konkrétní řádek, stačí použít třídy pro nastavení barvy 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 prezentujeme nějaká data, která musí zůstat vždy přesně na daných řádcích. Použít tabulku například ke tvorbě fotoalba by bylo špatné rozhodnutí. Fotografie se mohou libovolně zalamovat, a proto k tomuto účelu 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 dva:

  • JavaScript – Tabulku zalomíme 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 bylo možné poznat, 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í moc přitažlivě, máme možnost zvolit, od kterého breakpointu se zobrazí. K tomu můžeme využít následující třídy:

  • .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 Bootstrapu
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í:
1092 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