Help: Pomoc:Tabele

Edytuj
Komentarze              Archiwum wersji (wszystkie edycje)

Skopiowano ze stron roboczych projektu Wolne Podręczniki

Tabele

Streszczenie 
Tabele na wiki Wolnych Podręczników tworzy się za pomocą specjalnego kodu, który nie jest zbyt intuicyjny w użyciu i w dodatku ma ograniczoną funkcjonalność. Sam w sobie umożliwia tworzenie tylko bardzo prostych tabel. Dopiero kombinacja kodu 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. Z tego względu, jeśli potrzebujesz dołączyć do podręcznika złożoną tabelę i nie wiesz jak to zrobić - wypełnij formularz na stronie Pomoc:Zapotrzebowanie na tabelę.

Spis treści


Podstawowy kod tabel

Każda tabela może składać się z: tytułu, nagłówków, rzędów, kolumn i poszczególnych cel, 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:<cite_reference_link>

Wikikod Opis
{| początek tabeli (niezbędny)
|+ tytuł tabeli (opcjonalnie, może być tylko jeden w tabeli i musi być zaraz po rozpoczęciu)
|- rozpoczęcie rzędu (opcjonalne w pierwszym rzędzie)
! nagłówki kolumn (opcjonalnie)
| pojedyncza cela (cele są absolutnie niezbędne!)
|} zamknięcie tabeli (niezbędne)
  • 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 cele ((|, ! 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ść cel, 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 cel:

|-

i po tym możemy wpisać treść dwóch cel 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ść cel drugiego rzędu:

| kolumna 1 rząd 2
| kolumna 2 rząd 2

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

|-

oraz wpisujemy treść cel 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ływa 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:Pomoc:Grafika#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 cel - 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 cel. 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 cel 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.<cite_reference_link>

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

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

Łączenia cel 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

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ę<cite_reference_link>:

{| 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
Cyanocitta-cristata-004.jpg
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

<cite_references_prefix><cite_references_link_one> <cite_references_link_one> <cite_references_link_one><cite_references_suffix>

Tekst tego rozdziału pochodzi z podręcznika MediaWiki w obrazkach z Wikibooks. Źródło [1]. Autorzy: [2]