niedziela, 18 październik 2015 21:25

Artykuł z danymi tabelarycznymi Wyróżniony

Napisał
Oceń ten artykuł
(0 głosów)

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

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 @twitter

2. Tabela pasiasta (zebra)

# Imię Nazwisko Użytkownik
1 Marek Otto @mdo
2 Jakub Kowalski @fat
3 Jan Sosna @twitter

3. Tabela z obramowaniem

# Imię Nazwisko Użytkownik
1 Marek Otto @mdo
Mark Otto @TwBootstrap
2 Jakub Kowalski @fat
3 Jan Sosna @twitter

4. Tabela skondensowana

# Imię Nazwisko Użytkownik
1 Marek Otto @mdo
2 Jakub Kowalski @fat
3 Jan Sosna @twitter

5. Połączenie wszystkich stylów!

Pełna nazwa
# Imię Nazwisko Użytkownik
1 Marek Otto @mdo
2 Jakub Kowalski @fat
3 Jan Sosna @twitter
Czytany 1476 razy
Dział: Demo
MS

Najnowsze od MS

Więcej w tej kategorii: « Artykuł z galerią obrazów Artykuł z listami numerowanymi »
Powrót na górę