--=REKLAMA=--
Zastosowanie XHTML i CSS pozwala wzbogacić formatowanie tabel.
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:
Po takiej prostej zmianie nasza przykładowa tabela wyraźnie zmieni wystrój:
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 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:
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:
I rezultat:
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.
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"
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ś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:
i efekt:
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 |
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:
Przykład na rowspan:
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
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 |
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.
Do zmiany kolorów tła służy atrybut XHTML:
Przykład:
i rezultat:
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 |
Zamiast nieco przestarzałego atrybutu bgcolor lepiej zastosować atrybut style i własności background-color oraz color, np.:
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 |