PomocPrzyTabelach - RESEARCH @ info.uvt.ro

Tabele

Aby stworzyć tabele zaczynasz i kończysz linię znacznikiem tabeli, czyli "||". Pomiędzy tym początkowym i końcowym znacznikiem możesz tworzyć każda liczbę komórek oddzielając je "||". Aby umieścić komórkę, która obejmuje kilka kolumn, zaczynasz te komórkę z więcej niż jednym znacznikiem komórki. Przyległe linie tego samego poziomu akapitu zawierającego znaczniki tabeli są łączone w jedną tabelę.

Po więcej informacji na temat znaczników zajrzyj na PomocPrzyEdycji.

Atrybuty tabeli

Aby uzyskać połączone kolumny, oprócz powtarzania znaczników komórki, można bezpośrednio skorzystać z wielu html'owych atrybutów tabeli. Każdy taki atrybut musi być umieszczony pomiędzy <...> bezpośrednio po znaczniku komórki.

Znaczniki zapisane w stylu wiki mają następujące postacie i właściwości:

<-2>: łączenie kolumm
<|2>: łączenie wierszy
<style="..."> wstawi dany styl do komórki - (td) html
<rowstyle="..."> styl obejmie cały wiersz - (tr) html
<tablestyle="..."> ustawienie stylu dla całej tabeli - (table) html
<class="..."> wstawia styl CSS do komórki - (td) html
<id="..."> wstawia styl CSS o danym identyfikatorze do komórki - (td) html

Powyższe "sposoby" są wszystkim czego potrzebujesz aby formatować tabelę. Użyj tylko stylu CSS a zostanie wygenerowany odpowiedni html. Ewentualnie admin i użytkownicy (poprzez UserPreferences) mogą rozszerzyć CSS o swoje własne definicje a następnie odnosić się do nich poprzez class lub id. Możesz używać kilku opcji naraz poprzez napisanie ich jedna po drugiej w tym samym nawiasie (np. <tablestyle="..." rowstyle="..."> w pierwszej komórce, ustawia zarówno szerokość tabeli jak i styl pierwszego wiersza).

Ponadto nadal wspierane są stare znaczniki tabeli (które swój efekt opierają na dodaniu dodatkowej wartości do stylu):

<50%>: szerokość komórki (dołączy width: 50%; do stylu)
<width="50%">: robi dokładnie to samo
<tablewidth="100%">: ustawia szerokość tabeli na 100% (ważny tylko w pierwszym wierszu tabeli)
<(>: położenie tekstu do lewej (dołączy text-align: left; do stylu)
<:>: wycentrowanie tekstu (dołączy text-align: center; do stylu)
<)>: położenie do prawej (dołączy text-align: right; do stylu)
<^>: wyrównanie do góry (dołączy vertical-align: top; do stylu)
<v>: wyrównanie do dołu (dołączy vertical-align: bottom; do stylu)
<#XXXXXX>: kolor tła (dłączy background-color: #XXXXXX; do stylu)
<bgcolor="#XXXXXX"> robi to samo
<rowbgcolor="#XXXXXX"> ustawia kolor tła dla wiersza (ważny tylko w pierwszej komórce)
<tablebgcolor="#XXXXXX"> ustawia kolor tła tabeli

Jeżeli użyjesz kilku wykluczających się opcji jak np. <(:)>, wtedy ostatnia opcja będzie brana pod uwagę. Nie ma wyraźnej opcji dla pionowego centrowania (middle), ponieważ jest to domyślna opcja.

Przykłady (nowy styl)

Generowanie układu tabeli

 ||||||<tablestyle="width: 80%">'''Nagłówek'''||
 ||komórka 1||komórka 2||komórka 3||
 ||<rowspan=2> połączone wiersze ||||<style="background-color: #E0E0FF;"> połączone 2 kolumny||
 ||<rowstyle="background-color: #FFFFE0;">komórka 2 ||komórka 3 ||

Nagłówek

komórka 1

komórka 2

komórka 3

połączone wiersze

połączone 2 kolumny

komórka 2

komórka 3

Szerokość komórek

 ||wąska||<style="width: 99%; text-align: center;"> szeroka ||

wąska

szeroka

Łączenie wierszy i kolumn

 ||<|2> 2 wiersze || wiersz 1 ||
 || wiersz 2 ||
 ||<-2> wiersz 3 ponad 2 kolumnami ||

2 wiersze

wiersz 1

wiersz 2

wiersz 3 pod 2 kolumnami

Położenie tekstu w komórce

 ||<style="text-align: left"> left (do lewej) ||<|3 style="vertical-align: top;"> top (do góry)  
 ||<|3 style="vertical-align: bottom;"> bottom (do dołu) ||
 ||<style="text-align: center;"> centered (wycentrowane) ||
 ||<style="text-align: right;"> right (do prawej) ||

left (do lewej)

top (do góry)

bottom (do dołu)

centered (wycentrowane)

right (do prawej)

Kolory tła

 ||<style="background-color: red;"> red (czerwony)||<style="background-color: green;"> green  
 (zielony) ||<style="background-color: blue;"> blue (niebieski) ||

red (czerwony)

green (zielony)

blue (niebieski)

Przykłady (stary styl)