Jeśli chcesz stworzyć układ tabeli za pomocą wikitekstu, masz wiele możliwości. Ta strona nie wyczerpuje wszystkich opcji, ale pokaże, jak wikitext odpowiada znacznikom HTML, jaki wpływ ma klasa CSS oraz przykład prostej tabeli działającej zarówno na komputerach, jak i urządzeniach mobilnych.

Podstawowa składnia tabeli

Niektóre tagi tabel HTML są wspierane przez MediaWiki, lecz nie ma gwarancji, że będą działać poprawnie. Z tego powodu radzimy używać wikitekstu – który w wielu aspektach jest skróconą formą HTML – do tworzenia tabeli, który jest opisany poniżej:

Opis XHTML Wiki syntax
Tabela <table></table>
{| parametry 
|}
Podpis tabeli <caption></caption>
|+ podpis
Wiersz tabeli <tr></tr>
|- parametry 
Komórki tabeli <td>komórka1</td>

<td>komórka2</td>

| komórka1
| komórka2
Komórki tabeli <td>komórka1</td> <td>komórka2</td> <td>komórka3</td>
|komórka1||komórka2||komórka3
Tytuł kolumny tabeli <th></th>
! tytuł
UWAGA: Użycie tabeli wewnątrz tabbera wymaga zastąpienia znaku | składnią {{!}}

Dodawanie atrybutów

Tabele tworzone w wikikodzie pozwalają również na dodawanie atrybutów HTML.

Atrybuty umieszczone bezpośrednio po znaczniku początku tabeli ({|) zostaną zastosowane do całej tabeli.

Możesz także nadawać atrybuty poszczególnym wierszom i komórkom. Na przykład liczby często wyglądają czytelniej, gdy są wyrównane do prawej.

Atrybuty wierszy dodaje się bezpośrednio po znaczniku rozpoczynającym wiersz (|-). Atrybuty komórek dodaje się po znaku rozpoczynającym komórkę — |, || lub !. Aby oddzielić atrybuty od właściwej zawartości komórki, należy użyć kolejnej pionowej kreski (|).

Przykładowe atrybuty:

  • class
  • style
  • colspan (tylko komórki)
  • rowspan (tylko komórki)
  • scope (tylko komórki)

Pełną listę dopuszczalnych atrybutów znajdziesz w specyfikacji HTML W3C dla tabel.

Uwaga: Atrybuty takie jak cellpadding, cellspacing, border, align, width, bgcolor są przestarzałe i nie powinny być używane.

Domyślne klasy tabel

Na Fandomie istnieje kilka domyślnych klas tabel, które nadają im styl:

  • brak klasy - tworzy podstawową siatkę tabeli, bez dodatkowego stylu. (Nie używaj do projektowania wyglądu!)
  • wikitable - domyślny styl MediaWiki. Dodaje prostą ramkę wokół wszystkich wierszy i kolumn. Komórki nagłówków mają szare tło.
  • article-table - nowoczesny wygląd tabeli. Dodaje odstęp między wierszami (gutter) i półprzezroczyste szare tło dla wszystkich wierszy. Komórki nagłówka są szare, podobnie jak w wikitable.
  • fandom-table - podobny do wikitable, ale z większymi odstępami wewnętrznymi. Nagłówek pozostaje przyklejony przy przewijaniu.
Uwaga: Wszystkie tabele na urządzeniach mobilnych automatycznie mają ustawioną klasę article-table, nawet jeśli przypiszesz inną klasę.

Przykład działania klas tabel:

{|
|+ Przykład tabeli bez klasy
|-
! Nagłówek
! Inny
|-
| Foo
| Bar
|}
Przykład tabeli bez klasy
Nagłówek Inny
Foo Bar
{| class="wikitable"
|+ Przykład klasy <code>wikitable</code>
|-
! Nagłówek
! Inny
|-
| Foo
| Bar
|}
Przykład klasy wikitable
Nagłówek Inny
Foo Bar
{| class="article-table"
|+ Przykład klasy <code>article-table</code>
|-
! Nagłówek
! Inny
|-
| Foo
| Bar
|}
Przykład klasy article-table
Nagłówek Inny
Foo Bar
{| class="fandom-table"
|+ Przykład klasy <code>fandom-table</code>
|-
! Nagłówek
! Inny
|-
| Foo
| Bar
|}
Przykład klasy fandom-table
Nagłówek Inny
Foo Bar

Tworzenie prostych tabel

Jak wyjaśniono gdzie indziej, tabele nie zawsze dobrze wyglądają na urządzeniach mobilnych. Najlepszym podejściem jest utrzymanie tak prostej sktruktury tabeli, jak to tylko możliwe.

Spójrz na poniższy wikitekst, a następnie zwróć uwagę, jak tabela wygląda na mniejszym ekranie telefonu:

{| class="article-table"
!Strona
!Miejsce 1
!Miejsce 2
!Miejsce 3
|-
|Strona A
|1
|2
|3
|-
|Strona B
|1
|2
|3
|-
|Strona C
|2
|3
|4
|}
Strona Miejsce 1 Miejsce 2 Miejsce 3
Strona A 1 2 3
Strona B 1 2 3
Strona C 2 3 4

Używanie atrybutów

Poniższy kod utworzy sortowalną tabelę typu wikitable z dodatkową klasą "myClass", o pełnej szerokości i ze wszystkimi komórkami wyśrodkowanymi.

{| class="wikitable sortable myClass" style="width:100%; text-align:center;"

MediaWiki pozwala również na przypisywanie atrybutów poszczególnym komórkom i wierszom. Przykładowo, poszczególne komórki mogą zostać scalone — atrybuty rowspan i colspan} określają, ile wierszy lub kolumn dana komórka powinna obejmować.

{| class="wikitable" style="width:100%"
! Kolumna 1
! colspan="2" | Kolumna 2 + 3
|-
| rowspan="2" | Zawartość 1
| colspan="2" | Zawartość 2
|-
| style="background:blue; color:white;" | Zawartość 3
| Zawartość 4
|- style="background:yellow; color:black;"
| Zawartość 5
| style="text-align:center" | Zawartość 6
| style="text-align:right" | Zawartość 7
|}
{| class="wikitable" style="width:100%"
! Kolumna 1 !! colspan="2" | Kolumna 2 + 3
|-
| rowspan="2" | Zawartość 1 || colspan="2" | Zawartość 2
|-
| style="background:blue; color:white;" | Zawartość 3 || Zawartość 4
|- style="background:yellow; color:black;"
| Zawartość 5 || style="text-align:center" | Zawartość 6 || style="text-align:right" | Zawartość 7
|}
Kolumna 1 Kolumna 2 + 3
Zawartość 1 Zawartość 2
Zawartość 3 Zawartość 4
Zawartość 5 Zawartość 6 Zawartość 7

Użycie atrybutu scope definiuje nagłówki dla tabel, które mają wiele komórek pod jednym nagłówkiem. Dla nagłówków kolumn lub wierszy obejmujących wiele komórek stosuje się rowgroup lub colgroup, a dla nagłówków obejmujących tylko jeden wiersz lub kolumnę – row lub col.

{| class="wikitable" style="width:100%"
! scope="col" |Kolumna 1
! colspan="2" scope="colgroup" | Kolumna 2 + 3
|-
! rowspan="2" scope="rowgroup" | Zawartość 1
| colspan="2" | Zawartość 2
|-
| Zawartość 3
| Zawartość 4
|-
! scope="row" |Zawartość 5
| Zawartość 6
| Zawartość 7
|}
Kolumna 1 Kolumna 2 + 3
Zawartość 1 Zawartość 2
Zawartość 3 Zawartość 4
Zawartość 5 Zawartość 6 Zawartość 7

Bardziej zaawansowane tabele

MediaWiki pozwala na tworzenie znacznie bardziej zaawansowanych tabel niż powyższe przykłady. Aby poznać inne możliwości wikitextowych tabel, możesz zacząć od strony pomocy MediaWiki dotyczącej tabel. Pamiętaj jednak, że wiele przykładów na mediawiki.org czy pomocy Wikipedii nie uwzględnia w pełni wyświetlania na urządzeniach mobilnych. Zawsze sprawdzaj, jak tabela wygląda na prawdziwym telefonie.

W niektórych przypadkach, gdy potrzebne są obliczenia lub powtarzające się struktury, można użyć szablonów lub szablonów Lua, zarówno do tworzenia gotowych struktur tabel, jak i wewnątrz komórek.

Zobacz też

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.