Pomoc:Tabele

Z MruczekWiki
Przejdź do nawigacji Przejdź do wyszukiwania

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ż