Przejdź do zawartości

MediaWiki w obrazkach/Tabele

Z Wikibooks, biblioteki wolnych podręczników.

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

[edytuj]

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

[edytuj]

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

[edytuj]

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

[edytuj]

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

[edytuj]

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

[edytuj]

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

[edytuj]

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 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

[edytuj]

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.


Przypisy

Źródła

[edytuj]