Znakowanie tabeli
| Znacznik | Opis |
|---|---|
<table>
|
Obejmuje element wyświetlający dane tabelaryczne. |
<thead>
|
Kontener obejmujący nagłówkowy wiersz tabeli (<tr>) z etykietami kolumn tabeli
|
<tbody>
|
Kontener obejmujący wiersze tabeli (<tr>) w głównej części tabeli
|
<tr>
|
Kontener obejmujący komórki tabeli (<td> or <th>) widoczne w pojedynczym rzędzie (wierszu)
|
<td>
|
Domyślna komórka tabeli |
<th>
|
Specjalny rodzaj komórek z etykietami kolumn (lub wierszy, zależnie od zakresu i umieszczenia) Musi być umieszczony wewnątrz <thead>
|
<caption>
|
Opis lub streszczenie tabeli, przydatne szczególnie dla czytników ekranu |
Opcje tabeli
| Nazwa | Klasa | Opis |
|---|---|---|
| Domyślnie | Brak | Bez stylów, tylko kolumny i wiersze |
| Podstawowa |
.table
|
Tylko linie poziome między wierszami |
| Obramowanie |
.table-bordered
|
Zaokrąglone narożniki i obramowanie zewnętrzne |
| Zebra - paski |
.table-striped
|
Lekko szary kolor tła w wierszach nieparzystych (1, 3, 5, etc) |
| Skondensowana |
.table-condensed
|
Zmniejsza dopełnienia pionowe o połowę, z 8px do 4px, wewnątrz wszystkich elementów td oraz th |
Przykłady tabel
1. Domyślny styl tabel
| # | Imię | Nazwisko | Użytkownik |
|---|---|---|---|
| 1 | Marek | Otto | @mdo |
| 2 | Jakub | Kowalski | @fat |
| 3 | Jan | Sosna |
2. Tabela pasiasta (zebra)
| # | Imię | Nazwisko | Użytkownik |
|---|---|---|---|
| 1 | Marek | Otto | @mdo |
| 2 | Jakub | Kowalski | @fat |
| 3 | Jan | Sosna |
3. Tabela z obramowaniem
| # | Imię | Nazwisko | Użytkownik |
|---|---|---|---|
| 1 | Marek | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jakub | Kowalski | @fat |
| 3 | Jan Sosna | ||
4. Tabela skondensowana
| # | Imię | Nazwisko | Użytkownik |
|---|---|---|---|
| 1 | Marek | Otto | @mdo |
| 2 | Jakub | Kowalski | @fat |
| 3 | Jan Sosna | ||
5. Połączenie wszystkich stylów!
| Pełna nazwa | |||
|---|---|---|---|
| # | Imię | Nazwisko | Użytkownik |
| 1 | Marek | Otto | @mdo |
| 2 | Jakub | Kowalski | @fat |
| 3 | Jan Sosna | ||
