Wygląd tabel w szablonach udostępnianych w ramach projektu Kuźnia Dostępnych Stron został zdefiniowany w arkuszach stylów odziedziczonych z ram projektowych Bootstrap. Dowiedz się, jak znakować tabele w swoich artykułach, aby się ładnie prezentowały.

Znakowanie tabeli

ZnacznikOpis
<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
<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

Opcje tabeli

NazwaKlasaOpis
DomyślnieBrakBez stylów, tylko kolumny i wiersze
Podstawowa .tableTylko linie poziome między wierszami
Obramowanie .table-borderedZaokrąglone narożniki i obramowanie zewnętrzne
Zebra - paski .table-stripedLekko szary kolor tła w wierszach nieparzystych (1, 3, 5, etc)
Skondensowana .table-condensedZmniejsza 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

Tabele są stylizowane automatycznie tylko kilkoma krawędziami, aby zapewnić przejrzystość i czytelną strukturę. With 2.0, the .table class is required.

<table class="table">
  …
</table>
#ImięNazwiskoUżytkownik
1MarekOtto@mdo
2JakubKowalski@fat
3JanSosna@twitter

2. Tabela pasiasta (zebra)

Popraw nieco wygląd w swojej tabeli, dodając lekko szare tło w wierszach nieparzystych (zebra) —wystarczy dodać klasę .table-striped.

Uwaga: Tabele pasiaste używają selektora CSS :nth-child, który jest niedostępny w przeglądarkach IE7-IE8.

<table class="table table-striped">
  …
</table>
#ImięNazwiskoUżytkownik
1MarekOtto@mdo
2JakubKowalski@fat
3JanSosna@twitter

3. Tabela z obramowaniem

Dodaj obramowanie wokół tabeli i zaokrąglone narożniki

<table class="table table-bordered">
  …
</table>
#ImięNazwiskoUżytkownik
1MarekOtto@mdo
MarkOtto@TwBootstrap
2JakubKowalski@fat
3Jan Sosna@twitter

4. Tabela skondensowana

Uczyń swą tabelę bardziej skondesowaną, dodając klasę.table-condensed, aby zmniejszyć o połowę dopełnienia wszystkich komórek.

<table class="table table-condensed">
  …
</table>
#ImięNazwiskoUżytkownik
1MarekOtto@mdo
2JakubKowalski@fat
3Jan Sosna@twitter

5. Połączenie wszystkich stylów!

Masz pełną swobodę w dowolnym łączeniu klas stylizujacych tabelę, by osiągnąć różny wygląd przez wykorzystanie dostępnych klas.

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
Pełna nazwa
#ImięNazwiskoUżytkownik
1MarekOtto@mdo
2JakubKowalski@fat
3Jan Sosna@twitter