Ajutor:Tabele
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
modificareDeș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
modificareAmbele 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
modificareCod 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
modificareExistă 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
modificarePuteț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
modificareDacă 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ă
modificarePuteț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
modificareAcest 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
modificareAcest 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
modificareCod 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Î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
modificareLa î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{| style="color:white" |- | bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3 |}
Rezultat
modificare
cell1 cell2 cell3
Alinierea la zecimală
modificareCod 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
modificareUnii 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 |- ! × !! 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 |- ! × !! 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
modificareAlte tipuri de sintaxă pentru tabele suportate de MediaWiki sînt:
- XHTML
- 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
modificareXHTML | 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>cell1 |
| 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 |
| ||||||||
<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 |
| ||||||||
<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. |
|
|
| ||||||
Dezav. |
|
|
| ||||||
XHTML | HTML & Wiki-td | Wiki-bară verticală |
Vezi și
modificare