Atributi HTML tablice daju vam puno veću kontrolu nad HTML tablicama. Tablicama je na raspolaganju puno atributa koji ih čine zanimljivijima i mijenjaju izgled vaše stranice.
Atributi elementa HTML TABELA
U HTML5 element koristi globalne atribute i jedan drugi atribut i promijenio se tako da ima vrijednost samo 1 ili je prazan (tj. border = ""). Ako želite promijeniti širinu obruba, trebali biste upotrijebiti border-width CSS svojstvo.
Pogledajte dolje kako biste saznali više o važećim atributima HTML5 tablice.
Postoji i nekoliko atributa koji su dio specifikacije HTML 4.01 koja je zastarjela u HTML5:
- —Upotrijebite svojstvo dodavanja CSS na TD i TH elementima tablice.
- —Upotrijebite CSS razmak granica svojstva na tablici.
- —Upotrijebite CSS stilove obruba: crna; i obruba na stolu.
- —Upotrijebite CSS stilove obruba: crna; i obrub na odgovarajućim elementima tablice.
- —Umjesto toga, trebali biste opisati strukturu tablice u CAPTION ili staviti cijelu tablicu u FIGURU i opisati je u FIGCAPTION. Možete i pojednostaviti strukturu tablice tako da nije potrebno objašnjenje.
- —Upotrijebite svojstvo CSS širine.
I jedan atribut koji je zastario u HTML 4.01, a zastario je i u HTML5.
- align - Umjesto toga upotrijebite svojstvo CSS margine.
Postoji i nekoliko atributa koji nisu dio nijedne HTML specifikacije. Koristite ove atribute ako znate da preglednici koje podržavate mogu s njima postupati i ako vam nije stalo do valjanog HTML-a.
- —Umjesto toga upotrijebite CSS svojstvo background-color.
- bordercolor - Umjesto toga upotrijebite CSS svojstvo border-color.
- bordercolorlight - Umjesto toga koristite svojstvo CSS border-color.
- bordercolordark - Umjesto toga upotrijebite CSS svojstvo border-color.
- cols - ovom atributu nema alternative.
- visina - Umjesto toga koristite visinu CSS svojstva.
- —Umjesto toga koristite CSS marginu svojstva.
- —Umjesto toga upotrijebite razmak CSS svojstva.
- —Umjesto toga koristite svojstvo CSS okomito poravnanje.
Atributi elementa HTML5 TABELE
Kao što smo gore spomenuli, postoji samo jedan atribut, izvan globalnih atributa, koji vrijedi za element HTML5 TABELA: border.
Atribut border koristi se za definiranje obruba oko cijele tablice i svih ćelija u njoj. Bilo je neko pitanje hoće li biti uključen u HTML5 specifikaciju, ali ostalo je jer je pružao informacije o strukturi tablice, osim samo implikacija stila.
Da biste dodali atribut obruba, postavite vrijednost na 1 ako postoji obrub i prazni (ili izostavite atribut) ako ga nema. Većina preglednika također će podržavati 0 bez ikakvog obruba i bilo koju drugu cijelu vrijednost (2, 3, 30, 500 itd.) Za deklariranje širine obruba u pikselima, ali to je zastarjelo u HTML5. Umjesto toga, trebali biste koristiti svojstva CSS obruba stila za definiranje širine obruba i ostalih stilova.
Da biste stvorili tablicu s obrubom, napišite:
border = "1">
Ovo je tablica s obrubom
Ovo opisuje atribute TABLE koji su valjani u HTML 4.01, ali su zastarjeli u HTML5. Ako i dalje pišete HTML 4.01 dokumente, možete koristiti ove atribute, ali većina njih ima alternative koje će vaše stranice učiniti sigurnijima za budućnost kada pređete na HTML5.
Važeći HTML 4.01 Atributi
Atribut koji smo gore opisali. Jedina razlika u HTML 4.01 u odnosu na HTML5 je ta što možete odrediti bilo koji cijeli cijeli broj (0, 1, 2, 15, 20, 200 itd.) Da biste definirali širinu obruba u pikselima.
Za izgradnju tablice s obrubom od 5 piksela napišite:
border = "5">
Ova tablica ima obrub od 5 piksela.
Atribut definira količinu prostora između granica stanice i sadržaja stanice. Zadana su dva piksela. Postavite dodavanje ćelija na 0 ako ne želite razmak između sadržaja i obruba.
Da biste postavili popunjavanje ćelije na 20, napišite:
cellpadding = "20">
Ova tablica ima dodatak stanica 20.
Granice ćelije bit će odvojene s 20 piksela.
Pogledajte primjer tablice s padovima stanica.
Atribut definira količinu prostora između ćelija tablice i sadržaja ćelije. Kao i cellpadding, zadana vrijednost postavljena je na dva piksela, pa je morate postaviti na 0 ako ne želite razmak između stanica.
Da biste tablici dodali razmak između stanica, napišite:
cellpacing = "20">
Ova tablica ima razmak ćelija od 20.
Stanice će biti odvojene s 20 piksela.
Atribut identificira koji će dijelovi obruba koji okružuju vanjsku stranu tablice biti vidljivi. Možete uokviriti svoj stol na sve četiri strane, bilo kojoj jednoj, gornjoj i donjoj, lijevoj i desnoj ili nijednoj.
Evo HTML-a za tablicu sa samo lijevom bočnom granicom:
frame = "lhs">
Ova tablica
imat će
samo
lijeva strana uokvirena.
I još jedan primjer s donjim okvirom:
frame = "ispod">
Ova tablica ima okvir na dnu.
Pogledajte neke tablice s okvirima.
Atribut je sličan atributu okvira, samo što utječe na granice oko ćelija tablice. Možete postaviti pravila za sve ćelije, između stupaca, između grupa poput TBODY i TFOOT ili nijednu.
Da biste izgradili tablicu s linijama samo između redaka, napišite:
rules = "redovi">
Ovaj 4x4 stol ima
retci ne stupci
ocrtana s
atribut pravila.
I još jedan s crtama između stupaca:
rules = "cols">
Ovo je
stol
gdje je
stupaca
jesu
istaknuto
The atribut pruža informacije o tablici za čitače zaslona i druge korisničke agente koji bi mogli imati problema s čitanjem tablica. Da biste koristili sažeti atribut, napišite kratki opis tablice i stavite ga kao vrijednost atributa. Sažetak se neće prikazati na web stranici u većini standardnih web preglednika.
Evo kako napisati jednostavnu tablicu sa sažetkom:
summary = "Ovo je ogledna tablica koja sadrži podatke o punilu. Svrha ove tablice je prikazati sažetak. ">
stupac 1 red 1.
stupac 2 red 1.
stupac 1 red 2.
stupac 2 red 2.
Atribut definira širinu tablice u pikselima ili kao postotak elementa spremnika. Ako širina nije postavljena, tablica će zauzeti samo onoliko prostora koliko je potrebno za prikaz sadržaja, s maksimalnom širinom jednakom širini nadređenog elementa.
Za izgradnju tablice određene širine u pikselima napišite:
width = "300">
Ova tablica čini 80% širine spremnika u kojem se nalazi.
A da biste izgradili tablicu širine koja je postotak roditeljskog elementa, napišite:
width = "80%">
Ova tablica čini 80% širine spremnika u kojem se nalazi.
Zastarjeli atribut HTML 4.01 TABLE
Postoji jedan atribut elementa TABLE koji je zastario u HTML 4.01 i zastario u HTML5: align. Ovaj atribut omogućuje vam postavljanje mjesta na kojima bi se tablica trebala nalaziti na stranici u odnosu na tekst koji se nalazi pored nje. Ovaj je atribut zastario u HTML 4.01 i trebali biste ga izbjegavati koristiti. Umjesto toga, trebali biste koristiti svojstvo CSS ili margin-left: auto; i margina-desno: auto; stilova. Svojstvo float daje vam rezultat koji je bliži onome što je ponudio atribut align, ali može utjecati na način na koji se prikazuje ostatak sadržaja stranice. Desna margina: auto; i margina-lijevo: auto; su ono što W3C preporučuje kao alternativu.
Evo zastarjelog primjera koji koristi atribut align:
align = "right">
Ova je tablica poravnana udesno.
Tekst se slijeva oko njega slijeva.
A da biste dobili isti učinak s važećim (neažurnim) HTML-om, napišite:
style = "float: right;">
Ova je tablica poravnana udesno.
Tekst se slijeva oko njega slijeva.
Zastarjeli atributi TABLE
Prethodne informacije opisuju atribute HTML elementa koji vrijede u HTML 4.01, ali su zastarjeli u HTML5.
Sljedeće opisuje TABLE atribute koji nisu valjani u bilo kojoj trenutnoj specifikaciji. Ako vas nije briga potvrđuju li vaše stranice i koriste li korisnici preglednik koji podržava ove elemente, tada možete koristiti te elemente. Ali većina njih ili nije podržana u modernim preglednicima ili imaju alternative koje su više usklađene sa standardima.
Ne preporučujemo upotrebu ovih atributa na vašim HTML tablicama.
Atribut je stari atribut koji je bio uključen prije nego što je CSS dobio široku podršku. Omogućuje vam promjenu boje pozadine tablice. Možete postaviti naziv boje ili heksadecimalni kôd. Ovaj atribut još uvijek radi u mnogim preglednicima, ali za HTML koji je zaštićen od budućnosti ne biste ga trebali koristiti, već umjesto njega koristiti CSS.
Bolja alternativa ovom atributu je svojstvo style.
Da biste promijenili boju pozadine tablice, napišite:
style = "background-color: #ccc;">
Ova tablica ima sivu pozadinu.
Slično atributu bgcolor, atribut bordercolor omogućuje vam promjenu boje atributa. Ovu atribut podržava samo Internet Explorer. Umjesto toga, trebali biste koristiti svojstvo stila border-color.
Da biste promijenili boju obruba tablice, napišite:
style = "border-color: red;">
Ova tablica ima crveni obrub.
Atributi bordercolorlight i bordercolordark uključeni su u Internet Explorer kako bi vam omogućili stvaranje 3D obruba oko stola. Međutim, od IE8 i novije verzije, ovo je podržano samo u IE7 Standards Mode i Otkačeni način. Microsoft navodi da ta svojstva više nisu podržana.
Kratko je predložen atribut cols na elementu TABLE kako bi preglednicima pomogao da znaju koliko stupaca ima tablica. Pretpostavka je bila da bi to pomoglo ubrzati prikazivanje velikih tablica. Međutim, implementirao ga je samo Internet Explorer, a od IE8 i novijeg, ovo je podržano samo u IE7 Standards Mode i Quirks Mode.
Budući da postoji atribut širine (zastario u HTML5), mnogi su ljudi pretpostavljali da postoji atribut visine i za tablice. Ali budući da tablice odgovaraju širini svog sadržaja ili definiranoj širini u CSS-u ili atributu width, visina se ne može ograničiti. Umjesto toga, preglednici su dozvolili atribut visine da definira minimalnu visinu tablice. Da je stol veći od te visine, prikazivao bi se viši. Ali trebali biste koristiti posjed.
Svojstvom CSS visine možete ograničiti visinu ako i CSS svojstvo koristite za definiranje što se događa s bilo kojim viškom sadržaja.
Da biste postavili minimalnu visinu na stolu, napišite:
style = "visina: 30em;">
Ova je tablica visoka najmanje 30 ems.
Dva atributa i dodani prostor oko lijeve / desne strane (hspace) i vrha / dna (vspace) tablice. Umjesto toga trebali biste koristiti svojstvo style.
Da biste okomiti prostor postavili na 20 piksela, a vodoravni na 40 piksela, napišite:
style = "margina: 20px 40px;"
Ova tablica ima razmak od 20 piksela i prostor od 40 piksela.
Atribut je logički atribut koji definira hoće li se sadržaj tablice umotati na rub nadređenog elementa ili prozora ili prisiliti vodoravno pomicanje. Umjesto toga, trebali biste definirati karakteristike omotavanja svake ćelije tablice pomoću svojstva CSS.
Da biste napravili stupac s puno teksta koji se ne umotava, napišite:
style = "white-space: nowrap;"> Ovo je stupac s hrpom sadržaja. Ali čak i ako je širi od spremnika, tekst se ne bi trebao premotati u sljedeći redak, već bi prisilio prozor preglednika da se vodoravno pomiče kako bi vidio sav sadržaj.
Napokon, atribut definira kako se sadržaj svake ćelije treba poravnati okomito unutar ćelije. Umjesto ovog nevaljanog atributa, trebali biste koristiti svojstvo CSS na svakoj ćeliji kojoj želite promijeniti poravnanje. Učinke ovog stila nećete primijetiti ako sadržaj ćelije nije manji od dostupnog prostora koji su stvorile druge, veće ćelije.
Da prisilite ćeliju da se poravna prema dnu (umjesto prema sredini, kao zadano), napišite:
Ova je ćelija duža od ostatka, pa će visina biti viša. Tako ćete vidjeti da je okomito poravnana ćelija poravnata s dnom.
style = "vertical-align: bottom;"> Sadržaj na dnu.
Sadržaj u sredini.