Ajutor:Tabele
De la Wikipedia, enciclopedia liberă
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.
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 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:
|
|
|||||||||||||||||||||||||
| devine 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:
- XHTML
- 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
| 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>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ă | |||||||


