Tabele

Această pagină oferă informații despre sintaxa construirii unor tabele wiki. Nu toate aceste exemple tehnice sînt potrivite pentru articole; folosirea culorilor pentru background-ul tabelelor nu este o idee foarte bună.

Încercați să scrieți tabele relativ simple --nu uitați că și alți contribuitori vor modifica articolul!

Bară verticală

Deși codul HTML funcționează, recomandăm folosirea codurilor wiki pentru construirea tabelelor.

   * pentru a începe un tabel folosiți codul {| iar la sfîrșit, codul |} .
   {|
cod tabel
|}
* puteți include un titlu printr-o linie nouă cu bară verticală și semnul plus "|+" :
   {|
|+ titlu
cod tabel
|}
* pentru a adăuga un rînd nou, scrieți: "|-". Codul pentru celulele rîndului va începe în linia următoare.
   {|
|+ titlu tabel
   |-
cod celulă
|-
cod celulă
|}
* scrieți codul pentru fiecare celulă din tabel în rîndul următor, începînd cu o bară verticală:
{|
|+ titlu tabel
   |-
| cod celulă
   |-
| cod celulă
   | mai multe celule în același rînd
   |}
* Celulele pot fi separate fie folosind o linie nouă și bare verticale fie folosind bare verticale duble "||" în aceeași linie. 
Ambele produc același rezultat:
{|
|+ titlu tabel
   |-
|celulă 1 || celulă 2 || celulă 3
|-
|celulă A 
|celulă B
|celulă C
|}
Rezultat:

titlu tabel

celulă 1	celulă 2	celulă 3
celulă A	celulă B	celulă C

     * un rînd pentru titlurile coloanelor se creează folosind "!" în loc de "|" și "!!" în loc de "||".
   {|
|+ titlu tabel
   ! titlu coloană 1 !! titlu coloană 2 !! titlu coloană 3
|-
|celulă 1 || celulă 2 || celulă 3
|-
|celulă A
|celulă B
|celulă C
|}
Rezultat:

titlu tabel

titlu coloană 1	titlu coloană 2	titlu coloană 3
celulă 1	celulă 2	celulă 3
celulă A	celulă B	celulă C

     * prima celulă a rîndului apare îngroșat dacă la începutul liniei se scrie "!" în loc de "|".
   {|
|+ titlu tabel
    ! titlu coloană 1 !! titlu coloană 2 !! titlu coloană 3
   |-
! titlu rînd 1
| celulă 2 || celulă 3
|-
! titlu rînd A
|celulă B
|celulă C
|}
Rezultat:

titlu tabel

titlu coloană 1	coloană 2	coloană 3
titlu rînd 1	celulă 2	celulă 3
titlu rînd A	celulă B	celulă C

   * Un parametru opțional poate modifica modul de afișare a celulelor, a rîndurilor sau a întregului tabel. De exemplu, putem 
adăuga un chenar tabelului. Incrementați valoarea parametrului border și vedeți ce se întâmplă.
   {| border="1"
|+ titlu tabel
    ! titlu coloană 1 !! titlu coloană 2 !! titlu coloană 3
   |-
 ! titlu rînd 1
| celulă 2 || celulă 3
|-
 ! titlu rînd A
|celulă B ||celulă C
|} 

Rezultat:

titlu tabel

titlu coloană 1	titlu coloană 2	titlu coloană 3
titlu rînd 1	celulă 2	celulă 3
titlu rînd A	celulă B	celulă C

Exemple

Ambele coduri generează același rezultat.

Cod Wiki

{|
| celulă 1, rînd 1
| celulă 2, rînd 1
|-
| celulă 1, rînd 2
| celulă 2, rînd 2
|}

{|
| celulă 1, rînd 1 || celulă 2, rînd 1
|-
| celulă 1, rînd 2 || celulă 2, rînd 2
|}

Rezultat

celulă 1, rînd 1	celulă 2, rînd 1
celulă 1, rînd 2	celulă 2, rînd 2

Tabel înmulțiri

Cod Wiki

{| class="wikitable" style="text-align:center"
|+Tabel înmulțiri
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

Rezultat

Tabel înmulțiri

×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

Culori; scopul parametrilor

Există două moduri de a specifica culoarea textului și a fundalului (background) pentru o singură celulă. Este recomandată prima formă.

Cod Wiki

{|
| style="background:red; color:white" | abc
| def
| bgcolor="red" | <font color="white"> ghi </font>
| jkl
|}

Rezultat

abc

def

ghi

jkl

Culorile pot fi specificate pentru un rînd întreg sau pentru tot tabelul; parametrii pentru un rînd sînt prioritari față de cei pentru tabel iar parametrii pentru celulă sînt prioritari față de cei pentru rînd:

Cod Wiki

{| style="background:yellow; color:green"
|-
| abc
| def
| ghi
|- style="background:red; color:white"
| jkl
| mno
| pqr
|-
| stu
| style="background:silver" | vwx
| yz
|}

Rezultat

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Lățime, înălțime

Puteți specifica lățimea și înălțimea unui tabel la fel ca și înălțimea unui rînd. Dacă lățimea nu este specificată pentru toate coloanele și/sau înălțimea nu este specificată pentru toate rîndurile, atunci e posibil să apară unele ambiguități și rezultatul depinde de browser.

Cod Wiki

{| style="width:45%; height:200px" border="1"
|-
| abc
| def
| ghi
|- style="height:100px"
| jkl
| style="width:200px" |mno
| pqr
|-
| stu
| vwx
| yz
|}

Rezultat

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Lățimea unei coloane

Dacă vreți să folosiți un tabel în care coloanele au lățimi diferite, urmăriți acest exemplu. Atenție: "!" îngroașă textul; "width" este necentrat.

Cod Wiki

{| border="1" cellpadding="2"
! width="50"|An
| width="225" |Jucător
| width="225" align="center"|Țară
|-
|2006
|Andrei Pavel
|România
|-
|2006
|Roger Federer
|Elveția
|}

An	Jucător	Țară
2006	Andrei Pavel	România
2006	Roger Federer	Elveția

Mixtură

Cod Wiki

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+Aici apare titlul tabelului
|-
! style="background:#efefef;" | Primul titlu
! colspan="2" style="background:#ffdead;" | Al doilea titlu
|-
| sus stînga
|  
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
partea dreaptă
|-
| style="border-bottom:3px solid grey;" | jos stînga
| style="border-bottom:3px solid grey;" | jos mijloc
|-
| colspan="3" align="center" |
{| border="0"
|+Un tabel într-un tabel
|-
| align="center" width="150px" |
| align="center" width="150px" |
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px
solid red; border-bottom:2px solid red; border-left:1px solid red;" |
Două imagini Wiki
|}
|}

Rezultat

Aici apare titlul tabelului

Primul titlu	Al doilea titlu
sus stînga		partea dreaptă
jos stînga	jos mijloc
Un tabel într-un tabel Două imagini

Exemple avansate

Acest paragraf apare înaintea tabelului. Lorem ipsum ...

Cod Wiki
{| align="right" border="1"
| Col 1, rînd 1
|rowspan="2"| Col 2, rînd 1 (și 2)
| Col 3, rînd 1
|-
| Col 1, rînd 2
| Col 3, rînd 2
|}
Obs. că tabelul apare în dreapta. Acest paragraf apare după tabel. Lorem ipsum ...

Rezultat

Acest paragraf apare înaintea tabelului. Lorem ipsum ...

Col 1, rînd 1	Col 2, rînd 1 (și 2)	Col 3, rînd 1
Col 1, rînd 2		Col 3, rînd 2

Obs. că tabelul apare în dreapta. Acest paragraf apare după tabel. Lorem ipsum ...

Tabel în tabel

Acest exemplu arată un tabel (în albastru) în interiorul altui tabel.

Cod Wiki

{| border="1"
| α
| align="center" | celula 2
{| border="2" style="background-color:#ABCDEF;"
| TABEL
|-
| ÎN TABEL
|}
| valign="bottom" | tabelul original din nou
|}

Rezultat

α

celula 2 TABEL ÎN TABEL

tabelul original din nou

Folosire COLSPAN și ROWSPAN

Cod Wiki

{| border="1" cellpadding="5" cellspacing="0"
|-
! Coloană 1 || Coloană 2 || Coloană 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C
| D
|-
| E
| colspan="2" align="center"| F
|-
| rowspan="3"| G
| H
| I
|-
| J
| K
|-
| colspan="2" align="center"| L
|}

Rezultat

Coloană 1	Coloană 2	Coloană 3
A	B
	C	D
E	F
G	H	I
	J	K
	L

Tabele centrate

În cazul acestor tabele, textul nu va apărea nici în stînga nici în dreapta lor. Trucul este {| style="margin: 1em auto 1em auto"

Cod Wiki

{| class="wikitable" style="margin: 1em auto 1em auto"
|+ Tabel centrat, celule aliniate la stînga
! Duis || aute || irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}

Rezultat

Tabel centrat, celule aliniate la stînga

Duis	aute	irure
dolor	in reprehenderit	in voluptate velit
esse cillum dolore	eu fugiat nulla	pariatur.

Setarea parametrilor

La începutul celulei, adăugați parametrul urmat de o singură bară verticală. De exemplu, width=300px| va seta celula la o înălțime de 300 de pixeli. Pentru a seta mai mult de un parametru, lăsați un spațiu între fiecare.

Cod Wiki

{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3
|}

Rezultat

cell1

cell2

cell3

Alinierea la zecimală

Cod Wiki

{|border="1" cellpadding="4" cellspacing="2" width="72"
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 432 ||width="50%"| ,1
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 43 ||width="50%"| ,21
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 4 ||width="50%"| ,321
|}
|}

Rezultat

432 ,1

43 ,21

4 ,321

Clase

Unii utilizatori au creat clase CSS și formate pentru a ușura folosirea tabelelor. În loc să țineți minte parametrii tabelei trebuie să includeți o clasă potrivită după {|. De exemplu, asta:

înlocuind parametrii tabelei (border="1" cellpadding="2") cu class="wikitable"

Alte sintaxe pentru tabele

Alte tipuri de sintaxă pentru tabele suportate de MediaWiki sînt:

1. XHTML
2. HTML și sintaxa wiki <td>

Notați totuși că thead, tbody, tfoot, colgroup și col în mod curent nu sînt suportate în MediaWiki.

Comparație

{| params
|}

|+ caption

|- params 

| cell1
| cell2

|cell1||cell2||cell3

! heading

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

<table>
<tr>
<td> 1 <td> 2
<tr>
<td> 3 <td> 4
</table>

{|
| 1 || 2
|-
| 3 || 4
|}

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>

<table>
<tr>
<td> 1 <td> 2
<tr>
<td> 3 <td> 4
<tr>
<td> 5 <td> 6
</table>

{|
| 1 || 2
|-
| 3 || 4
|-
| 5 || 6
|}