Poniższy poradnik tłumaczy, jak tworzyć i modyfikować tabele na Mruczek Wiki. Jeśli w poniższym poradniku nie znajdziesz wystarczająco informacji, spróbuj przejść do poradnika MediaWiki.
Podstawowe znaki
Tworzenie prostej tabeli
{| |
Początek tabeli. Musi znajdować się na początku.
|
|+ |
Tytuł tabeli. Może być tylko 1. Umieszczamy go zaraz po rozpoczęciu tabeli.
|
|- |
Przejście do kolejnego wiersza.
|
! |
Wyróżniona komórka
|
| |
Zwykła komórka
|
|} |
Koniec tabeli. Musi znajdować się na końcu.
|
Stwórzmy teraz najbardziej podstawową wersję tabeli.
Wpisujesz
|
Otrzymujesz
|
{|
|Kurczak
|Kurczaki
|-
|Ziemniak
|Ziemniaki
|}
|
Kurczak
|
Kurczaki
|
Ziemniak
|
Ziemniaki
|
|
Komórki wiersza możesz też zapisać w jednej linii. W takiej sytuacji należy oddzielać je za pomocą ||
.
Wpisujesz
|
Otrzymujesz
|
{|
|Kurczak || Kurczaki
|-
|Ziemniak || Ziemniaki
|}
|
Kurczak |
Kurczaki
|
Ziemniak |
Ziemniaki
|
|
W przypadku wyróżnionych komórek należy oddzielać je za pomocą !!
.
Wpisujesz
|
Otrzymujesz
|
{|
! Sam !! W grupie
|-
|Kurczak || Kurczaki
|-
|Ziemniak || Ziemniaki
|}
|
Sam |
W grupie
|
Kurczak |
Kurczaki
|
Ziemniak |
Ziemniaki
|
|
Formatowanie tabeli
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).
|
Łączenie komórek
Łączenie komórek w wierszu
Kod |
Funkcje
|
colspan="x" |
Łączenie komórek w wierszu, gdzie "x" to liczba komórek do scalenia. Umieść przed scaloną komórką.
|
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable"
|colspan="4" | Ulubione liczby Kenexa
|-
|69 || 123 || 369 || 666
|}
|
Ulubione liczby Kenexa
|
69 |
123 |
369 |
666
|
|
Łączenie komórek w kolumnie
Kod |
Funkcje
|
rowspan="y" |
Łączenie komórek w kolumnie, gdzie "y" to liczba komórek do scalenia. Umieść przed scaloną komórką.
|
Wpisujesz
|
Otrzymujesz
|
{| class="wikitable"
|rowspan="4" | Ulubione liczby Kenexa || 69
|-
|123
|-
|369
|-
|666
|}
|
Ulubione liczby Kenexa |
69
|
123
|
369
|
666
|
|
Zobacz też