Sari la conținut

Ajutor:Tabele

De la Wikipedia, enciclopedia liberă
Comandă rapidă:
A:T

Această pagină oferă informații despre sintaxa construirii unor tabele wiki. Nu toate aceste exemple tehnice sunt 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.

Un tabel simplu

[modificare | modificare sursă]

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

[modificare | modificare sursă]

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

[modificare | modificare sursă]

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

[modificare | modificare sursă]

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 sunt prioritari față de cei pentru tabel iar parametrii pentru celulă sunt 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

[modificare | modificare sursă]

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

Lățimea unei coloane

[modificare | modificare sursă]

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ă

[modificare | modificare sursă]

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

Exemple avansate

[modificare | modificare sursă]
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

[modificare | modificare sursă]

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

[modificare | modificare sursă]

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

[modificare | modificare sursă]

Î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

[modificare | modificare sursă]

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

[modificare | modificare sursă]
{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3
|}

Rezultat

[modificare | modificare sursă]
cell1 cell2 cell3

Alinierea la zecimală

[modificare | modificare sursă]

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

[modificare | modificare sursă]

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"

Alte sintaxe pentru tabele

[modificare | modificare sursă]

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 sunt suportate în MediaWiki.

Comparație

[modificare | modificare sursă]
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ă

Vezi și

[modificare | modificare sursă]
Adus de la https://ro.wikipedia.org/w/index.php?title=Ajutor:Tabele&oldid=13769001