Atributele de tabelă HTML vă oferă un control mult mai mare asupra tabelelor HTML. Există o mulțime de atribute disponibile tabelelor pentru a le face mai interesante și pentru a schimba aspectul paginii dvs.
Atribuiri element element HTML TABLE
În HTML5 elementul folosește atributele globale și un alt atribut:. Și sa schimbat pentru a avea numai valoarea 1 sau gol (adică border = ""). Dacă doriți să modificați lățimea marginii, ar trebui să utilizați lățimea graniței Proprietatea CSS.
Vedeți mai jos pentru a afla despre atributele de tabel HTML5 valide.
Există, de asemenea, mai multe atribute care fac parte din specificația HTML 4.01 care a devenit depășită în HTML5:
- -Utilizați CSS-ul
umpluturăproprietate pe masaTDșiTHelemente. - -Utilizați proprietatea CSS
border-spațierepe masă. - -Utilizați stilurile CSS
frontieră-culoare: negru;șiStil de frontierăpe masă. - -Utilizați stilurile CSS
frontieră-culoare: negru;șiStil de frontierăprivind elementele corespunzătoare ale tabelului. - În schimb, ar trebui să descrieți structura tabelului într-un
LEGENDĂsau puneți întreaga masă într-unFIGURAși descriu-o într-unFIGCAPTION. Alternativ, puteți simplifica structura mesei, astfel încât să nu fie nevoie de explicații. - -Utilizați CSS-ul
lăţimeproprietate.
Și un atribut care a fost depreciat în HTML 4.01 și este de asemenea depășit în HTML5.
Aflați mai multe despre atributele HTML 4.01 TABLE.
alinia-Utilizați CSS-ulmargineproprietate în loc.
Există, de asemenea, mai multe atribute care nu fac parte dintr-o specificație HTML. Utilizați aceste atribute dacă știți că browserele pe care le suportați le pot gestiona și nu vă interesează HTML valid.
- -Utilizați proprietatea CSS
culoare de fundalin schimb. borderColor-Utilizați proprietatea CSSborder-colorin schimb.bordercolorlight-Utilizați proprietatea CSSborder-colorin schimb.bordercolordark-Utilizați proprietatea CSSborder-colorin schimb.cols- Nu există nicio alternativă la acest atribut.înălţime-Utilizați proprietatea CSSînălţimein schimb.- -Utilizați proprietatea CSS
marginein schimb. - -Utilizați proprietatea CSS
marginein schimb. - -Utilizați proprietatea CSS
spatiu albin schimb. - -Utilizați proprietatea CSS
vertical-alignin schimb.
Aflați mai multe despre atributele TABLE specifice browserului.
HTML5 TABLE Elemente de element
Așa cum am menționat mai sus, există un singur atribut, dincolo de atributele globale, care este valabil pe un HTML5 MASA element: frontieră.
frontieră atributul este folosit pentru a defini o margine în jurul întregii mese și a tuturor celulelor din interiorul acesteia. A fost o întrebare dacă aceasta ar fi inclusă în specificația HTML5, dar a rămas pentru că a oferit informații despre structura tabelului, dincolo de simplul implicații asupra stilului.
Pentru a adăuga frontieră , ați setat valoarea la 1 dacă există o graniță și este goală (sau se lasă de pe atributul) dacă nu există. Cele mai multe browsere vor sprijini, de asemenea 0 pentru nici o margine, și orice altă valoare întregă (2, 3, 30, 500, etc) pentru a declara lățimea graniței în pixeli, dar aceasta este depășită în HTML5. În schimb, ar trebui să utilizați proprietăți de stil de frontieră CSS pentru a defini lățimea marginii și alte stiluri.
Pentru a crea o masă cu o margine, scrieți:
border = "1" >
Acesta este un tabel cu graniță
Există atribute HTML 4.01 care sunt depășite în HTML5. Dacă intenționați să scrieți documente HTML 4.01, le puteți învăța, altfel le puteți ignora. Majoritatea acestor atribute au alternative, descrise mai sus.
Descriim atributele elementului care sunt valabile în HTML5 (și HTML 4.01). Aceasta descrieMASA atribute care sunt valabile în HTML 4.01, dar sunt depășite în HTML5. Dacă încă mai scrieți documente HTML 4.01, puteți utiliza aceste atribute, dar majoritatea au alternative care vor face paginile dvs. mai protejate pentru viitor atunci când vă deplasați la HTML5.
Valid HTML 4.01 Atribute
Atributul descris mai sus. Singura diferență în HTML 4.01 din HTML5 este că puteți specifica orice întreg întreg (0, 1, 2, 15, 20, 200 etc.) pentru a defini lățimea marginii în pixeli.
Pentru a construi o masă cu o margine de 5px, scrieți:
<> border = "5" > Acest tabel are o margine de 5px.
Vedeți un exemplu de două tabele cu granițe.
Atributul definește spațiul dintre limitele celulei și conținutul celulei. Implicit este de doi pixeli. Seteazacellpadding la0 dacă nu doriți spațiu între conținut și limite.
Pentru a seta padding-ul celulei la 20, scrieți:
<> cellpadding = "20" > Acest tabel are a cellpadding din 20. Granițele celulelor vor fi separate cu 20 de pixeli.
Vedeți un exemplu de tabel cu cellpadding
Atributul definește spațiul dintre celulele tabelului și conținutul celulei. Cacellpadding, valoarea implicită este setată la doi pixeli, deci trebuie să o setați0 dacă nu doriți niciun spațiu între celule.
Pentru a adăuga spațierea celulelor într-un tabel, scrieți:
<> cellspacing = "20" > Acest tabel are a cellspacing din 20. Celulele vor fi separate cu 20 de pixeli.
Vedeți un tabel cu spațiu de celule
Atributul identifică ce porțiuni ale marginii care înconjoară partea exterioară a unei mese vor fi vizibile.Puteți să vă încadrați masa pe toate cele patru laturi, pe una din laturi, pe partea superioară și inferioară, pe stânga și pe dreapta sau pe nici una.
Iată HTML pentru un tabel cu doar marginea stângă:
frame = "lhs" >
Aceasta masa vom avea doar stânga înrămată.
Și un alt exemplu cu cadrul inferior:
frame = "mai jos" >
Acest tabel are un cadru în partea de jos.
Check out niște mese cu cadre
Atributul este similar cucadru atribut, afectează numai granițele din jurul celulelor mesei. Puteți stabili reguli pentru toate celulele, între coloane, între grupuri, cum ar fiTBODY șiTFOOT sau nu.
Pentru a construi o masă cu linii numai între rânduri, scrieți:
reguli = „rânduri“ >
Această masă de 4x4 are rândurile nu coloanele subliniat cu atributul de reguli.
Și un altul cu linii între coloane:
rules = "cols" >
Aceasta este o masa unde coloane sunteți evidențiat
Iată un exemplu de tabel cu reguli
Atributul oferă informații despre tabelul pentru cititoare de ecran și alți agenți utilizator care ar putea avea dificultăți la citirea tabelelor. Pentru a utilizarezumat atributul, scrieți o scurtă descriere a tabelului și puneți-o ca valoare a atributului. Rezumatul nu va fi afișat pe pagina web în majoritatea browserelor web standard.
Iată cum puteți scrie un simplu tabel cu un rezumat:
<> summary = "Acesta este un tabel de probă care conține informații despre umplere. Scopul acestui tabel este de a demonstra un rezumat." > coloana 1 rândul 1 coloana 2 rândul 1 coloana 1 rândul 2 coloana 2 rândul 2
Vizualizați un tabel cu un sumar
Atributul definește lățimea tabelului fie în pixeli, fie ca procent al elementului container. În cazul în carelăţime nu este setat, tabelul va ocupa doar spațiul necesar pentru afișarea conținutului, cu o lățime maximă la fel ca lățimea elementului părinte.
Pentru a construi un tabel cu o lățime specifică în pixeli, scrieți:
<> width = "300" > Acest tabel este de 80% din lățimea containerului în care se află.
Și pentru a construi o masă cu o lățime care este un procent din elementul părinte, scrie:
<> width = "80%" > Acest tabel este de 80% din lățimea containerului în care se află.
Vedeți un exemplu de tabel cu o lățime
Determinați atributul HTML 4.01 TABLE
Există un atribut alMASA element care este depreciat în HTML 4.01 și depășit în HTML5:alinia. Acest atribut vă permite să stabiliți unde ar trebui localizat tabelul în pagină în raport cu textul aflat de lângă acesta. Acest atribut a fost depreciat în HTML 4.01 și ar trebui să evitați utilizarea acestuia. În schimb, ar trebui să utilizați proprietatea CSS saumargin-stânga: auto; șimargin-dreapta: auto; stiluri.pluti proprietatea vă oferă un rezultat mai apropiat de ceea cealinia , dar poate afecta modul în care se afișează conținutul restului paginii.margin-dreapta: auto; șimargin-stânga: auto; sunt ceea ce W3C recomandă ca o alternativă.
Iată un exemplu depreciat care utilizeazăalinia atribut:
<> align = "dreapta" > Acest tabel este aliniat la dreapta Textul se învârte în jurul lui în stânga
Vedeți un exemplu depreciat folosindalinia atribut.
Și pentru a obține același efect cu un HTML valid (ne-depreciat), scrieți:
<> style = "float: right;" > Acest tabel este aliniat la dreapta Textul se învârte în jurul lui în stânga
Următoarele explicațiiMASA atribute care nu fac parte dintr-o specificație HTML.
Informațiile anterioare descriu atributele elementului HTML valabile în HTML 4.01, dar sunt depășite în HTML5.
Sunt descrise următoareleMASA atribute care nu sunt valabile în nici o specificație curentă. Dacă nu vă interesează dacă paginile dvs. validează și utilizatorii dvs. utilizează un browser care acceptă aceste elemente, puteți utiliza aceste elemente. Dar cele mai multe dintre ele sunt fie nesuportate în browserele moderne, fie au alternative care sunt conforme cu standardele.
Nu vă recomandăm să utilizați aceste atribute pe tabelele HTML.
Atributul este un atribut vechi care a fost inclus înainte ca CSS să fie acceptat pe scară largă. Vă permite să modificați culoarea de fundal a tabelului. Puteți seta un nume de culoare sau un cod hexazecimal. Acest atribut funcționează în continuare într-o mulțime de browsere, dar pentru cod HTML protejat în viitor nu ar trebui să îl utilizați și să utilizați în schimb CSS.
O alternativă mai bună la acest atribut este proprietatea stilului.
Pentru a schimba culoarea de fundal a unui tabel, scrieți:
<> style = "background-color: #ccc;" > Acest tabel are un fundal gri
Similar cubgcolor atribut,borderColor atributul vă permite să modificați culoarea atributului. Acest atribut este acceptat numai de Internet Explorer. În schimb, ar trebui să utilizați proprietatea stilului de culoare.
Pentru a schimba culoarea mesei de masă, scrieți:
style = "border-color: red;" >
Acest tabel are o margine roșie.
bordercolorlight șibordercolordark au fost incluse atribute în Internet Explorer pentru a vă permite să creați o margine 3D în jurul mesei. Cu toate acestea, de la IE8 și până, acest lucru este acceptat numai în modul IE7 Standards Mode și Quirks Mode. Microsoft afirmă că aceste proprietăți nu mai sunt acceptate.
Pentru o perioadă scurtă de timp,cols atribut peMASA elementul a fost propus pentru a ajuta browserele sa stie cat de multe coloane au avut un tabel. Premisa a fost că acest lucru ar contribui la accelerarea redactării unor mese mari. Cu toate acestea, a fost pusă în aplicare numai de Internet Explorer, iar începând de la IE8 și până, acest lucru este acceptat numai în modurile IE7 Standards Mode și Quirks Mode.
Pentru că existălăţime (depășite în HTML5) mulți oameni au presupus că a existatînălţime atribut pentru tabele, de asemenea. Dar deoarece tabelele sunt conforme cu lățimea conținutului lor sau cu lățimea definită în CSS saulăţime atributul, înălțimea nu poate fi constrânsă. Deci, în schimb, browserele au permisînălţime atribut pentru a defini înălțimea minimă a mesei. Dacă masa ar fi mai înaltă decât înălțimea, ar fi mai înaltă. Dar ar trebui să utilizați proprietatea
Cu CSSînălţime proprietatea puteți constrânge înălțimea dacă utilizați și proprietatea CSS pentru a defini ce se întâmplă cu orice conținut în exces.
Pentru a seta înălțimea minimă pe o masă, scrieți:
<> style = "height: 30em;" > Acest tabel este de cel puțin 30 de ems.
Cele două atribute și spațiul adăugat în jurul laturilor stânga / dreapta (hspace) și de sus / de jos (vspace) a tabelului. În schimb, ar trebui să utilizați proprietatea stilului.
Pentru a seta spațiul vertical la 20 de pixeli și spațiul orizontal la 40 de pixeli, scrieți:
<> style = "margin: 20px 40px;" Acest tabel are un vspace de 20 de pixeli și un hspace de 40 de pixeli.
Atributul este un atribut boolean care definește dacă conținutul tabelului trebuie să se înfășoare la marginea elementului părinte sau fereastră sau să forțeze derularea orizontală. În schimb, trebuie să definiți caracteristicile de împachetare ale fiecărei celule de tabel folosind proprietatea CSS.
Pentru a face o coloană cu o mulțime de text care nu se înfășoară, scrieți:
<> style = "white-space: nowrap"; > Aceasta este o coloană cu o tona de conținut. Dar chiar dacă este mai larg decât containerul, textul nu trebuie să se înfășoare pe linia următoare, ci să forțeze fereastra browserului să deruleze pe orizontală pentru a vedea tot conținutul.
În cele din urmă, atributul definește modul în care conținutul fiecărei celule trebuie să se alinieze vertical în interiorul celulei. În loc de acest atribut invalid, ar trebui să utilizați proprietatea CSS pe fiecare celulă pe care doriți să o modificați. Nu veți observa efectele acestui stil decât dacă conținutul celulei este mai mic decât spațiul disponibil creat de alte celule mai mari.
Pentru a forța o celulă să se alinieze la partea de jos (mai degrabă decât la mijloc, ca implicit), scrieți:
Această celulă este mai lungă decât restul și va forța astfel înălțimea să fie mai înaltă. Deci veți vedea că celula aliniată vertical este aliniată la partea de jos. <> style = "vertical-align: bottom;" > Conținutul din partea de jos. Conținutul în mijloc.
