Atributele tabelelor HTML vă oferă mult mai mult control asupra tabelelor HTML. Există o mulțime de atribute disponibile tabelelor pentru a le face mai interesante și pentru a schimba aspectul paginii.
Atribute element TABEL HTML
În HTML5 elementul folosește atributele globale și un alt atribut și s-a schimbat pentru a avea doar valoarea 1 sau gol (adică border = ""). Dacă doriți să modificați lățimea chenarului, ar trebui să utilizați lățimea chenarului Proprietate CSS.
Vedeți mai jos pentru a afla despre atributele valide ale tabelului HTML5.
Există, de asemenea, mai multe atribute care fac parte din specificația HTML 4.01 care a devenit învechită în HTML5:
- —Utilizați proprietatea de umplere CSS pe elementele TD și TH ale mesei.
- —Utilizați proprietatea CSS-spațierea frontierelor de pe tabel.
- —Utilizați stilurile CSS border-color: negru; și stil bordură pe masă.
- —Utilizați stilurile CSS border-color: negru; și stilul chenarului pe elementele adecvate ale tabelului.
- —În schimb, ar trebui să descrieți structura tabelului într-o CAPTION sau să puneți întregul tabel într-o FIGURĂ și să o descrieți într-o FIGCAPTION. Alternativ, puteți simplifica structura tabelului, astfel încât să nu fie nevoie de explicații.
- —Utilizați proprietatea CSS width.
Și un atribut care a fost depreciat în HTML 4.01 și care este, de asemenea, învechit în HTML5.
- align — Utilizați în schimb proprietatea marginii CSS.
Există, de asemenea, mai multe atribute care nu fac parte din nicio specificație HTML. Utilizați aceste atribute dacă știți că browserele pe care le susțineți le pot gestiona și nu vă pasă de HTML valid.
- —Utilizați în schimb proprietatea CSS de culoare de fundal.
- bordercolor — Folosiți în schimb proprietatea CSS border-color.
- bordercolorlight — Utilizați în schimb proprietatea CSS border-color.
- bordercolordark — Folosiți în schimb proprietatea CSS border-color.
- cols — Nu există nicio alternativă la acest atribut.
- înălțime — Utilizați în schimb înălțimea proprietății CSS.
- —Utilizați în schimb marja de proprietate CSS.
- —Utilizați în schimb proprietatea CSS white-space.
- —Utilizați în schimb proprietatea CSS vertical-align.
Atribute elemente TABEL HTML5
După cum am menționat mai sus, există un singur atribut, dincolo de atributele globale, care este valid pe un element TABEL HTML5: border.
Atributul de margine este utilizat pentru a defini o margine în jurul întregului tabel și a tuturor celulelor din acesta. A existat o anumită întrebare dacă ar fi inclusă în specificația HTML5, dar a rămas deoarece a furnizat informații despre structura tabelului, dincolo de implicațiile stilului.
Pentru a adăuga atributul de margine, setați valoarea la 1 dacă există o margine și este goală (sau lăsați atributul) dacă nu există. Majoritatea browserelor acceptă, de asemenea, 0 pentru niciun chenar și orice altă valoare întreagă (2, 3, 30, 500 etc.) pentru a declara lățimea chenarului în pixeli, dar aceasta este învechită în HTML5. În schimb, ar trebui să utilizați proprietățile stilului chenar CSS pentru a defini lățimea chenarului și alte stiluri.
Pentru a crea un tabel cu un chenar, scrieți:
border = "1">
Acesta este un tabel cu chenar
Aceasta descrie atributele TABLE care sunt valabile în HTML 4.01, dar sunt învechite în HTML5. Dacă scrieți în continuare documente HTML 4.01, puteți utiliza aceste atribute, dar cele mai multe dintre ele au alternative care vor face paginile dvs. mai rezistente la viitor, atunci când treceți la HTML5.
Atribute HTML 4.01 valide
Atributul pe care l-am descris mai sus. Singura diferență în HTML 4.01 față de HTML5 este că puteți specifica orice întreg întreg (0, 1, 2, 15, 20, 200 etc.) pentru a defini lățimea chenarului în pixeli.
Pentru a construi un tabel cu o margine de 5 px, scrieți:
border = "5">
Acest tabel are o margine de 5 px.
Atributul definește cantitatea de spațiu dintre marginile celulei și conținutul celulei. Valoarea implicită este de doi pixeli. Setați celularul la 0 dacă nu doriți spațiu între conținut și margini.
Pentru a seta umplerea celulei la 20, scrieți:
cellpadding = "20">
Acest tabel are o acoperire de celule de 20.
Marginile celulei vor fi separate de 20 de pixeli.
Vizualizați un exemplu de masă cu celular.
Atributul definește cantitatea de spațiu dintre celulele tabelului și conținutul celulei. La fel ca și celularul, implicit este setat la doi pixeli, deci trebuie să îl setați la 0 dacă nu doriți spațierea celulei.
Pentru a adăuga spațierea celulelor într-un tabel, scrieți:
cellspacing = "20">
Acest tabel are un interval de celule de 20.
Celulele vor fi separate de 20 de pixeli.
Atributul identifică ce porțiuni ale chenarului care înconjoară exteriorul unui tabel vor fi vizibile. Puteți să vă încadrați masa pe toate cele patru laturi, pe orice parte, sus și jos, stânga și dreapta sau niciuna.
Iată codul HTML pentru un tabel cu doar marginea din stânga:
frame = "lhs">
Aceasta masa
vom avea
doar
partea stângă încadrată.
Și un alt exemplu cu cadrul inferior:
cadru = "dedesubt">
Acest tabel are un cadru în partea de jos.
Consultați câteva tabele cu cadre.
Atributul este similar cu atributul cadru, doar că afectează marginile din jurul celulelor tabelului. Puteți seta reguli pentru toate celulele, între coloane, între grupuri precum TBODY și TFOOT sau niciuna.
Pentru a construi un tabel cu linii numai între rânduri, scrieți:
reguli = "rânduri">
Această masă 4x4 are
rândurile nu coloanele
conturat cu
atributul regulilor.
Și altul cu linii între coloane:
rules = "cols">
Aceasta este
o masa
unde
coloane
sunteți
evidențiat
atributul oferă informații despre tabelul pentru cititoarele de ecran și alți agenți de utilizator care ar putea avea probleme la citirea tabelelor. Pentru a utiliza atributul sumar, scrieți o scurtă descriere a tabelului și o puneți ca valoare a atributului. Rezumatul nu va fi afișat pe pagina web în majoritatea browserelor web standard.
Iată cum se scrie un tabel simplu cu un rezumat:
summary = "Acesta este un exemplu de tabel care conține informații de completare. 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.
Atributul definește lățimea tabelului fie în pixeli, fie ca procent din elementul container. Dacă lățimea nu este setată, tabelul va ocupa doar atât spațiu cât este necesar pentru a afișa conținutul, cu o lățime maximă egală cu lățimea elementului părinte.
Pentru a construi un tabel cu o lățime specifică în pixeli, scrieți:
width = "300">
Acest tabel reprezintă 80% din lățimea containerului în care se află.
Și pentru a construi un tabel cu o lățime care este un procent din elementul părinte, scrieți:
width = "80%">
Acest tabel reprezintă 80% din lățimea containerului în care se află.
Atribut TABEL HTML 4.01 depreciat
Există un atribut al elementului TABLE care este învechit în HTML 4.01 și învechit în HTML5: align. Acest atribut vă permite să setați unde ar trebui să fie amplasat tabelul pe pagină în raport cu textul care este lângă el. 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 sau marginea-stânga: auto; și marginea-dreapta: auto; stiluri. Proprietatea float vă oferă un rezultat mai apropiat de ceea ce a furnizat atributul align, dar poate afecta modul în care se afișează restul conținutului paginii. Marja-dreapta: auto; și marginea-stânga: auto; sunt ceea ce recomandă W3C ca alternativă.
Iată un exemplu depreciat care utilizează atributul align:
align = "right">
Acest tabel este aliniat la dreapta.
Textul curge în jurul său spre stânga.
Și pentru a obține același efect cu un HTML valid (neacceptat), scrieți:
style = "float: right;">
Acest tabel este aliniat la dreapta.
Textul curge în jurul său spre stânga.
Atribute TABEL învechite
Informațiile anterioare descriu atributele elementului HTML care sunt valide în HTML 4.01, dar sunt învechite în HTML5.
Următoarele descriu atributele TABLE care nu sunt valabile în nicio specificație curentă. Dacă nu vă pasă dacă paginile dvs. validează și utilizatorii utilizează un browser care acceptă aceste elemente, atunci puteți utiliza aceste elemente. Dar cele mai multe dintre ele sunt fie neacceptate în browserele moderne, fie au alternative care sunt mai conforme cu standardele.
Nu recomandăm utilizarea acestor atribute pe tabelele dvs. HTML.
Atributul este un atribut vechi care a fost inclus înainte ca CSS să fie acceptat pe scară largă. Vă permite să schimbați culoarea de fundal a tabelului. Puteți seta un nume de culoare sau un cod hexazecimal. Acest atribut funcționează în continuare în multe browsere, dar pentru HTML-ul viitor, nu ar trebui să-l utilizați și să utilizați CSS.
Cea mai bună alternativă la acest atribut este proprietatea stil.
Pentru a schimba culoarea de fundal a unui tabel, scrieți:
style = "background-color: #ccc;">
Acest tabel are un fundal gri.
Similar cu atributul bgcolor, atributul bordercolor vă permite să schimbați culoarea atributului. Acest atribut este acceptat numai de Internet Explorer. În schimb, ar trebui să utilizați proprietatea stilului de culoare de margine.
Pentru a schimba culoarea chenarului mesei dvs., scrieți:
style = "border-color: red;">
Acest tabel are o margine roșie.
Atributele bordercolorlight și bordercolordark au fost incluse în Internet Explorer pentru a vă permite să creați o margine 3D în jurul mesei. Cu toate acestea, începând cu IE8 și versiuni ulterioare, acest lucru este acceptat numai în modul standard IE7 și Mod Quirks. Microsoft afirmă că aceste proprietăți nu mai sunt acceptate.
Pentru o scurtă perioadă de timp, atributul cols din elementul TABLE a fost propus pentru a ajuta browserele să știe câte coloane are un tabel. Premisa a fost că acest lucru ar ajuta la accelerarea redării tabelelor mari. Cu toate acestea, a fost implementat doar de Internet Explorer și, începând cu IE8 și versiunile ulterioare, acest lucru este acceptat doar în modul IE7 Standard și în mod Quirks.
Deoarece există un atribut de lățime (învechit în HTML5), mulți oameni au presupus că există și un atribut de înălțime pentru tabele. Dar, deoarece tabelele sunt conforme cu lățimea conținutului lor sau lățimea definită în atributul CSS sau width, înălțimea nu a putut fi limitată. Deci, în schimb, browserele au permis ca atributul înălțime să definească înălțimea minimă a tabelului. Dacă masa ar fi mai înaltă decât înălțimea respectivă, s-ar afișa mai înaltă. Dar ar trebui să utilizați proprietatea.
Cu proprietatea înălțime CSS 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 are o înălțime de cel puțin 30 de ems.
Cele două atribute și spațiul adăugat în jurul laturilor stânga / dreapta (hspace) și sus / jos (vspace) ale tabelului. Ar trebui să utilizați în schimb proprietatea stil.
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 spațiu de 20 de pixeli și un spațiu 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 a ferestrei sau să forțeze derularea orizontală. În schimb, ar trebui să definiți caracteristicile de împachetare a fiecărei celule de masă folosind proprietatea CSS.
Pentru a crea o coloană cu mult text care nu se înfășoară, scrieți:
style = "white-space: nowrap;"> Aceasta este o coloană cu o mulțime de conținut. Dar chiar dacă este mai lat decât containerul, textul nu trebuie să se înfășoare pe linia următoare, ci să forțeze fereastra browserului să deruleze orizontal pentru a vedea tot conținutul.
În cele din urmă, atributul definește modul în care conținutul fiecărei celule ar trebui să se alinieze vertical în interiorul celulei. În locul acestui atribut nevalid, ar trebui să utilizați proprietatea CSS pe fiecare celulă pentru care doriți să modificați alinierea. 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 valoare implicită), scrieți:
Această celulă este mai lungă decât restul și așa va forța î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ținut în partea de jos.
Conținut în mijloc.