Tabele / Tables

17 068 0

Sprawdź najnowszą wersję komponentu tables zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Kod

</p> 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<p>

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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Kod

</p> 
<table class="table table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<p>

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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Kod

</p> 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<p>

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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Kod

</p> 
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<p>

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 Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Kod

</p> 
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<p>

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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Kod

</p> 
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<p>

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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Kod

</p> 
<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<p>

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 heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content


Kod

</p> 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-success">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-info">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-warning">
      <th scope="row">7</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">9</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>
<p>

Przykład dla komórek:

Przykład

# Column heading Column heading Column heading
1 .table-active Column content .table-success
2 Column content .table-warning Column content
3 .table-info Column content .table-danger


Kod

</p> 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="table-active">.table-active</td>
      <td>Column content</td>
      <td class="table-success">.table-success</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td class="table-warning">.table-warning</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td class="table-info">.table-info</td>
      <td>Column content</td>
      <td class="table-danger">.table-danger</td>
    </tr>
  </tbody>
</table>
<p>

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 heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content


Kod

</p> 
<table class="table table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-primary">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-success">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-info">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-warning">
      <th scope="row">7</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-danger">
      <th scope="row">9</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>
<p>

Przykład dla komórek:

Przykład

# Column heading Column heading Column heading
1 .bg-primary Column content .bg-success
2 Column content .bg-warning Column content
3 .bg-info Column content .bg-danger


Kod

</p> 
<table class="table table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="bg-primary">.bg-primary</td>
      <td>Column content</td>
      <td class="bg-success">.bg-success</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td class="bg-warning">.bg-warning</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td class="bg-info">.bg-info</td>
      <td>Column content</td>
      <td class="bg-danger">.bg-danger</td>
    </tr>
  </tbody>
</table>
<p>

Łą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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Kod

</p> 
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>
<p>

27 votes, average: 4,89 out of 527 votes, average: 4,89 out of 527 votes, average: 4,89 out of 527 votes, average: 4,89 out of 527 votes, average: 4,89 out of 5 (27 głosów, średnia: 4,89 na 5)
Loading...

Chcesz coś napisać?

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

*

*