MediaWiki w obrazkach/Tabele

Tabele stanowią przydatne narzędzie przy podawaniu wielu danych na raz. Mogą też być stosowane do tworzenia ogólnej struktury stron wielokolumnowych. Za pomocą tabel często są tworzone w projektach MediaWiki strony główne serwisów, wikiportale tematyczne, spisy treści obszernych działów itp.

Niestety wikikod tabel jest stosunkowo prymitywny i sam w sobie umożliwia tworzenie tylko bardzo prostych tabel. Dopiero kombinacja wikikodu tabel i atrybutów dostępnych w języku XHTML oraz CSS umożliwia tworzenie ładnych i rozbudowanych tabel, co jednak wymaga biegłości w posługiwaniu się tymi dwoma językami tworzenia stron WWW. Dokładne opisanie wszystkich możliwości tworzenia wyglądu tabel z użyciem XHTML i CSS sprowadzałoby się do przedstawienia tu pełnego opisu tych języków, co znacznie wykracza poza zakres tego podręcznika.

Podstawowy kod tabel

Każda tabela może składać się z: tytułu, nagłówków, rzędów, kolumn i poszczególnych komórek, które występują na skrzyżowaniu rzędów i kolumn.

Wikikod tabel umożliwia w zasadzie wyłącznie tworzenie podstawowej struktury tabel i nic poza tym. Całą resztę trzeba zatem tworzyć przy pomocy CSS i XHTML.

Elementy wikikodu tabeli:^[1]

{\|	początek tabeli niezbędne
\|+	tytuł tabeli opcjonalnie; może być tylko jeden w jednej tabeli, musi być umieszczony zaraz po rozpoczęciu tabeli
\|-	nowy rząd tabeli - jeśli jest tylko jeden w całej tabeli oprogramowanie "domyślnie" go tworzy
!	nagłówek kolumny tabeli, opcjonalnie
\|	pojedyncza komórka tabeli, absolutnie niezbędne!
\|}	koniec tabeli niezbędne - zapomnienie o tym daje dziwne, nieprzewidywalne rezultaty

Wszystkie kody powyżej muszą być koniecznie umieszczone na samym początku linii tekstu. Inaczej nie zadziałają.
Atrybuty XHTML - można dołączać do każdego elementu tabeli poza kodem końca; atrybuty te trzeba wpisać w jednej linii zaraz po odpowiednim kodzie danego elementu; atrybuty te trzeba oddzielić od kodu jedną i tylko jedną spacją i jeśli podaje się ich kilka również jedną spacją od siebie nawzajem.
- Nagłówki, tytuły i komórki ((|, ! i |+) tabeli zawierają zwykle jakąś treść; atrybuty XHTML w tych elementach trzeba oddzielić od tej treści jednym znakiem "|" (tzw. pipe'm)
- Kody początku tabeli i rozpoczęcia nowego rzędu' ({| i |-) nie mogą zawierać żadnej treści, ale mogą zawierać atrybuty XHTML; omyłkowe dodanie znaku "|" na końcu listy atrybutów w tych kodach powoduje błędy niszczące strukturę tabel; jest to bardzo częsty błąd początkujących użytkowników.
Treść komórek, tytułu i nagłówków można wpisywać w jednej linii z kodami tych elementów tabeli lub wpisywać je w nowym wierszu, jeśli jednak treść zawiera sama w sobie wikikod, działający tylko na początku linii tekstu (np: listy, tytuły, inne tabele), koniecznie należy wpisywać treść w nowym wierszu.

Prosty przykład

Poniżej znajduje się prosty przykład stworzenia tabeli składającej się z tytułu, nagłówka kolumn, dwóch kolumn i trzech rzędów.

Najpierw prześledzimy krok po kroku tworzenie kodu, następnie będzie przedstawiony kod w całości i wreszcie rezultat jego działania.

Tabelę zaczynamy oczywiście od kodu jej otwarcia:

{|

dalej tworzymy jej tytuł:

|+ Tytuł przykładowej tabeli

następnie tworzymy nagłówek dwóch kolumn:

! Kolumna 1

! Kolumna 2

teraz musimy rozpocząć pierwszy rząd komórek:

|-

i po tym możemy wpisać treść dwóch komórek w pierwszym rzędzie:

| kolumna 1 rząd 1

| kolumna 2 rząd 1

po czym musimy zacząć drugi rząd:

|-

i możemy wpisywać treść komórek drugiego rzędu:

| kolumna 1 rząd 2

| kolumna 2 rząd 2

i ponownie rozpoczynamy, ostatni już 3 rząd:

|-

oraz wpisujemy treść komórek trzeciego rzędu:

| kolumna 1 rząd 3

| kolumna 2 rząd 3

a na koniec musimy zamknąć tabelę:

|}

W sumie więc powstał taki kod:

{|

|+ Tytuł przykładowej tabeli

! Kolumna 1

! Kolumna 2

|-

| kolumna 1 rząd 1

| kolumna 2 rząd 1

|-

| kolumna 1 rząd 2

| kolumna 2 rząd 2

|-

| kolumna 1 rząd 3

| kolumna 2 rząd 3

|}

i efekt:

Tytuł przykładowej tabeli
Kolumna 1	Kolumna 2
kolumna 1 rząd 1	kolumna 2 rząd 1
kolumna 1 rząd 2	kolumna 2 rząd 2
kolumna 1 rząd 3	kolumna 2 rząd 3

Jak widać efekt jest w sumie taki sobie, a to dlatego, że nie użyliśmy żadnych atrybutów XHTML i CSS, które sformatowały by tę tabelę dodając do niej np. siatkę kresek oddzielających kolumny od rzędów. Osoby nie znające XHTML i CSS mogą zatem posługiwać się tabelami w bardzo ograniczonym zakresie.

Na szczęście, w nowszych wersjach MediaWiki zaimplementowano standardową klasę CSS tabeli o nazwie wikitable, która w schludny sposób "sama" ją formatuje. Klasę tę można przypisać do tabeli za pomocą atrybutu class="" w kodzie rozpoczęcia tabeli:

{| class="wikitable"

Po tej prostej zmianie kod całej tabeli będzie wyglądał następująco:

{| class="wikitable"

|+ Tytuł przykładowej tabeli

! Kolumna 1

! Kolumna 2

|-

| kolumna 1 rząd 1

| kolumna 2 rząd 1

|-

| kolumna 1 rząd 2

| kolumna 2 rząd 2

|-

| kolumna 1 rząd 3

| kolumna 2 rząd 3

|}

i efekt:

Tytuł przykładowej tabeli
Kolumna 1	Kolumna 2
kolumna 1 rząd 1	kolumna 2 rząd 1
kolumna 1 rząd 2	kolumna 2 rząd 2
kolumna 1 rząd 3	kolumna 2 rząd 3

który dla tabel, mających zawierać proste zbiory danych jest w zupełności zadowalający.

Kilka przykładów wykorzystania atrybutów XHTML i CSS

Jak już wcześniej wspomniano opisanie działania wszystkich atrybutów XHTML i CSS, które można zastosować do tabeli znacznie wykracza poza zakres tego podręcznika. Zostanie tu jednak omówione kilka najważniejszych.

Pozycjonowanie

Pozycjonowanie całej tabeli można dokonywać za pomocą atrybutu XHTML align wstawianego do kodu rozpoczęcia tabeli. Może on przyjmować kilka wartości, z których najważniejsze to:

left - powoduje, że tabela jest umieszczana z lewej strony ekranu i opływana z prawej tekstem
right - powoduje, że tabela jest umieszczana z prawej strony ekranu i opływana tekstem z lewej strony
center - powoduje, że tabela jest umieszczana w środku ekranu i nie jest opływana przez tekst.

Przykładowe dodanie atrybutu pozycjonującego do pierwszej linii tabeli:

{| class="wikitable" align="left"

{| class="wikitable" align="right"

{| align="center"

I rezultat:

Tytuł przykładowej tabeli
Kolumna 1	Kolumna 2
kolumna 1 rząd 1	kolumna 2 rząd 1
kolumna 1 rząd 2	kolumna 2 rząd 2
kolumna 1 rząd 3	kolumna 2 rząd 3

To jest testowy tekst, który opływa tabelę z opcją left - czyli dosuniętą do lewej strony i opływaną z prawej. To jest testowy tekst, który opływa tabelę z opcją left - czyli dosuniętą do lewej strony i opływaną z prawej. To jest testowy tekst, który opływa tabelę z opcją left - czyli dosuniętą do lewej strony i opływaną z prawej.

Tytuł przykładowej tabeli
Kolumna 1	Kolumna 2
kolumna 1 rząd 1	kolumna 2 rząd 1
kolumna 1 rząd 2	kolumna 2 rząd 2
kolumna 1 rząd 3	kolumna 2 rząd 3

To jest testowy tekst, który opływa tabelę z opcją right - czyli dosuniętą do prawej strony i opływaną z lewej. To jest testowy tekst, który opływa tabelę z opcją right - czyli dosuniętą do prawej strony i opływaną z lewej. To jest testowy tekst, który opływa tabelę z opcją right - czyli dosuniętą do prawej strony i opływaną z lewej.

To jest testowy tekst, który nie opływa tabeli z opcją center

Tytuł przykładowej tabeli
Kolumna 1	Kolumna 2
kolumna 1 rząd 1	kolumna 2 rząd 1
kolumna 1 rząd 2	kolumna 2 rząd 2
kolumna 1 rząd 3	kolumna 2 rząd 3

lecz znajduje się pod nią lub nad nią.

Jak widać, działa to analogicznie do podobnych opcji dla grafiki. Nic dziwnego zatem, że przy mieszaniu tabeli z tekstem tworzą się takie same problemy jak przy grafice, tj. tworzenie się kiszkowatych tekstów przy nadmiernie stłoczonych tabelach porozrzucanych na lewo i prawo, oraz nachodzenie długich tabel na tytuły sekcji. (patrz:Wstawianie_obrazków#Uwagi). W przypadku tabel jednak, dodatkowym problemem jest to, że mogą one mieć zmienną szerokość i wysokość, zależnie od ustawień przeglądarki czytelnika.

Szerokość tabel

Szerokość tabeli można w pewnym stopniu sterować za pomocą atrybutu width, przy pomocy którego definiuje się stały jej rozmiar w pikselach lub procentach szerokości całej strony. Atrybut ten jednak może spowodować, że tekst wewnątrz tabeli, przy niektórych rozdzielczościach i innych ustawieniach przeglądarki użytkownika może wyglądać nieładnie. Tabela może się nam cała "rozjechać", jeśli np. ustalimy mniejszą jej szerokość niż szerokość umieszczonego w niej obrazka.

Atrybut "width" można też zastosować do pojedynczych kolumn i komórek - należy tylko pamiętać aby suma szerokości wszystkich kolumn nie przekraczała szerokości całej tabeli.

Przykład:

{| width="300 px" class="wikitable" - cała tabela ma mieć 300 pikseli

|+ Tytuł przykładowej tabeli

! Kolumna 1

! Kolumna 2 -

|-

| kolumna 1 rząd 1

| width="200 px" | kolumna 2 rząd 1 -a kolumna druga 200 px, czyli kolumnie pierwszej zostaje się szerokość 100 px

|-

| kolumna 1 rząd 2

| kolumna 2 rząd 2

|-

| kolumna 1 rząd 3

| kolumna 2 rząd 3

|}

i efekt:

Tytuł przykładowej tabeli
Kolumna 1	Kolumna 2
kolumna 1 rząd 1	kolumna 2 rząd 1
kolumna 1 rząd 2	kolumna 2 rząd 2
kolumna 1 rząd 3	kolumna 2 rząd 3

Kolory

Za pomocą atrybutów XHTML można sterować kolorami tła zarówno całych tabel jak i poszczególnych komórek. Można w ten sposób tworzyć nawet bardzo pstrokate tabelki, jednak w imię zachowania jednolitości typograficznej całego serwisu nie jest to zalecane w wielu projektach. Czasami jednak użycie w rozumny sposób koloru do tytułu czy pojedynczych komórek może pomóc wyróżnić w tabelach najbardziej istotne elementy.

Do zmiany kolorów tła służy atrybut XHTML:

bgcolor="xxx"

gdzie "xxx" - to angielska nazwa koloru - np. "red", "yellow", "green" itd. lub kod RGB zapisany w systemie szestnastkowym i poprzedzony krzyżkiem np. "#FFFFFF" (biały). Zapis kodem szestnastkowym daje oczywiście dużo więcej możliwych kolorów niż nazewnictwo słowne, ale wymaga korzystania z tabel kodów lub stosowania programów graficznych zamieniających określony kolor na ten kod. Można się w tym celu posłużyć też bezpłatnymi stronami WWW, takimi jak Color picker na free-webmaster-tools.com.^[2]

Przykład:

{|

|+ Tytuł przykładowej tabeli - tytuł na niebiesko

! Kolumna 1

! Kolumna 2

|- bgcolor="#FFF8DC" - jasnooliwkowy rząd

| kolumna 1 rząd 1

| kolumna 2 rząd 1

|- bgcolor="#FFF8DC" - jasnooliwkowy rząd

| kolumna 1 rząd 2

| kolumna 2 rząd 2

|- bgcolor="#FFF8DC" - jasnooliwkowy rząd

| kolumna 1 rząd 3

| bgcolor="salmon" | kolumna 2 rząd 3 - wyróżnienie jednej komórki kolorem "łososiowym"

|}

i rezultat:

Tytuł przykładowej tabeli
Kolumna 1	Kolumna 2
kolumna 1 rząd 1	kolumna 2 rząd 1
kolumna 1 rząd 2	kolumna 2 rząd 2
kolumna 1 rząd 3	kolumna 2 rząd 3

Łączenie komórek

Czasami w trakcie tworzenia tabel pojawia się potrzeba połączenia wybranych komórek w jedną. Np: w pierwszej kolumnie chcemy mieć jeden rząd komórek, a w pozostałych trzy, lub w jednym rzędzie chcemy mieć dwie kolumny, a w pozostałych dwie.

Łączenia komórek dokonuje się za pomocą atrybutów XHTML o nazwie:

colspan="x" - łączenie "x" kolumn w jednym rzędzie
rowspan="y" - łączenie "y" rzędów w jednej kolumnie.

Przykład na rowspan:

{| class="wikitable"

| Kolumna 1, rząd 1

| rowspan=2 | Kolumna 2, rząd 1 (oraz 2) - połączenie rzędów w kolumnie

| Kolumna 3, rząd 1

|-

| Kolumna 1, rząd 2

| Kolumna 3, rząd 2

|}

i efekt:

Kolumna 1, rząd 1	Kolumna 2, rząd 1 (oraz 2)	Kolumna 3, rząd 1
Kolumna 1, rząd 2	Kolumna 2, rząd 1 (oraz 2)	Kolumna 3, rząd 2

Przykład na colspan

{| class="wikitable"

| Kolumna 1, rząd 1

| colspan=2 | Kolumna 2 (i 3), rząd 1 - połączenie kolumn w rzędzie

|-

| Kolumna 1, rząd 2

| Kolumna 2, rząd 2

| Kolumna 3, rząd 2

|}

i rezultat:

Kolumna 1, rząd 1	Kolumna 2 (i 3), rząd 1
Kolumna 1, rząd 2	Kolumna 2, rząd 2	Kolumna 3, rząd 2

Obrazki w tabeli

Tabele czasami przydają się też do łączenia tekstu z grafiką w bardziej kontrolowany sposób niż oferuje to sam wikikod wstawiania obrazków.

Przykład:

Chcemy stworzyć prostą kolumnę ze zdjęciem ptaka i opisem jego podstawowych cech w artykule encyklopedycznym na jego temat, czyli tzw. infobox.

Tworzymy następującą tabelę^[3]:

{| width="255 px" align="left" class="wikitable" - tutaj użyto wcześniej opisanego atrybutu XHTML width="255 px", który ogranicza szerokość tabeli do 255 px.

! Modrosójka Błękitna

|-

| [[Grafika:Cyanocitta-cristata-004.jpg|250 px|center]] - obrazek w tabelce, jest o 5 px węższy od tabelki, dzięki czemu ładnie się w niej komponuje

|-

! Opis

|-

|

Północnoamerykański ptak o niebiesko-lawendowym upierzeniu od

czubka głowy do połowy ciała. Od połowy w dół, kolor zmienia się w ciemniejszy

odcień niebieskiego do czarnego. Skrzydła w kolorze jasno-niebieskim

i białawy kuper.

Ptak ma białawy spód, czarną opaskę na szyi i boku głowy

|}

która wygląda następująco:

Modrosójka Błękitna

Opis
Północnoamerykański ptak o niebiesko-lawendowym upierzeniu od czubka głowy do połowy ciała. Od połowy w dół, kolor zmienia się w ciemniejszy odcień niebieskiego do czarnego. Skrzydła w kolorze jasno-niebieskim i białawy kuper. Ptak ma białawy spód, czarną opaskę na szyi i boku głowy.