Formatowanie tabel

Drukuj

Szczegóły: Formatowanie zawartości; 20 wrzesień 2015; Stefan Wajda

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

Przykład tabeli. Opis struktury
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

<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

Opcje tabeli

Przykład tabeli. Znakowanie
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

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ę	Nazwisko	Użytkownik
1	Marek	Otto	@mdo
2	Jakub	Kowalski	@fat
3	Jan	Sosna	@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ę	Nazwisko	Użytkownik
1	Marek	Otto	@mdo
2	Jakub	Kowalski	@fat
3	Jan	Sosna	@twitter

3. Tabela z obramowaniem

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

<table class="table table-bordered">
  …
</table>

#	Imię	Nazwisko	Użytkownik
1	Marek	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jakub	Kowalski	@fat
3	Jan 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ę	Nazwisko	Użytkownik
1	Marek	Otto	@mdo
2	Jakub	Kowalski	@fat
3	Jan 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ę	Nazwisko	Użytkownik
1	Marek	Otto	@mdo
2	Jakub	Kowalski	@fat
3	Jan Sosna		@twitter

Rozwiązania dla wydawców stron