Wiki Page Content

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

  • <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 :D

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

Generowanie układu tabeli

 ||||||<tablewidth="80%">'''Nagłowek'''||
 ||komórka 1||komórka 2||komórka 3||
 ||<rowspan=2> połączone wiersze||||<bgcolor='#E0E0FF'> połączone 2 kolumny||
 ||<rowbgcolor="#FFFFE0">komórka 2 ||komórka 3||
  • Nagłowek

    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ąski||<:99%> szeroki||
  • wąski

    szeroki

Łą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 ponad 2 kolumnami

Położenie tekstu w komórce

 ||<(> left (do lewej) ||<^|3> top (do góry) ||<v|3> bottom (do dołu) ||
 ||<:> centered (na środku)||
 ||<)> right (do prawej) ||
  • left (do lewej)

    top (do góry)

    bottom (do dołu)

    centered (na środku)

    right (do prawej)

Kolory tła

 ||<#FF8080> red (czerwony) ||<#80FF80> green (zielony) ||<#8080FF> blue (niebieski) ||
  • red (czerwony)

    green (zielony)

    blue (niebieski)

Wstawianie Tabel z danymi z innych źródeł