Podstawowe tabele nie są zbyt urodziwe, ale na szczęście możemy je upiększyć, dzięki formatowaniu.
Informacje ogólne dotyczące całej tabeli dodajemy w linii {| class="właściwości oddzielone spacjami"
class="wikitable"
Do każdej tabeli warto dodać klasę wikitable, dzięki czemu staje się czytelniejsza oraz bardziej podatna na formatowanie. Jako pierwszą linię tabeli zamiast {|
wpisz {| class="wikitable"
.
Kod |
Funkcje
|
{| class="wikitable" |
Umożliwia formatowanie tabeli i daje jej czytelniejszy wygląd. Zalecane do każdej tabeli. Wpisz w pierwszej linii tabeli.
|
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable"
! Sam !! W grupie
|-
|Kurczak || Kurczaki
|-
|Ziemniak || Ziemniaki
|}
|
Sam |
W grupie
|
Kurczak |
Kurczaki
|
Ziemniak |
Ziemniaki
|
|
Gigapadding
Aby tabela miała większe paddingi, jako nagłówek umieść: {| class="wikitable gigapadding"
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable gigapadding"
! Sam !! W grupie
|-
|Kurczak || Kurczaki
|-
|Ziemniak || Ziemniaki
|}
|
Sam |
W grupie
|
Kurczak |
Kurczaki
|
Ziemniak |
Ziemniaki
|
|
Możliwość sortowania
Jeśli chcesz dać użytkownikowi możliwość sortowania, w pierwszej linii tabeli wpisz {| class="wikitable sortable"
.
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable sortable"
! Towar !! Cena
|-
|Nasiono kenexa || 69
|-
|Dorosły kenex || 123
|}
|
Towar |
Cena
|
Nasiono kenexa |
69
|
Dorosły kenex |
123
|
|
Atrybuty HTML
Dla całej tabeli
Aby atrybuty HTML dotyczyły całej tabeli, umieść je przy znaczniku rozpoczynającym tabelę {|
. W poniższym przykładzie tekst w komórkach został wyśrodkowany oraz pokolorowany na zielono.
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable" style="text-align: center; color: green;"
! Towar !! Cena
|-
|Nasiono kenexa || 69
|-
|Dorosły kenex || 123
|}
|
Towar |
Cena
|
Nasiono kenexa |
69
|
Dorosły kenex |
123
|
|
Dla komórki
Możesz też atrybuty umieścić przed wybranymi komórkami. W poniższym przykładzie komórki z cenami wyrównano do prawej.
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable"
! Towar !! Cena
|-
|Nasiono kenexa || style="text-align:right;" | 69
|-
|Dorosły kenex || style="text-align:right;" | 123
|}
|
Towar |
Cena
|
Nasiono kenexa |
69
|
Dorosły kenex |
123
|
|
Dla wiersza
Możesz też atrybuty umieścić dla całych wierszy. Umieść je w linii ze znacznikiem rozpoczynającym nowy wiersz |-
. W poniższym przykładzie wiersz z nasionem kenexa pokolorowano na zielono, a z dorosłym kenexem - na żółto.
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable"
! Towar !! Cena
|- style="color: green;"
|Nasiono kenexa || style="text-align:right;" | 69
|- style="color: yellow;"
|Dorosły kenex || style="text-align:right;" | 123
|}
|
Towar |
Cena
|
Nasiono kenexa |
69
|
Dorosły kenex |
123
|
|
Szerokość tabeli i kolumny
Aby ustawić szerokość w procentach, użyj atrybutu width: x%
, gdzie "x" to szerokość, jaką chcesz ustawić. Przykładowo jeśli tabela ma zajmować 85% szerokości artykułu, wpisz w pierwszej linii tabeli {| class="wikitable" style="width: 85%;"
.
Przykład:
Jestem tabelą, która zajmuje 85% szerokości strony!
|
Jestem kolumną zajmującą 40% szerokości tabeli!
|
Jestem kolumną zajmującą 60% szerokości tabeli!
|
{| class="wikitable" style="width: 85%;"
| colspan="2" | Jestem tabelą, która zajmuje 85% szerokości strony!
|-
| style="width: 40%"| Jestem kolumną zajmującą 40% szerokości tabeli!
| style="width: 60%"| Jestem kolumną zajmującą 60% szerokości tabeli!
|}
Jeśli chcesz ustawić szerokość w pikselach, zamiast symbolu "%
" użyj "px
".
Oblewanie tabeli tekstem
Standardowo obok tabeli nie może znaleźć się żaden tekst. Aby jednak to zrobić, trzeba skorzystać z float
.
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable" style="float:right"
! Towar !! Cena
|- style="color: green;"
|Nasiono kenexa || style="text-align:right;" | 69
|- style="color: yellow;"
|Dorosły kenex || style="text-align:right;" | 123
|}
kenex (z małej litery!) to insekt, który przedostaje się do komputera i wywołuje na nim niepożądane działania. Najczęściej kenexy wyświetlają regulaminy, cenzurują wulgaryzmy i blokują dostęp do pirackich treści. Zapisywanie kenexów z małej litery jest najważniejszą zasadą poprawnej pisowni i jest ponad resztą zasad. Także jak są na początku zdania lub są tytułem artykułu na Mruczek Wiki. Więcej informacji znajdziesz w artykule [[kenex (insekt)]].
|
Towar |
Cena
|
Nasiono kenexa |
69
|
Dorosły kenex |
123
|
kenex (z małej litery!) to insekt, który przedostaje się do komputera i wywołuje na nim niepożądane działania. Najczęściej kenexy wyświetlają regulaminy, cenzurują wulgaryzmy i blokują dostęp do pirackich treści. Zapisywanie kenexów z małej litery jest najważniejszą zasadą poprawnej pisowni i jest ponad resztą zasad. Także jak są na początku zdania lub są tytułem artykułu na Mruczek Wiki. Więcej informacji znajdziesz w artykule kenex (insekt).
|
Aby wyglądało to bardziej estetycznie, można ustawić marginesy wokół tabeli za pomocą margin
.
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable" style="float:right; margin-left: 10px;"
! Towar !! Cena
|- style="color: green;"
|Nasiono kenexa || style="text-align:right;" | 69
|- style="color: yellow;"
|Dorosły kenex || style="text-align:right;" | 123
|}
kenex (z małej litery!) to insekt, który przedostaje się do komputera i wywołuje na nim niepożądane działania. Najczęściej kenexy wyświetlają regulaminy, cenzurują wulgaryzmy i blokują dostęp do pirackich treści. Zapisywanie kenexów z małej litery jest najważniejszą zasadą poprawnej pisowni i jest ponad resztą zasad. Także jak są na początku zdania lub są tytułem artykułu na Mruczek Wiki. Więcej informacji znajdziesz w artykule [[kenex (insekt)]].
|
Towar |
Cena
|
Nasiono kenexa |
69
|
Dorosły kenex |
123
|
kenex (z małej litery!) to insekt, który przedostaje się do komputera i wywołuje na nim niepożądane działania. Najczęściej kenexy wyświetlają regulaminy, cenzurują wulgaryzmy i blokują dostęp do pirackich treści. Zapisywanie kenexów z małej litery jest najważniejszą zasadą poprawnej pisowni i jest ponad resztą zasad. Także jak są na początku zdania lub są tytułem artykułu na Mruczek Wiki. Więcej informacji znajdziesz w artykule kenex (insekt).
|