Tabele / Tables

5 404 0

Tabele służą nam do przedstawiania usystematyzowanych wyników bądź danych. Możemy stworzyć sobie tabelę z cenami, z wynikami rozgrywek, z listą nazwisk, możliwości jest wiele. Dawno temu służyły także do tworzenia całych stron internetowych ale te czasy minęły i odkąd mamy wszelkiego rodzaju gridy/siatki, nie stosujcie tabel do tworzenia layoutu. No chyba, że do szablonu mailingu ale to oddzielna historia:)

Jak wiecie Bootstrap zapewnia stylowanie dla bardzo wielu elementów, nie inaczej jest z tabelami. Otrzymujemy możliwość zrobienia „responsywnej” tabeli, kolorowych nagłówków czy teł dla komórek itp. Tak więc zaczynajmy.

Podstawowy przykład

Podstawowa składnia HTML tabeli wygląda tak, że wewnątrz znacznika <table>...</table> możemy umieścić sobie trzy sekcje: <>

  • <thead>...</thead> czyli nagłówek tablicy (table head) wewnątrz którego mam do dyspozycji dwa znaczniki:

    • <tr>…</tr> – czyli rząd tabeli (table row)
    • a w jego wnętrzu umieszczamy <th>…</th> – czyli pojedynczą komórkę nagłówka (table header)
  • <tbody>...</tbody> czyli zawartość tablicy (table body) wewnątrz którego mam do dyspozycji dwa znaczniki:

    • <tr>…</tr> – czyli rząd tabeli (table row)
    • a w jego wnętrzu umieszczamy <td>…</td> – czyli pojedynczą komórkę (table data)
  • <tfoot>...</tfoot> czyli stopkę tablicy (table footer) wewnątrz którego mam do dyspozycji dwa znaczniki:

    • <tr>…</tr> – czyli rząd tabeli (table row)
    • a w jego wnętrzu umieszczamy <td>…</td> – czyli pojedynczą komórkę stopki (table data)

Znaczniki <thead> oraz <tfoot> nie są obowiązkowe i jeśli nasza tabela ich nie potrzebuje to zwyczajnie ich nie używamy.

Aby nasza tabela zyskała Bootstrapowe stylowanie musimy dodać jej klasę .table

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Kod

Istnieje także klasa .table-dark, która zamienia nam kolory naszej tabeli na ciemne a fonty na białe, co może się przydać na stronach tworzonych w ciemnych barwach.

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Kod

Style nagłówka tabeli

Sam nagłówek tabeli czyli sekcja <thead> powinna się wizualnie wyróżniać, po coś w końcu ją stosujemy:) Mamy tutaj do dyspozycji dwie klasy, które musimy dodać do wymienionego znacznika <thead>. Są to klasy <.thead-dark> która, jak się pewnie domyślacie, zmienia kolor na ciemny. Oraz klasa <.thead-light>, która dodaje nagłówkowi szare tło.

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Kod

Tło rzędów tabeli

Gdy nasza tabela robi się długa, dobrym rozwiązaniem jest zmiana koloru co drugiego jej rzędu. Dzięki temu otrzymujemy wizualne rozdzielenie, dzięki czemu czyta się ją dużo łatwiej i trudniej się zgubić przesuwając wzrok w prawo. Tutaj przychodzi nam z pomocą klasa .table-striped, którą musimy dopisać do znacznika <table>. Klasa działa ta również w połączeniu z klasą .table-dark.

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Kod

Ramki wokół tabeli

Jak pewnie zauważyliście standardowe stylowanie tabeli w Bootstrapie nie dodaje ramki wokół komórek a jedynie kreski pod rzędami. Gdybyśmy chcieli aby każda komórka miała swoją ramkę korzystamy z klasy .table-bordered dodanej do znacznika <table>. Tutaj również działa połączenie z .table-dark.

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter

Kod

Podświetlanie rzędów tabeli

Wyżej napisałem o tle rzędów tabeli a właściwie jego zmianie w co drugim rzędzie. Gdyby jednak takie rozwiązanie nie pasowało do naszego layoutu a tabela była by bez niego nieczytelna to możemy skorzystać z klasy .table-hover dodanej do znacznika <table>. Jak i w powyższych przypadkach, można ją połączyć z klasą .table-dark. Dzięki tej klasie tło rzędu będzie zmieniało kolor dopiero gdy najedziemy na niego kursorem.

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Kod

Skondensowana tabela

Kolejna gotowa klasa odnosząca się do znacznika <table> pozwala nam zmniejszyć odstępy pomiędzy kolejnymi rzędami aby tabela zajmowała mniej miejsca na wysokość. Ta klasa to .table-sm Wspomnę tylko o klasie .table-dark 🙂

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Kod

Kolory rzędów i komórek

Bootstrap ma zaimplementowane kilka kolorów, można je użyć do określenia kontekstu danego elementu lub, jeśli ten kolor pasuje do layoutu, do „pokolorowania” elementu.
Dla tabeli są to klasy:

  • table-active – nadaje tło jak przy najechaniu kursorem przy użyciu klasy .table-hover
  • table-success – nadaje zielone tło i oznacza, sukces, wzrost, pozytywny komunikat
  • table-info – nadaje niebieskie tło i oznacza element, który ma wartość informacyjną
  • table-warning – nadaje żółte tło i oznacza ostrzeżenie
  • table-danger – nadaje czerwone tło i oznacza zagrożenie (np. przyciski „delete” są zwykle czerwone)

Aby zmienić kolor całego rzędu musimy znacznikowi <tr> nadać jedną z wyżej wymienionych klas. Aby nadać kolor pojedynczej komórce to jedną z klas dopisujemy do znacznika <td>

Przykład dla rzędów:

Przykład

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content


Kod

Przykład dla komórek:

Przykład

#Column headingColumn headingColumn heading
1.table-activeColumn content.table-success
2Column content.table-warningColumn content
3.table-infoColumn content.table-danger


Kod

Tym razem te klasy nie zmienią kolorów przy połączeniu z .table-dark

Dla nadania kolorów teł w połączeniu z klasą .table-dark musimy skorzystać z poniższych klas:

  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger

Przykład dla rzędów:

Przykład

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content


Kod

Przykład dla komórek:

Przykład

#Column headingColumn headingColumn heading
1.bg-primaryColumn content.bg-success
2Column content.bg-warningColumn content
3.bg-infoColumn content.bg-danger


Kod

Łączenie klas

Jeśli tylko chcecie to możecie łączyć ze sobą powyższe klasy. Nic nie stoi na przeszkodzie by skondensowana tabela .table-sm miała ciemny nagłówek .thead-inverse i ramki wokół każdej komórki .table-bordered itp. No może prócz .table-striped i .table-hover bo efekt końcowy nie jest zbyt ciekawy;)

Responsywna tabela

Na początku wpisu ująłem słowo responsywna w cudzysłów. Chodzi o to, że dla mnie responsywna oznacza to, że dla mniejszych rozdzielczości tabela zmienia swój układ tak by mieściła się na ekranie bez przewijania na boki. W Bootstrapie „responsywna” tabela polega na dodaniu poziomego paska przewijania dla mniejszych rozdzielczości. Tabelę taką utworzymy poprzez otoczenie jej divem z klasą .table-responsive, poniżej rozdzielczości 768px pojawi się nam poziomy scroll.
W przypadku gdybyśmy chcieli mieć wpływ na to kiedy pojawi się nam poziomy scroll tabeli, zamiast klasy .table-responsive, korzystamy z klas z poszczególnymi breakpointami czyli:

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

Przykład

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (14 głosów, średnia: 4,86 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*