Bootstrap tutorial logo

Tabele / Tables

autor: Robert

2 lipca 2013

Jak wiemy tabele znajdują swoje zastosowanie bardzo często. Bootstrap posiada kilka klas które umożliwiają ich dostosowywanie a także zapewniają estetyczny wygląd.

Podstawowa tabela

Tabele tworzymy poprzez HTMLowy znacznik <table>...</table> ale wystarczy dodać do niego klasę .table by uzyskać w niej dopełnienie oraz poziome linie oddzielające poszczególne wiersze.

# Imię Nazwisko
1 Jan Kowalski
2 Jakub Nowak

Dodatkowe klasy tabeli

Do klasy .table możemy dołączyć kilka opcjonalnych klas zmieniających sposób wyświetlania tabeli.

Paskowana tabela

Klasa .table-striped powoduje dodanie ciemniejszego tła do co drugiego wiersza tabeli.

# Imię Nazwisko
1 Jan Kowalski
2 Jakub Nowak

Obramowanie tabeli

Klasa .table-bordered automatycznie dodaje obramowanie tabeli.

# Imię Nazwisko
1 Jan Kowalski
2 Jakub Nowak

Podswietlanie wierszy tabeli

Klasa .table-hover powoduje podświetlenie wiersza nad którym znajdzie się kursor myszy.

# Imię Nazwisko
1 Jan Kowalski
2 Jakub Nowak

Skondensowana tabela

Klasa .table-condensed zmniejsza dopełnienie wewnątrz tabeli.

# Imię Nazwisko
1 Jan Kowalski
2 Jakub Nowak

Dodatkowe klasy wierszy

Dzięki zastosowaniu klas .active .success .danger .warning oraz .info możliwe jest nadawanie kolorów poszczególnym wierszom w tabeli.

# Imię Nazwisko
1 Jan Kowalski
2 Jakub Nowak
2 Szymon Winiewski
2 John Doe

Oczywiście możliwe jest stosowanie wielu klas dla tabeli by dostosować jej wygląd do naszych oczekiwań.

# Imię Nazwisko
1 Jan Kowalski
2 Jakub Nowak
2 Szymon Winiewski
2 John Doe

Responsywna tabela

Jak zauważycie przy tworzeniu tabeli, jeśli jest ona szersza od diva w którym się zawiera zaczyna ona wychodzić poza kontener co jest nieestetyczne.

Aby temu zapobiedz musimy tabelę otoczyć divem z klasą .table-responsive. Dzięki temu tabela zamknie się w kontenerze z poziomym paskiem przewijania nie psując nam wyglądu strony.

Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (12 głosów, średnia: 4,83 na 5)
Loading...
Piotr 3 września 2013 o 23:27

co z th zamiast td-bold?
oczywiście td jest ustawiany do lewej, a th centrowany wg html

Odpowiedz
Robert 4 września 2013 o 08:06

Faktycznie, nie wiem dlaczego ominąłem opis sekcji <thead> i znacznika <th> który służy do tworzenia nagłówków tabel.
Postaram się to jak najszybciej poprawić

Odpowiedz
Marcin 7 lipca 2015 o 13:24

Witam, jak zrobić aby tekst w tabeli w najmniejszej rozdzielczość (468px) się zawijał?
Gdy tego nie ma na dole tabeli pojawia sie pasek przewijania i jest to troche nieczytelne.

Odpowiedz
    Robert 7 lipca 2015 o 13:34

    Tabele mają do to siebie, że na smartfonach jest z nimi problem. Bootstrap poprzez dodanie klasy .table-responsive powoduje zamknięcie jej w divie z przewijaniem w poziomie co na komórkach faktycznie jest nieintuicyjne. Pod hasłem „responsive tables” można znaleźć wiele sposobów rozwiązania tego problemu. Ja sam korzystam z FooTable -> http://fooplugins.com/footable-demos/ i mogę polecić ten plugin:)

    Odpowiedz
Oliwier 1 lutego 2016 o 17:59

Gdzie cały css…

Odpowiedz
Tomek 21 września 2016 o 21:51

witam,

Trzeba przyznać że tabele wyglądają bardzo efektownie, zwłaszcza gdy ustawimy klasę .table-striped (kolorowanie co drugiego wiersza). Moje pytanie: Jak taki efekt uzyskać ale na divach … ?

pozdrawiam

Odpowiedz
Kategorie
Tutoriale wideo Bootstrap
Kurs Bootstrap 3 - responsywne strony Kurs Bootstrap 4 - od podstaw Kurs Bootstrap 4 - praktyczny projekt
Reklamy