Ajutor:Tabele

De la Wikipedia, enciclopedia liberă

Articolele „Ajutor:Tabele” şi „Wikipedia:Folosirea tabelelor” ar trebui unite.

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! Folosiţi Wikipedia:Cutia cu nisip pentru teste.

[modifică] 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

[modifică] 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

[modifică] 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

[modifică] Culori; scopul parametrilor

Există două moduri de a specifica culoarea textului şi a background-ului 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

[modifică] 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:75%; 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

[modifică] 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" |Effect
| width="225" align="center"|Games Found In
|-
|2006
|Andrei Pavel
|România
|-
|2006
|Roger Federer
|Elveţia
|}

An	Jucător	Ţară
2006	Andrei Pavel	România
2006	Roger Federer	Elveţia

[modifică] Mixtură

Puteţi încerca la Wikipedia:Cutia cu nisip tot felul de setări pentru propriul dumneavoastră tabel să vedeţi ce efect are.

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" | [[Imagine:wiki.png]]
| align="center" width="150px" | [[Imagine:wiki.png]]
|-
| 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 Wikipedia
|}
|}

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 Wikipedia

[modifică] 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 ...

[modifică] 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

[modifică] 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

[modifică] 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.

[modifică] 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.

[modifică] Cod Wiki

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

[modifică] Rezultat

cell1

cell2

cell3

[modifică] 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

[modifică] 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"

[modifică] 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.

[modifică] 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 
|}