Ajutor:Tabele.html
 
| ca | de | en | es | fr | it | nl | no | pl | pt | ru | ro | fi | sv | tr | vo |


 

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ă.

Pentru instrucţiunile generale de construite a tabelelor vezi Wikipedia:Folosirea tabelelor

Î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.

Cuprins

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
Imagine:wiki.png Imagine:wiki.png

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:

{| border="1" cellpadding="2"
|+Multiplication table
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
 
Multiplication table
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15
devine asta: 
{| class="wikitable"
|+Multiplication table
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
 
Multiplication table
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

î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

Comparaţia sintaxelor pentru tabele
  XHTML HTML & Wiki-td Wiki-bară verticală
Tabel <table></table> <table></table> 
{| params 
|}
Titlu <caption></caption> <caption></caption> 
|+ caption
Rînd <tr></tr> <tr> 
|- params
Celulă

<td>cell1</td>
<td>cell2</td>

<td>cell1
<td>cell2

 
| cell1
| cell2
Celulă <td>cell1</td> <td>cell2</td> <td>cell3</td> <td>cell1 <td>cell2 <td>cell3 
|cell1||cell2||cell3
Titlu celulă <th></th> <th> 
! heading
Tabel simplu
1 2
3 4 
<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
|}
Tabel simplu
1 2
3 4
5 6 
<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 
|}
Av.
  • Poate fi previzualizat/elim. erori cu orice editor XHTML
  • Poate fi formatat pentru o citire mai uşoară
  • Bine cunoscut
  • Poate fi previzualizat/elim. erori cu orice editor HTML
  • Poate fi formatat pentru o citire mai uşoară
  • Bine cunoscut
  • Ocupă mai puţin spaţiu decît XHTML
  • Uşor de scris
  • Uşor de citit
  • Ocupă puţin spaţiu
Dezav.
  • Incomod
  • Ocupă mult spaţiu
  • Greu de citit repede
  • Confuz, în special pentru oamenii care au puţină experienţă HTML
  • E posibil să nu fie suportat de browser în viitor
  • Sintaxă nefamiliară
  • Structură rigidă
  • Nu este uşor de înţeles de către cei care nu sînt familiarizaţi cu conceptele HTML
  XHTML HTML & Wiki-td Wiki-bară verticală

modifică Vezi şi
All Right Reserved © 2007, Designed by Stylish Blog.