HTML atributi tablice daju vam puno više kontrole nad HTML stolovima. Postoji mnogo atributa dostupnih tablicama kako bi ih zanimljivijima i promijenili izgled vaše stranice.
Atributi HTML elemenata tablice
U HTML5 element koristi globalne atribute i jedan drugi atribut:. I promijenilo se samo da ima vrijednost 1 ili prazno (tj. border = ""). Ako želite promijeniti širinu granice, trebali biste upotrijebiti border-width CSS svojstvo.
U nastavku saznajte više o važećim HTML5 atributima tablice.
Postoji i nekoliko atributa koji su dio HTML 4.01 specifikacije koja je postala zastarjela u HTML5:
- - Koristite CSS
punjenjeimovinu na stoluTDiTHelementi. - - Koristite CSS svojstvo
granica-razmakna stolu. - Koristite CSS stilove
crveno-boja: crna;iborder-stylena stolu. - Koristite CSS stilove
crveno-boja: crna;iborder-stylena odgovarajućim elementima tablice. - - Umjesto toga, trebali biste opisati strukturu tablice u a
NASLOVili staviti cijelu tablicu uLIKi opisuje ga u aFIGCAPTION, Alternativno, možete pojednostaviti strukturu tablice tako da ne treba objašnjenje. - - Koristite CSS
širinanekretnine.
I jedan atribut koji je obustavljen u HTML 4.01 i zastario je iu HTML5.
Saznajte više o atributima HTML 4.01 TABLE.
uskladiti- Koristite CSSmarginaumjesto toga.
Postoji i nekoliko atributa koji nisu dio bilo koje HTML specifikacije. Koristite ove atribute ako znate da ih preglednici podržavaju i da vam nije važno valjani HTML.
- - Koristite CSS svojstvo
boja pozadineumjesto toga. bordercolor- Koristite CSS svojstvoborder-colorumjesto toga.bordercolorlight- Koristite CSS svojstvoborder-colorumjesto toga.bordercolordark- Koristite CSS svojstvoborder-colorumjesto toga.stupaca-Nema alternativa ovom atributu.visina- Koristite CSS svojstvovisinaumjesto toga.- - Koristite CSS svojstvo
marginaumjesto toga. - - Koristite CSS svojstvo
marginaumjesto toga. - - Koristite CSS svojstvo
bijeli prostorumjesto toga. - - Koristite CSS svojstvo
vertikalno poravnanjeumjesto toga.
Saznajte više o posebnim obilježjima tablice preglednika.
Atributi HTML5 atributa tablice
Kao što smo već spomenuli, postoji samo jedan atribut, izvan globalnih atributa, koji vrijede na HTML5 STOL element: granica.
granica atribut se koristi za definiranje obruba oko cijele tablice i svih ćelija unutar nje. Bilo je nekih pitanja o tome hoće li biti uključena u HTML5 specifikaciju, ali je ostala zato što je pružila informacije o strukturi tablice, osim jednostavnih implikacija na stil.
Da biste dodali granica atribut, postavite vrijednost 1 ako postoji granica i prazna (ili ostavite atribut) ako nije. Većina preglednika također će podržati 0 bez ikakvih granica i bilo koje druge cijele vrijednosti (2, 3, 30, 500, itd.) da biste proglasili širinu granice u pikselima, ali to je zastarjelo u HTML5. Umjesto toga biste trebali upotrebljavati CSS svojstva graničnog stila kako biste definirali širinu granice i druge stilove.
Da biste izradili tablicu s granicom, napišite:
border = "1" >
Ovo je tablica s granicom
Postoje HTML 4.01 atributi koji su zastarjeli u HTML5. Ako planirate pisati HTML 4.01 dokumente, možete ih naučiti, inače ih možete ignorirati. Većina tih atributa ima alternative, gore opisane.
Navodimo atribute elementa koji vrijede u HTML5 (i HTML 4.01). Ovo opisujeSTOL atributi koji su valjani u HTML 4.01, ali su zastarjeli u HTML5. Ako još uvijek napišete HTML 4.01 dokumente, možete koristiti te atribute, ali većina njih ima alternative koje će Vaše stranice učiniti više budućim dokazima kada se premjestite na HTML5.
Valjani HTML 4.01 atributi
Atribut koji smo prethodno opisali. Jedina razlika u HTML 4.01 od HTML5 je da možete odrediti cijeli cijeli broj (0, 1, 2, 15, 20, 200, itd.) Kako biste definirali širinu granice u pikselima.
Da biste izradili tablicu s granicom od 5 px, napišite:
<> border = "5" > Ta tablica ima granicu od 5 piksela.
Pogledajte primjer dviju tablica s granicama.
Atribut definira količinu prostora između staničnih granica i sadržaja ćelije. Zadana je dva piksela. Postavicellpadding do0 ako ne želite razmak između sadržaja i granica.
Da biste postavili blokadu ćelija na 20, upišite:
<> cellpadding = "20" > Ova tablica ima a cellpadding od 20. Granice ćelija razdvajaju se za 20 piksela.
Pogledajte primjer tablice sa slojem stanica
Atribut određuje količinu prostora između ćelija tablica i sadržaja ćelije. Kaocellpadding, zadana je postavljena na dva piksela, pa je morate postaviti na0 ako ne želite razmak stanica.
Da biste dodali razmak stanica u tablicu, upišite:
<> cellspacing = "20" > Ova tablica ima a cellspacing od 20. Stanice će biti odvojene za 20 piksela.
Pogledajte tablicu sa stanicama
Atribut identificira koji dijelovi granice koji okružuju van tablice bit će vidljivi.Svoju tablicu možete okvirirati na sve četiri strane, bilo koja strana, gornja i donja, lijeva i desna, ili ništa.
Evo HTML za tablicu sa samo lijevom stranom granicom:
okvira = "" LHS >
Ova tablica će imati samo uokvirena lijeva strana.
I još jedan primjer s donjim okvirom:
Okvir = „dolje” >
Ova tablica ima okvir na dnu.
Pogledajte neke tablice s okvirima
Atribut je sličanokvir atribut, utječe samo na granice oko ćelija tablice. Pravila možete postaviti na sve stanice, između stupaca, između grupa kao što jetbody iTFOOT ili ništa.
Da biste izradili tablicu s redcima samo između redaka, napišite:
Pravila = „reda” >
Ovaj 4x4 stol ima redaka, a ne stupaca istaknuta s atribut pravila.
A drugi s linijama između stupaca:
Pravila = „stupaca” >
Ovo je stol gdje je stupovi su istaknut
Evo primjera tablice s pravilima
Atribut daje informacije o tablici za čitače zaslona i druge korisničke agente koji mogu imati poteškoća s čitanjem tablica. Da biste upotrijebiliSažetak atribut, napišite kratak opis tablice i stavite to kao vrijednost atributa. Sažetak neće se prikazati na web stranici većine standardnih web preglednika.
Evo kako napisati jednostavnu tablicu sa sažetkom:
<> summary = "Ovo je tablica uzorka koja sadrži informacije o punjenju. Svrha ove tablice je pokazati sažetak." > stupac 1. redak 1 stupac 2 redak 1 stupac 1, redak 2 stupac 2, redak 2
Pogledajte tablicu sa sažetkom
Atribut definira širinu tablice u oba piksela ili kao postotak elementa spremnika. Ako ješirina nije postavljen, tablica će zauzeti samo onoliko prostora koliko treba prikazati sadržaj, uz maksimalnu širinu jednaku širini elementa roditelja.
Da biste izradili tablicu s određenom širinom u pikselima, napišite:
<> width = "300" > Ova tablica iznosi 80% širine kontejnera u kojoj se nalazi.
I da izgrade tablicu sa širinom koja je postotak elementa roditelja, napiši:
<> širina = "80%" > Ova tablica iznosi 80% širine kontejnera u kojoj se nalazi.
Pogledajte primjer tablice s širinom
Obustavljena HTML 4.01 TABLE Attribute
Postoji jedan atributSTOL element koji je obustavljen u HTML 4.01 i zastario u HTML5:uskladiti, Ovaj atribut omogućuje postavljanje mjesta na kojem bi tablica trebala biti smještena na stranici u odnosu na tekst koji se nalazi pored njega. Taj je atribut zastario u HTML 4.01, i izbjegavajte ga. Umjesto toga, trebali biste upotrebljavati CSS entitet ilimargina-lijevo: auto; imargina-desno: auto; stilova.plutati imovina daje rezultat koji je bliži onome štouskladiti ali to može utjecati na prikazivanje ostalih sadržaja stranice.margina-desno: auto; imargina-lijevo: auto; su ono što W3C preporučuje kao alternativu.
Ovdje je obustavljen primjer korištenjemuskladiti atribut:
<> align = "right" > Ta je tablica ispravno poravnana Tekst teče oko njega lijevo
Pogledajte primljeni primjer pomoću opcijeuskladiti atribut.
I da biste dobili isti učinak s valjanim (nepodržavanim) HTML-om, napišite:
<> style = "float: right;" > Ta je tablica ispravno poravnana Tekst teče oko njega lijevo
Sljedeće objašnjavaSTOL atributa koji nisu dio bilo koje HTML specifikacije.
Prethodni podaci opisuju atribute HTML elementa koji vrijede u HTML 4.01, ali su zastarjeli u HTML5.
Sljedeće opisujeSTOL atributa koji nisu važeći u bilo kojoj trenutačnoj specifikaciji. Ako vas ne brinete o tome provjeravaju li vaše stranice i korisnici upotrebljavaju preglednik koji podržava te elemente, možete upotrijebiti te elemente. No, većina njih nije podržana u modernim preglednicima ili ima alternative koji su više usklađeni s normama.
Ne preporučujemo upotrebu ovih atributa na HTML stolovima.
Atribut je stari atribut koji je uključen prije no što je CSS bio široko podržan. Omogućuje vam promjenu boje pozadine stola. Možete postaviti naziv boje ili heksadecimalni kôd. Ovaj atribut još uvijek funkcionira u mnogim preglednicima, ali za HTML koji je izveden iz budućnosti, ne biste ga trebali koristiti, a umjesto toga koristite CSS.
Bolja alternativa ovom atributu je svojstvo stila.
Da biste promijenili boju pozadine tablice, upišite:
<> style = "background-color: #ccc;" > Ta tablica ima sivu pozadinu
Slično kao ibgcolor atribut,bordercolor atribut omogućuje promjenu boje atributa. Ovaj atribut podržava samo Internet Explorer. Umjesto toga, trebali biste upotrijebiti svojstvo stila obruba boja.
Da biste promijenili boju granice svoje tablice, upišite:
style = "border-color: crvena"; >
Ova tablica ima crvenu granicu.
bordercolorlight ibordercolordark atributi su uključeni u Internet Explorer kako biste mogli stvoriti 3D granicu oko svoje tablice. Međutim, od IE8 i gore, to je podržano samo u načinu IE7 standarda i Quirks načinu rada. Microsoft navodi da ta svojstva više nisu podržana.
Za kratko vrijeme,stupaca atribut naSTOL element je predložen kako bi pomogao preglednicima da znaju koliki su stupovi tablice. Pretpostavka je bila da bi to pomoglo ubrzati prikazivanje velikih stolova. Međutim, Internet je implementirao samo Internet Explorer, a od IE8 i više, to je podržano samo u standardima IE7 i Quirks načinu rada.
Jer postoji aširina atribut (zastario u HTML5) mnogi su pretpostavili da je postojao avisina atribut za tablice kao dobro. Ali zato što tablice odgovaraju širini njihovog sadržaja ili definiranoj širini u CSS iliširina atribut, visina nije mogla biti ograničena. Umjesto toga, preglednici su dopustilivisina atribut za definiranje minimalne visine tablice. Ako je stol bio viši od te visine, bio bi viši. Ali, trebali biste upotrijebiti imovinu
S CSS-omvisina imovine možete ograničiti visinu ako koristite i CSS svojstvo kako biste odredili što se događa s bilo kojim viškom sadržaja.
Da biste postavili minimalnu visinu na stol, napišite:
<> style = "height: 30em;" > Ova tablica je najmanje 30 ems visoka.
Dva svojstva i dodani prostor oko lijeve / desne strane (hspace) i vrh / dno (vspace) tablice. Umjesto toga biste trebali upotrebljavati entitet stila.
Da biste postavili vertikalni prostor na 20 piksela i horizontalni razmak do 40 piksela, upišite:
<> style = "margina: 20px 40px;" Ova tablica ima vspace od 20 piksela i hspace od 40 piksela.
Atribut je boolean atribut koji definira treba li sadržaj tablice zamotati na rubu elementa ili prozora ili prisiliti horizontalno pomicanje. Umjesto toga, trebate odrediti karakteristike omatanja svake stanične ćelije pomoću CSS svojstva.
Da biste izradili stupac s puno teksta koji se ne omota, napišite:
<> style = "white-space: nowrap;" > Ovo je stupac s tonom sadržaja. No, čak i ako je širi od kontejnera, tekst se ne smije zakrpati na sljedeći redak, već prisiliti prozor preglednika da se pomakne vodoravno kako bi vidio sav sadržaj.
Konačno, atribut definira kako se sadržaj svake ćelije treba vertikalno poravnati unutar ćelije. Umjesto ovog nevažećeg atributa, trebate koristiti svojstvo CSS-a na svakoj ćeliji koju želite promijeniti. Nećete primijetiti učinke ovog stila, osim ako sadržaj ćelije nije manji od raspoloživog prostora stvorenog od strane drugih, većih ćelija.
Da biste prisilili ćeliju da se poravna na dno (a ne kao srednji, kao zadani), napiši:
Ova stanica je dulja od ostatka i tako će prisiliti visinu da bude jači. Tako ćete vidjeti da je vertikalno poravnata ćelija poravnata do dna. <> style = "vertikalno poravnanje: dno"; > Sadržaj na dnu. Sadržaj u sredini.
