Obțineți maximum din tabelele HTML învățând atributele tabelului
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 doar pentru a avea valoarea de 1 sau goală (adică border = ""). Dacă doriți să modificați lățimea marginii, ar trebui să utilizați proprietatea CSS pentru lățimea marginii.
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 proprietatea de umplere CSS pe elementele TD și TH ale mesei.
- -Utilizați distanța dintre granițele proprietății CSS pe masă.
- -Utilizați stilurile CSS limita-culoare: negru; și stil de frontieră pe masă.
- -Utilizați stilurile CSS limita-culoare: negru; și stil de frontieră pe elementele corespunzătoare ale tabelului.
- - În schimb, ar trebui să descrieți structura tabelului într-o CAPȚIUNE sau să puneți întreaga masă într-o figură și să o descrieți într-o figură. Alternativ, puteți simplifica structura mesei, astfel încât să nu fie nevoie de explicații.
- -Utilizați proprietatea Lățimea CSS.
Ș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ți - Utilizați în schimb proprietatea marjei CSS.
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 în schimb culoarea de fundal a proprietății CSS.
- bordercolor - Utilizați în schimb culoarea frontală a proprietății CSS.
- bordercolorlight - Utilizați în schimb culoarea frontală a proprietății CSS.
- bordercolordark - Utilizați în schimb culoarea frontală a proprietății CSS.
- 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 marginea proprietății CSS.
- - Utilizați în schimb marginea proprietății CSS.
- -Utilizați în schimb spațiul alb al spațiului CSS.
- - Utilizați în schimb proprietatea CSS vertical-align.
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 element HTML5 TABLE: frontieră.
Atributul de graniță 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 atributul de frontieră, setați valoarea la 1 dacă există o margine și este goală (sau lăsați-o pe atribut) dacă nu există. Cele mai multe browsere vor susține de asemenea 0 pentru nici o margine, precum și orice altă valoare întreagă (2, 3, 30, 500, etc) pentru a declara lățimea marginii î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 border = "1" >
Acesta este un tabel cu o margine
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 descrie atributele TABLE 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 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. Setați celulă de celule pe 0 dacă nu doriți spațiu între conținut și margini.
Pentru a seta padding-ul celulei la 20, scrieți:
cellpadding = "20" >
Acest tabel are un număr de 20 de celule.
Marginea celulelor va fi separată cu 20 de pixeli.
Vedeți un exemplu de tabel cu cellpadding
Atributul definește spațiul dintre celulele tabelului și conținutul celulei. La fel ca și celulă, setarea implicită este setată la doi pixeli, deci trebuie să o setați la 0 dacă nu doriți spațierea celulelor.
Pentru a adăuga spațierea celulelor într-un tabel, scrieți:
< cellspacing table = "20" >
Acest tabel are o spațiu de celule de 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.
Aici este HTML pentru un tabel cu doar marginea stânga:
cadru = "lhs" >
Acest tabel
va avea
numai
încorporat în partea stângă.
Și un alt exemplu cu cadrul inferior:
frame = "de mai jos" >
Acest tabel are un cadru în partea de jos.
Check out niște mese cu cadre
Atributul este similar cu atributul cadru, afectează doar marginile din jurul celulelor din tabel. Puteți seta reguli pe toate celulele, între coloane, între grupuri precum TBODY și TFOOT sau nici una.
Pentru a construi o masă cu linii numai între rânduri, scrieți:
rules = "rânduri" >
Acest tabel 4x4 are
rândurile nu coloanele
prezentat cu
atributul de reguli.
Și un altul cu linii între coloane:
rules = "cols" >
Acesta este
un tabel
unde
coloane
sunt
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 utiliza atributul rezumat, 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. Dacă lățimea nu este setată, tabela 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 al elementului TABLE care este depreciat în HTML 4.01 și depășit în HTML5: Alin . 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 sau marginea stânga: auto; și margin-dreapta: auto; stiluri. Proprietatea float vă oferă un rezultat mai apropiat de cel furnizat de atributul aliniere, dar poate afecta modul în care se afișează restul conținutului paginii. Marja dreaptă: auto; și margin-left: auto; sunt ceea ce W3C recomandă ca o alternativă.
Iată un exemplu depreciat folosind atributul align:
align = "right" >
Acest tabel este aliniat la dreapta
Textul se strecoară în jurul acestuia în stânga
Consultați un exemplu depreciat utilizând atributul align.
Ș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 strecoară în jurul acestuia în stânga
Următoarele explică atributele TABLE care nu fac parte din specificațiile HTML.
Informațiile anterioare descriu atributele elementului HTML valabile în HTML 4.01, dar sunt depășite în HTML5.
Următoarele descrie atributele TABLE care nu sunt valide î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 în tabelele dvs. 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 = "fundal-culoare: #ccc;" >
Acest tabel are un fundal gri
Similar atributului bgcolor, atributul bordercolor 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.
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, 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, atributul cols de pe elementul TABLE a fost propus pentru a ajuta browserele să știe câte coloane avea o masă. 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.
Deoarece există un atribut de lățime (depășită în HTML5), mulți oameni au presupus că există și un atribut înălțime pentru tabele. Dar deoarece tabelele sunt conforme cu lățimea conținutului lor sau cu lățimea definită în atributul CSS sau lățime, înălțimea nu poate fi restricționată. Deci, în schimb, browserele au permis atributul înălțime 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 proprietatea de înălțime CSS puteți restrânge înălțimea dacă utilizați proprietatea CSS și 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 părților stânga / dreapta (hspace) și de sus / jos (vspace) ale 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 spațiu 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 = "alb-spațiu: acum;" > 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 următoarea linie, 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 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.