Czas czytania: 3 minutMimo 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 Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
|---|
| 2 | Jacob | Thornton | @fat |
|---|
| 3 | Larry | the Bird | @twitter |
|---|
<table class="table">
<caption>Optional table caption.</caption>
<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>
Bootstrap przewiduje dla swoich tabel kilka opcji wyglądu takich jak:
Tabela z co drugim wierszem pokolorowanym
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
|---|
| 2 | Jacob | Thornton | @fat |
|---|
| 3 | Larry | the Bird | @twitter |
|---|
Dodajemy do tabeli klasę
<table class="table table-striped">
<tbody>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</tbody>
<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>
Tabela z obramowaniem
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
|---|
| 2 | Jacob | Thornton | @fat |
|---|
| 3 | Larry | the Bird | @twitter |
|---|
<table class="table table-bordered">
<tbody>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</tbody>
<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>
Tabela z podświetlonym wierszem, na którym aktualnie znajduje się kursor
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
|---|
| 2 | Jacob | Thornton | @fat |
|---|
| 3 | Larry | the Bird | @twitter |
|---|
<table class="table table-hover">
<tbody>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</tbody>
<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>
Tabela pokolorowana na różne kolory:
| # | 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 |
|---|
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="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="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="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="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="danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
Responsywna wersja tabeli:
| # | 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 |
|---|
| # | 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 |
|---|
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
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
Like this:
Like Loading...
Related
