Ajutor: tabele

- Birou de informare

Această pagină explică sintaxa pentru inserarea unui tabel în Wikipedia , utilizând marcarea wiki .

Există câteva instrumente pentru a genera automat tabele. Pentru un ghid complet al tabelelor (în engleză), consultați m: Ajutor: Tabel .

Rețineți că șabloanele sinoptice și șabloanele de navigare sunt cazuri speciale de tabele cu propriile clase și metode de creare, pentru care vă rugăm să consultați paginile relevante.

În cele ce urmează vă prezentăm în detaliu cum să construiți o masă.

rezumat

Marcajul unui tabel poate fi rezumat în următoarea legendă:

 {|

 | +

 | -

 !

 |

 |}

Comenzi de bază

Pentru a ușura explicarea sintaxei, să luăm în considerare următorul exemplu de tabel:

și să vedem pas cu pas cum să-l construim.

Creați un tabel standard

Mai întâi, definim tabelul folosind {| și |} pentru a indica începutul și sfârșitul. Aceste simboluri trebuie să stea pe linii separate :

 {|

|}

Toate codurile care descriu aspectul tabelului (de exemplu numărul de rânduri și coloane) trebuie inserate în liniile dintre simbolurile precedente. În majoritatea cazurilor, pentru a conferi tabelului un aspect grafic standard, se adaugă următorul text:

 {| class = "wikitable"

|}

Pentru o explicație detaliată a semnificației sale, consultați secțiunea Atribute .

Adăugarea de linii noi

Pentru a începe o nouă linie, scrie |- la începutul unei noi linii . Pentru a adăuga o celulă în rândul nou definit, scrieți | , întotdeauna într-o nouă linie , urmată de textul pe care doriți să îl inserați în acea celulă:

 {|
| -
| Rândul 1, celula 1
| -
| Rândul 2, celula 1
|}

Deoarece |- este opțional pentru prima linie, codul de mai sus poate fi rescris astfel:

 {|
| Rândul 1, celula 1
| -
| Rândul 2, celula 1
|}

Adăugarea mai multor celule pe același rând

Există două moduri de a adăuga mai multe celule la același rând : pentru fiecare celulă care trebuie adăugată la rând, scrieți || pe aceeași linie ca celula anterioară, urmată de textul care apare în noua celulă sau începeți o nouă linie cu | , urmat întotdeauna de textul de inserat în celulă:

 {|
| Rândul 1, celula 1 || Rândul 1, celula 2 || Rândul 1, celula 3
| -
| Rândul 2, celula 1
| Rândul 2, celula 2
| Rândul 2, celula 3
|}

Cu alte cuvinte, fiecare celulă este definită prin înfășurare și scriere | , sau rămânând pe aceeași linie cu celula anterioară și scriind || . Spațiile înainte și după barele verticale | acestea sunt ignorate și, prin urmare, pot fi omise, dar dacă sunt utilizate, acestea fac codul mai ușor de înțeles și facilitează modificarea.

Adăugarea de celule de antet

Să presupunem că vrem să transformăm cele trei celule din primul rând al tabelului în celule de antet: pentru a face acest lucru, pur și simplu înlocuiți barele verticale | cu tot atâtea puncte de exclamare ! . Sintaxa este identică: prima celulă de antet este definită pornind o nouă linie cu a ! urmat de textul pe care doriți să îl inserați în acea celulă, în timp ce celulele de antet ulterioare (care sunt pe aceeași linie) sunt obținute scriind două !! pe aceeași linie , sau doar una ! pe linii noi . Prin urmare, fie el

 {|
! Antetul 1 !! Antetul 2 !! Rubrica 3
| -
| Rândul 2, celula 1 || Rândul 2, celula 2 || Rândul 2, celula 3
|}

este

 {|
! Antetul 1
! Antetul 2
! Rubrica 3
| -
| Rândul 2, celula 1 || Rândul 2, celula 2 || Rândul 2, celula 3
|}

produce același rezultat, adică

Celulele antetului pot fi adăugate și la începutul fiecărui rând; de exemplu, codul

 {| class = "wikitable"
! !! Antetul coloanei 2 !! Antetul coloanei 3
| -
! Antetul rândului 2
| Rândul 2, celula 2 || Rândul 2, celula 3
| -
! Antetul rândului 3
| Rândul 3, celula 2 || Rândul 3, celula 3
|}

generează

Dar fii atent: dacă scrii

 {| class = "wikitable"
! !! Antetul coloanei 2 !! Antetul coloanei 3
| -
! Antetul liniei 2 || Rândul 2, celula 2 || Rândul 2, celula 3
| -
! Antetul rândului 3 || Rândul 3, celula 2 || Rândul 3, celula 3
|}

adică amestecând pe aceeași linie ! și | , ca rezultat obținem

care nu corespunde cu ceea ce vrei.

Adăugarea unui titlu

Pentru a adăuga un titlu în tabel, trebuie să scrieți |+ urmat de titlul pe care doriți să-l dați, amintindu-vă să inserați |+ imediat sub {| :

 {| class = "wikitable"
| + Titlul tabelului
! Antetul 1 !! Antetul 2 !! Rubrica 3
| -
| Rândul 2, celula 1 || Rândul 2, celula 2 || Rândul 2, celula 3
|}

Rezultatul este următorul:

Introduceți wikitext într-o celulă

În cadrul tabelelor este posibil să se formateze textul folosind sintaxa normală Wikipedia, de exemplu, scriind cuvinte cu caractere italice sau adăugând wikilinkuri. Pentru a înfășura în interiorul unei celule, puteți utiliza eticheta <br /> :

 {| class = "wikitable"
| O celulă cu un [[Ajutor: Wikilink | wikilink]]. || Un cuvânt în „italice” în celulă.
| -
| O celulă cu <br /> un text scris <br /> pe mai multe linii.
| O celulă cu un [[Ajutor: Wikilink | wikilink]], <br /> un cuvânt în „italice” și <br /> textul scris pe mai multe rânduri.
|}

Dacă trebuie să inserați elemente într-o celulă a cărei sintaxă necesită ca acestea să înceapă la începutul unui nou rând, cum ar fi liste sau tabele cu marcatori și numerotate (este de fapt posibil să introduceți un tabel într-un alt tabel), pentru a le afișa corect , este necesar să înfășurați după | :

 {| class = "wikitable"
| O celulă cu
* o listă
* arătat
interior.
| * Acest asterisc nu este interpretat ca o listă cu marcatori, deoarece nu pornește pe o nouă linie.
# În schimb, aceste hash-uri sunt interpretate ca o listă numerotată
# pentru că sunt la începutul liniei.
| -
|
{| class = "wikitable"
| Tabel || cuibărit
| -
| în interior || celălalt.
|}
Aici suntem în afara mesei interioare <br /> și în interiorul celulei exterioare a mesei.
|
* O listă
* # pariu mixt
* # la o listă
* numerotat.
|}

Utilizarea de ! și |

Când scrieți textul conținut într-un tabel, acordați atenție caracterelor ! și | , deoarece este probabil să fie interpretate greșit ca elemente de marcare. De exemplu, scriind

 {| class = "wikitable"
| Simbolul „|” este o bară verticală || Ceva gresit...
|}

rezultatul este

Motivul acestui comportament „ciudat” este acela că slashul între ghilimele a fost interpretat de software ca un separator între atributele celulei (textul din stânga slash-ului, Il simbolo " ) și conținutul celulei (textul în dreapta " è una barra verticale oblice., " è una barra verticale ).

Există diferite metode pentru rezolvarea acestui tip de problemă. Primul este să utilizați <nowiki>Testo</nowiki> : textul inclus între ele nu este interpretat de software, ceea ce este perfect pentru exemplul anterior:

 {| class = "wikitable"
| Simbolul „<nowiki> | </nowiki>” este o bară verticală || Bine
|}

Acum rezultatul este corect:

Alternativ, puteți utiliza entitatea HTML | în locul barei verticale | , în timp ce comanda {{!}} nu funcționează în acest caz.

Din fericire, această problemă nu apare cu legăturile cu wikilink , care, prin urmare, pot fi utilizate în mod normal (ar fi într-adevăr contraproductiv să recurgem la metodele de mai sus).

Probleme similare apar atunci când trebuie să scrieți două puncte de exclamare la rând într-o celulă de antet, dar metodele pentru a le rezolva sunt aceleași: atașați punctele de exclamare în etichetele <nowiki> sau înlocuiți-le cu entitatea ! :

 {| class = "wikitable"
| + [[Factorial]] vs semifactorial
! '' n '' !! '' n ''! !! '' n '' & # 33; & # 33;
| -
| 5 || 120 || 15
|}

Atribute

Orice element utilizat pentru construirea tabelelor ( {| , |+ , |- , ! , !! , | și || ), cu excepția |} , poate accepta orice atribute HTML care își modifică aspectul: de exemplu, este posibilă schimbarea culoarea de fundal a unei singure celule sau a unui rând întreg. Atributele HTML sunt șiruri de text cu forma attributo =" valore " , unde attributo și valore trebuie înlocuite cu nume valide și recunoscute. Utilizarea atributelor HTML a fost deja arătată în exemplele anterioare, unde am atribuit elementul {| atributul class="wikitable" , care conferă tabelului un aspect grafic standard. De fapt, dacă acest atribut ar fi omis, scrierea este

 {|
| + Titlul tabelului
! Antetul 1 !! Antetul 2 !! Rubrica 3
| -
| Rândul 2, celula 1 || Rândul 2, celula 2 || Rândul 2, celula 3
|}

rezultatul ar fi acesta:

Se poate observa că masa este acum transparentă și fără margini.

Atribuiți un atribut unui element

În cazul {| și |- , un atribut este adăugat pur și simplu scriindu-l în dreapta acestor simboluri:

 {| atribut = " valoare "

| - atribut = " valoare "

Cu |+ ! , !! , | și || în schimb, este necesar să separați atributele de textul celulei prin adăugarea unui supliment | :

 | + atribut = " valoare " | Titlul tabelului

! atribut = " valoare " | Celula antet !! atribut = " valoare " | Celula antet

| atribut = " valoare " | Text celular || atribut = " valoare " | Text celular

Fiecărui element i se pot atribui și mai multe atribute, separându-le cu un spațiu:

 | atribut1 = " valoare1 " atribut2 = " valoare2 " | Text celular

Cel mai utilizat atribut este style , a cărui sintaxă este ușor diferită de cea prezentată până acum: style=" proprietà : valore ;" , unde proprietà și valore trebuie înlocuite cu nume valide și recunoscute. De exemplu, o proprietate des utilizată este color , care este utilizată pentru a seta culoarea textului, iar o valoare adecvată ar putea fi red ; prin urmare, dacă unei celule i se atribuie atributul style="color:red;" , textul din interiorul acelei celule va fi roșu. De asemenea, puteți utiliza mai multe proprietăți în același timp scriind style=" prop1 : valore1 ; prop2 : valore2 ;" si asa mai departe. De exemplu, dacă pe lângă textul roșu dorim și un fundal galben, am scrie style="color:red; background-color:yellow;" .

Următoarele exemple arată proprietățile cele mai utilizate în construcția tabelelor; pentru listări complete, consultați Proprietățile CSS2 sau Referința CSS .

Schimbați culoarea textului și a fundalului unei celule

Pentru a schimba culoarea textului, utilizați style="color: colore ;" , în timp ce cu style="background-color: colore ;" setezi culoarea de fundal. Există numeroase valori care pot lua colore : consultați pagina de ajutor despre culori .

Exemplu:

 {| class = "wikitable"
| + stil = "culoare: roșu;" | Titlu
! style = "culoare: verde;" | Antetul 1 !! style = "color: blue;" | Antetul 2 !! Antetul 3
| -
| Celula 1 || style = "background-color: yellow;" | Celula 2 || Celula 3
| -
| Celula 4
| Celula 5
| style = "color: orange; background-color: black;" | Celula 6
| - style = "background-color: cyan;"
| stil = "culoare: alb;" | Celula 7 || Celula 8 || Celula 9
|}

Rezultatul este:

Celulele care se întind pe mai multe rânduri și / sau coloane

Atribuirea unei celule (adică elementele | , || ! Și !! ) atribute rowspan=" n " și / sau colspan=" n " , va ocupa un număr de rânduri și / sau coloane egal cu n (n este înlocuit cu un număr întreg: 2, 3, ...). Deoarece numărul de coloane dintr-un tabel trebuie să fie același pe toate rândurile, atunci când se utilizează aceste atribute, unele celule nu trebuie definite, după cum arată următoarele exemple:

 {| class = "wikitable"
! Rândul 1, celula 1 !! Rândul 1, celula 2 !! Rândul 1, celula 3
| -
| colspan = "2" | Rândul 2, celulele 1 și 2 || Rândul 2, celula 3
| -
| Rândul 3, celula 1 || colspan = "2" | Rândul 3, celulele 2 și 3
| -
| colspan = "3" | Rândul 4, celulele 1, 2 și 3
|}

Acest tabel are trei coloane, dar în al doilea și al treilea rând au fost definite doar două celule, deoarece una dintre ele ocupă locul a două coloane, în timp ce în al patrulea rând a fost definită o singură celulă, deoarece singură ocupă locul a trei coloane :

 {| class = "wikitable"
! Rândul 1, celula 1 !! Rândul 1, celula 2
| -
| rowspan = "2" | Liniile 2 și 3, celula 1 || Rândul 2, celula 2
| -
| Rândul 3, celula 2
|}

Acest tabel are două coloane, dar în al treilea rând a fost definită o singură celulă, deoarece locul celuilalt este deja ocupat de celula superioară:

 {| class = "wikitable"
! Rândul 1, celula 1 !! Rândul 1, celula 2
| -
| rowspan = "2" | Liniile 2 și 3, celula 1 || Rândul 2, celula 2
| -
| Rândul 3, celula 2
|}

Exemple:

 {| class = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| 2B
| 3B
| -
| 1C
| 2C
| 3C
|}

{| class = "wikitable"
! 1A !! 2A !! 3A
| -
| rowspan = "2" | 1B + 1C
| 2B
| 3B
| -
| 2C
| 3C
|}

{| class = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| rowspan = "2" | 2B + 2C
| 3B
| -
| 1C
| 3C
|}

{| class = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| 2B
| rowspan = "2" | 3B + 3C
| -
| 1C
| 2C
|}

De rowspan și colspan atributele pot fi , de asemenea , folosite simultan pe aceeași celulă:

 {| class = "wikitable"
! !! Rândul 1, celula 2 !! Rândul 1, celula 3 !! Rândul 1, celula 4
| -
! Rândul 2, celula 1
| colspan = "2" rowspan = "3" | Rândurile 2, 3 și 4, celulele 2 și 3 || Rândul 2, celula 4
| -
! Rândul 3, celula 1
| Rândul 3, celula 4
| -
! Rândul 4, celula 1
| Rândul 4, celula 4
|}

Rezultatul este:

Aliniați textul într-un tabel

În mod implicit, titlul tabelului și textul celulei de antet sunt aliniate la centru, în timp ce textul normal al celulei este aliniat la stânga. Pentru a alinia textul unei celule diferit, trebuie să i se atribuie atributul style="text-align: pos ;" , unde pos fi înlocuit cu left , center , right sau justify pentru a poziționa textul respectiv la stânga, centru, dreapta celulei sau pentru a-l justifica.

Exemplu:

 {| class = "wikitable" style = "width: 100%;"
| + style = "text-align: left;" | Titlul din stânga
! style = "text-align: left;" | Text în stânga !! Text în centru (implicit) !! style = "text-align: right;" | Text în dreapta
| -
| Text din stânga (implicit) || style = "text-align: center;" | Text central || style = "text-align: right;" | Text în dreapta
|}

Rezultatul este (notă: atributul style="width:100%;" a fost atribuit tabelului în acest exemplu pentru a face să ocupe întreaga lățime disponibilă, cu singurul scop de a face mai evidentă alinierea textului):

Textul dintr-o celulă este, de asemenea, centrat vertical; dacă doriți ca textul să înceapă de sus, adăugați style="vertical-align:top;" :

 {| class = "wikitable"
| O celulă cu <br /> un text scris <br /> pe mai multe rânduri.
| Celulă cu puțin text.
| style = "vertical-align: top;" | Celulă cu puțin text.
|}

Luați în considerare un tabel în care unele celule conțin mult text și celelalte doar câteva cuvinte: cele mai mari celule ocupă cea mai mare parte a spațiului, lăsând puțin pentru celelalte; ca rezultat, textul din acele celule tinde să se încheie, ceea ce este uneori un efect nedorit (dacă nu îl vedeți bine în exemplul următor, micșorați doar lățimea ferestrei browserului):

 {| class = "wikitable"
| Celulă cu puțin text.
| Celulă cu puțin text.
| Cell with a lot of text: '' [[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
| -
| Celulă cu puțin mai mult text.
| Celulă cu puțin mai mult text.
| Cell with a lot of text: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
|}

Dacă doriți să evitați style="white-space:nowrap;" textului într-o celulă, adăugați style="white-space:nowrap;" ; dacă acest atribut este atribuit celei mai mari celule a unei coloane, efectul se extinde la toate celulele acelei coloane. În exemplul următor puteți vedea că în prima coloană textul nu se înfășoară în nicio celulă deoarece atributul a fost atribuit celulei care conține cel mai mult text, în timp ce în a doua coloană textul din celula de mai jos continuă să se înfășoare (din nou , poate fi util să observați comportamentul textului pe măsură ce lățimea ferestrei browserului se modifică):

 {| class = "wikitable"
| Celulă cu puțin text.
| style = "white-space: nowrap;" | Celulă cu puțin text.
| Cell with a lot of text: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
| -
| style = "white-space: nowrap;" | Celulă cu puțin mai mult text.
| Celulă cu puțin mai mult text.
| Cell with a lot of text: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
|}

Reglați fluxul de text în jurul unui tabel

În mod normal, textul în afara unui tabel (paragrafele normale ale intrării) este dispus deasupra și dedesubtul acestuia (linia goală înainte și după tabel nu este necesară, dar clarifică codul):

 Text deasupra tabelului.

{| class = "wikitable"
| Celula 1 || Celula 2
| -
| Celula 3 || Celula 4
|}

Text sub tabel.

Text deasupra tabelului.

Text sub tabel.

Cu toate acestea, textul extern poate fi aranjat lângă tabel atribuindu-i (a {| ) atributul class="wikitable floatleft" sau class="wikitable floatright" . În primul caz, tabelul este aranjat în stânga paginii și textul în dreapta acesteia; invers, în al doilea caz tabelul este aranjat în dreapta și textul în stânga. Următorul text este cel care se găsește sub tabel în wikitext (adică după |} ); textul care precede tabelul (adică {| ) rămâne deasupra acestuia. După ce ați trecut tabelul, textul va ocupa din nou întreaga lățime a paginii.

Exemplu:

 Text care precede tabelul (apare deasupra acestuia).

{| class = "wikitable floatright"
| Celula 1 || Celula 2 || Celula
| -
| Celula 3 || Celula 4 || Celula
|}

Textul scris de aici înainte apare lângă masă. Pentru a vedea efectul este necesar să scrieți o propoziție lungă pentru a ocupa câteva rânduri: '' [[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, ce este nostrum exercitarea ullam corporativ elicipa laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ''. Tot textul anterior apare deasupra tabelului următor:

{| class = "flotleft wikitable"
| Celula 1 || Celula 2 || Celula
| -
| Celula 3 || Celula 4 || Celula
|}

în timp ce textul scris de aici înainte apare lângă masă. Pentru a vedea efectul, este necesar să scrieți o frază lungă pentru a ocupa câteva rânduri: „lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, ce este nostrum exercitarea ullam corporativ elicipa laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ''.

Rezultatul este:

Text care precede tabelul (apare deasupra acestuia).

Textul scris de aici înainte apare lângă masă. Pentru a vedea efectul este necesar să scrieți o propoziție lungă pentru a ocupa câteva rânduri: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum . Tot textul anterior apare deasupra tabelului următor:

Celula 1	Celula 2	Celula
Celula 3	Celula 4	Celula

în timp ce textul scris de aici înainte apare lângă masă. Pentru a vedea efectul este necesar să scrieți o propoziție lungă pentru a ocupa câteva rânduri: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .

Notă: o modalitate alternativă de a poziționa un tabel este de a atribui lui {| the style="float: pos ;" , unde pos trebuie înlocuit cu left sau right . Problema este că, cu acest atribut, nu există o marjă adecvată între text și tabel. Repetând exemplul de mai sus, rezultatul este următorul:

Text care precede tabelul (apare deasupra acestuia).

Textul scris de aici înainte apare lângă masă. Pentru a vedea efectul este necesar să scrieți o propoziție lungă pentru a ocupa câteva rânduri: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum . Tot textul anterior apare deasupra tabelului următor:

Celula 1	Celula 2	Celula
Celula 3	Celula 4	Celula

în timp ce textul scris de aici înainte apare lângă masă. Pentru a vedea efectul este necesar să scrieți o propoziție lungă pentru a ocupa câteva rânduri: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, care este nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .

Tabel în centrul paginii

Pentru a centra un tabel pe pagină, trebuie să îi atribuiți atributul style="margin-left:auto; margin-right:auto;" . Cu referire la cele explicate în secțiunea anterioară, rețineți că nu este posibil să derulați textul la stânga și la dreapta unui tabel centrat:

 Text înaintea tabelului (apare deasupra acestuia).

{| class = "wikitable" style = "margin-left: auto; margin-right: auto;"
! Coloana 1 !! Coloana 2
| -
| Rândul 1, celula 1 || Rândul 1, celula 2
| -
| Rândul 2, celula 1 || Rândul 2, celula 2
|}

Text după tabel (apare sub acesta).

Text înaintea tabelului (apare deasupra acestuia).

Text după tabel (apare sub acesta).

Tabelele sortabile

Prin adăugarea instrucțiunii class="wikitable sortable" în partea de sus a tabelului, veți obține un tabel ale cărui coloane pot fi sortate în ordine crescătoare sau descendentă făcând clic pe butoanele care apar.

 {| class = "sortabil wikitable"
! titlu !! coloana1 !! coloana2 
| -
| linia1 || Florența || 4
| -
| linia2 || Empoli || 4
| -
| linia3 || Domodossola || 1  
| -
| linia4 || Como || 3  
| -
| linia5 || Bologna || 2  
| -
| linia6 || Ancona || 5  
|}

Dacă faceți clic pe două sau mai multe coloane, ultima pe care ați făcut clic este setată ca cheie principală de sortare, iar cele precedente ca secundare. În exemplu, făcând clic pe coloana1 și apoi pe coloana2, veți obține o sortare după coloană2, dar rândurile în care aceasta este constantă (cele două rânduri cu valoarea „4”) rămân sortate după coloana1.
Dacă, pe de altă parte, țineți apăsat ⇧ Shift în timp ce faceți clic, coloana făcută clic este setată ca cheie de sortare secundară, păstrând sortarea primară anterioară.

Sortarea se face folosind JavaScript partea clientului, deci funcționează numai dacă playerul folosește un browser cu JavaScript activat.

Coloane care nu pot fi comandate

Dacă doriți ca una sau mai multe coloane ale tabelului să fie class="unsortable" | titolo della colonna adăugați class="unsortable" | titolo della colonna în rândul în care sunt scrise titlurile.

 {| class = "sortabil wikitable"
! titlu !! coloana1 !! coloana2 !! class = "nesortabil" | fără ordine
| -
| linia1 || Como || 2 || coloană
| -
| linia2 || Bologna || 1 || Nu 
| -
| linia3 || Ancona || 3 || comandabil
|}

Rândurile nu pot fi sortate

Puteți face un rând nesortabil, cum ar fi un ultim rând care conține totaluri, care trebuie să rămână staționar. Toate liniile setate ca antet (cu „!”) Și plasate pe primul sau pe ultimul sunt întotdeauna imobile. Alternativ, un rând, chiar și fără antet, este păstrat în partea de jos dacă are atributul class="sortbottom" (dacă rândul nu este în partea de jos, va merge acolo imediat ce utilizatorul sortează tabelul).

Două linii consecutive pot fi forțate să rămână aproape împreună în timpul sortării, atribuind celui de-al doilea atributul class="expand-child" . În acest fel, primul rând va fi sortat normal și al doilea îl va urma.

 {| class = "sortabil wikitable"
! titlul 1
| -
! titlul 2
| -
| Bologna
| -
| Ancona
| - class = "expand-child"
| a doua linie a Anconei
| -
| Como
| - class = "sortbottom"
| piciorul 1
| -
! piciorul 2
|}

Tipuri de date

Sistemul de sortare recunoaște automat tipul de date al fiecărei coloane și aplică o logică de sortare diferită, bazată pe conținutul primei casete ne-goale după antet. Semnele și spațiile principale sunt ignorate. Tipurile identificate automat sunt:

• date : possono essere in vari formati come "gg-mm-aaaa", "gg-mm-aa", e "gg mese aaaa", oppure con altri separatori come "/" e "." (sconsigliati, vedi qui ). Non funziona però il simbolo "1º" per il primo del mese, va impostato "1" (vedi capitolo successivo). Non funzionano inoltre le date precedenti al 100 dC
• valute : riconosciute se iniziano per €, $, £, o ¥; l'ordine è numerico, ignorando i suddetti simboli e altri caratteri alfabetici.
• numeri : possono essere formati da cifre, virgole, separatori di migliaia, +/- ed E/e (per la notazione scientifica ). Per ottenere il corretto separatore delle migliaia, che su it.wiki è uno spazio speciale, usare formatnum .
• testo : in tutti gli altri casi l'ordine è semplicemente alfabetico, come indicato in Aiuto:Ordine alfabetico ; le lettere vengono considerate tutte come minuscole.

Se il riconoscimento automatico non bastasse, il tipo di dato di ogni colonna si può anche indicare esplicitamente. All'intestazione della colonna si può aggiungere il parametro data-sort-type="..." con uno dei seguenti valori:

• text (testo)
• number (numeri)
• date (date)
• time (orari, con ":" come separatore tra ore minuti e secondi opzionali)
• isoDate (date in formato ISO, ovvero aaaa-mm-gg)
• currency (valute)
• IPAddress (indirizzi IP)
• url (indirizzi URL)

Ad esempio:

 {| class="wikitable sortable"
! data-sort-type="date" | Data
! data-sort-type="time" | Ora
...

Come impostare manualmente l'ordine

Laddove necessario, si può impostare manualmente l'ordine voluto (ciò è particolarmente utile con le colonne che contengono nomi e cognomi di persone, che verrebbero ordinate seguendo l'ordine alfabetico dei nomi e non dei cognomi). Per impostare una chiave di ordinamento diversa dal contenuto visibile, a ciascuna casella si può aggiungere il parametro data-sort-value="..." in questo modo:

 {| class="wikitable sortable"
! Nome
|-
| data-sort-value="Rossi Mario" | Mario Rossi
|-
| data-sort-value="Bianchi Lucia" | Lucia Bianchi
|-
| data-sort-value="Verdi Anna" | Anna Verdi
|}

Un altro metodo, sconsigliato ma ancora molto usato perché in passato era l'unico, è inserire del testo invisibile direttamente nella casella, in questo modo:

 | <span style="display:none">Rossi Mario</span> Mario Rossi

Venivano usati anche alcuni template appositi (vedi Template:Sort ei template ad esso correlati) oggi obsoleti, la cui funzione era quella di ordinare le colonne ordinabili incapsulando questa tecnica, senza utilizzare direttamente l'HTML.

Raccomandazioni

Nell'inserire immagini e tabelle , tieni conto sia della resa grafica (pensa ai tanti utenti che usano basse risoluzioni video), sia del peso complessivo della pagina (molti utenti hanno infatti sistemi non recentissimi e possono usare connessioni lente). Prova a vedere come appare la pagina anche a bassa risoluzione (ad esempio 800x600 o 1024x768) e non eccedere col peso delle immagini; non impostare le dimensioni delle immagini di tipo thumb se non è strettamente necessario: lascia che abbiano la larghezza di default scelta dall'utente . Verifica poi che la pagina non debba essere scorsa orizzontalmente o che parti di essa non si sovrappongano. Inoltre, assicurati che il contenuto sia sempre accessibile anche quando le immagini non possono essere visualizzate .

Corrispondenza tra wikitesto e codice HTML

Per chi conosce il linguaggio HTML , può essere utile fare un confronto tra il wikitesto usato su Wikipedia per la creazione delle tabelle e il relativo codice HTML.

Una tabella è definita da

 {| attributi

|}

che in HTML corrisponde a

 <table attributi >

</table>

Il titolo della tabella, più eventuali attributi, si ottiene con |+ attributi |Titolo che corrisponde a <caption attributi >Titolo</caption> .

Per definire una riga della tabella, insieme agli eventuali attributi, si usa |- attributi , equivalente a <tr attributi > . Il tag si chiude automaticamente all'inizio di una nuova riga o alla chiusura della tabella.

Le celle d'intestazione, compresi gli eventuali attributi, si ottengono scrivendo

 ! Header 1
! attributi | Header 2
! Header 3

oppure

 ! Header 1 !! attributi | Header 2 !! Header 3

Entrambi le forme equivalgono a

 <th>Header 1</th>
<th attributi >Header 2</th>
<th>Header 3</th>

In modo simile, le celle di una riga, con gli eventuali attributi, si definiscono tramite i comandi

 | Cella 1
| attributi | Cella 2
| Cella 3

o equivalentemente così:

 | Cella 1 || attributi | Cella 2 || Cella 3

Entrambi i casi corrispondono in HTML a

 <td>Cella 1</td>
<td attributi >Cella 2</td>
<td>Cella 3</td>

Di seguito si riporta un esempio riassuntivo:

 {| class="wikitable"
|+ style="color:red;" | Titolo
! Header 1 !! Header 2 !! style="color:green;" | Header 3
|-
| Cella 1 || style="color:blue;" | Cella 2 || Cella 3
|- style="background-color:yellow;"
| style="color:orange;" | Cella 4
| Cella 5
| Cella 6
|}

Il risultato è:

e corrisponde in HTML a:

 <table class="wikitable">
  <caption style="color:red;">Titolo</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th style="color:green;">Header 3</th>
  </tr>
  <tr>
    <td>Cella 1</td>
    <td style="color:blue;">Cella 2</td>
    <td>Cella 3</td>
  </tr>
  <tr style="background-color:yellow;">
    <td style="color:orange;">Cella 4</td>
    <td>Cella 5</td>
    <td>Cella 6</td>
  </tr>
</table>

Tecniche avanzate

Vedi Aiuto:Tabelle/Avanzate per utilizzi molto particolari: tabelle annidate, tabelle non rettangolari, grafici.

Pagine correlate

• Aiuto:Strumenti#Tabelle
• Elemento HTML
• Aiuto:Wikitesto
• Aiuto:Timeline
• Aiuto:Manuale di stile#Colonne
• Aiuto:Colori
• Aiuto:Tabelle/Avanzate
• Categoria:Template per le tabelle