tabele w Bootstrap

Tabele w Bootstrap

Czas czytania: 2 minut

Mimo iż za często się ich nie stosuje (a przynajmniej nie powinno się) w bootstrapie zdefiniowane zostały tabele.

Działają one tak jak normalne tabele z tym, że posiadają one już domyślne ustawienia np:

Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bootstrap przewiduje dla swoich tabel kilka opcji wyglądu takich jak:

Tabela z co drugim wierszem pokolorowanym

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

Dodajemy do tabeli klasę


...

Tabela z obramowaniem

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

...

Tabela z podświetlonym wierszem, na którym aktualnie znajduje się kursor

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

...

Tabela pokolorowana na różne kolory:

#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

Responsywna wersja tabeli:

#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Powyższe tabele to tylko przykłady – to jak będzie ona wyglądać ostatecznie zależy od twórcy.

http://getbootstrap.com/css/#tables

Dodatkowe tagi:
tabelki Twitter Bootstrap
budowa tabel
bootstrap tabela
table in bootstrap
responsywne tabele
RWD, dopasowujące do szerokości strony
tabela na urządzenie przenośne