--=REKLAMA=--

Pomoc

Edycja artykułów/Więcej o tabelach

Z Joomla!WikiPL

Zastosowanie XHTML i CSS pozwala wzbogacić formatowanie tabel.

Tabelka z klasą

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 takiej prostej zmianie nasza przykładowa tabela wyraźnie zmieni wystrój:

Tytuł przykładowej tabeli
Pierwszy nagłówek Drugi nagłówek Trzeci nagłówek
kolumna 1 rząd 1 kolumna 2 rząd 1 kolumna 3 rząd 1
kolumna 1 rząd 2 kolumna 2 rząd 2 kolumna 3 rząd 2
połączone kolumny rząd 3

Pozycjonowanie

Pozycjonowanie całej tabeli można dokonywać za pomocą atrybutu XHTML align, wstawianego do kodu rozpoczęcia tabeli, albo za pomocą atrybutu style. Atrybut align może przyjmować jedną z trzech wartości:

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

W atrybucie style można skorzystać z własności float oraz - do wyśrodkowania - z własności center'.

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

{| class="wikitable" align="left"
{| class="wikitable" align="right" albo {| class="wikitable" style="float:right"
{| align="center" albo {| class="wikitable" style="margin: 0 auto"

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ą style="float: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ą style="margin: 0 auto"

Tytuł przykładowej tabeli
Pierwszy nagłówek Drugi nagłówek Trzeci nagłówek
kolumna 1 rząd 1 kolumna 2 rząd 1 kolumna 3 rząd 1
kolumna 1 rząd 2 kolumna 2 rząd 2 kolumna 3 rząd 2
połączone kolumny rząd 3

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

Szerokość tabel

Szerokością tabeli można sterować w pewnym stopniu za pomocą atrybutu width. 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.

Szerokość ustalamy bezwzględnie - w pikselach lub względnie - w procentach szerokości strony lub szerokości tabeli, gdy dotyczy komórek.

Efekt nie zawsze jednak bywa zadowalający, zwłaszcza gdy w którejś z komórek znajdzie się obrazek większy niż ustalona szerokość tabeli czy komórki.

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

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

Kolory

Za pomocą atrybutów XHTML albo reguł CSS 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 nie jest to zalecane. Niekiedy jednak rozumne użycie koloru do tytułu czy pojedynczych komórek może pomóc wyróżnić w tabelach najbardziej istotne elementy.

Atrybut XHTML

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.[1]

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

Atrybut STYLE z klasą CSS

Zamiast nieco przestarzałego atrybutu bgcolor lepiej zastosować atrybut style i własności background-color oraz color, np.:

style="background-color:#FFF8DC; color:#ff0000"
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