Dobivanje najviše iz HTML tablica pomoću učenja atributa tablice
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:. A promijenjeno je samo na vrijednost 1 ili prazno (tj. Granica = ""). Ako želite promijeniti širinu granice, trebali biste upotrijebiti CSS svojstvo granične širine.
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 padding svojstvo na TD i TH elementima tablice.
- - Koristite CSS svojstvo graničnih razmaka na stolu.
- - Koristite CSS stilove rubu boje: crni; i rubni stil na stolu.
- - Koristite CSS stilove rubu boje: crni; i granični stil na odgovarajućim elementima tablice.
- - Umjesto toga, trebali biste opisati strukturu tablice u CAPTION ili staviti cijelu tablicu u SLIKU i opisati je u SLIKAMA. Alternativno, možete pojednostaviti strukturu tablice tako da ne treba objašnjenje.
- - Koristite CSS širinu.
I jedan atribut koji je obustavljen u HTML 4.01 i zastario je iu HTML5.
Saznajte više o atributima HTML 4.01 TABLE.
- poravnati - umjesto toga upotrijebite CSS marginu.
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.
- Umjesto toga upotrijebite pozadinsku boju CSS svojstva.
- bordercolor - Umjesto toga upotrijebite CSS entitet boje.
- bordercolorlight - Koristite umjesto boje CSS entiteta.
- bordercolordark - Umjesto toga upotrijebite CSS entitet boje.
- cols -Nema alternativa ovom atributu.
- visina - umjesto toga koristite visinu svojstva CSS-a.
- Umjesto toga upotrijebite marginu imovine CSS-a.
- Umjesto toga upotrijebite marginu imovine CSS-a.
- Umjesto toga upotrijebite BSS bijeli prostor.
- - Koristite umjesto vertikalno poravnati CSS svojstvo.
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 TABLE elementu: granici.
Granični atribut koristi se za definiranje obruba oko cijele tablice i svih ćelija unutar njega. 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 granični atribut, postavite vrijednost na 1 ako postoji granica i prazna (ili ostavite atribut) ako nije. Većina preglednika podržavat će 0 i bez ikakvih granica, kao i sve druge cijele vrijednosti (2, 3, 30, 500, itd.) Da proglase š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 opisuje atribute TABLE koje vrijede u HTML 4.01, ali su zastarjele 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 5px.
Pogledajte primjer dviju tablica s granicama.
Atribut definira količinu prostora između staničnih granica i sadržaja ćelije. Zadana je dva piksela. Postavite ćelavost na 0 ako ne želite razmak između sadržaja i granica.
Da biste postavili blokadu ćelija na 20, upišite:
cellpadding = "20" >
Ova tablica ima stanište 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. Poput staništa, postavka je postavljena na dva piksela pa je morate postaviti na 0 ako ne želite razmak stanica.
Da biste dodali razmak stanica u tablicu, upišite:
cellspacing = "20" >
Ova tablica ima broj ćelija 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:
frame = "lhs" >
Ova tablica
će imati
samo
uokvirena lijeva strana.
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 utječe na granice oko ćelija tablice. Možete postaviti pravila na sve stanice, između stupaca, između skupina kao što su TBODY i TFOOT ili ništa.
Da biste izradili tablicu s redcima samo između redaka, napišite:
rules = "redovi" >
Ova tablica 4x4 ima
redaka koji nisu stupci
naznačeno s
atribut pravila.
A drugi s linijama između stupaca:
rules = "cols" >
Ovo je
tablicu
gdje
stupce
Izdvojeno
Evo primjera tablice aa 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 koristili sažetak atribut, napišite kratak opis tablice i stavite ga 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 prikazati sažetak." >
stupac 1 red 1
stupac 2 red 1
stupac 1 red 2
stupac 2 red 2
Pogledajte tablicu sa sažetkom
Atribut definira širinu tablice u oba piksela ili kao postotak elementa spremnika. Ako širina nije postavljena, tablica će zauzeti samo onoliko prostora koliko treba prikazati sadržaj, a maksimalna širina jednaka je širini elementa roditelja.
Da biste izradili tablicu s određenom širinom u pikselima, napišite:
width = "300" >
Ta tablica iznosi 80% širine kontejnera u kojoj se nalazi.
I da izgrade tablicu sa širinom koja je postotak elementa roditelja, napiši:
width = "80%" >
Ta tablica iznosi 80% širine kontejnera u kojoj se nalazi.
Pogledajte primjer tablice s širinom
Obustavljena HTML 4.01 TABLE Attribute
Postoji jedan atribut TABELA elementa koji je obustavljen u HTML 4.01 i zastario u HTML5: usklađivanje . 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 ili marginu lijeve strane: auto; i margin-right: auto; stilova. Značajka plovka daje vam rezultat koji je bliži onome što je dodijeljen atribut za poravnanje, no može utjecati na prikazivanje ostalih sadržaja stranice. Granica desno: auto; i margin-left: auto; su ono što W3C preporučuje kao alternativu.
Evo primjera obustavljene upotrebe alata za poravnanje:
align = "right" >
Ta tablica je poravnat desno
Tekst teče oko nje lijevo
Pogledajte deprecirani primjer pomoću atributa uskladiti.
I da biste dobili isti učinak s valjanim (nepodržavanim) HTML-om, napišite:
style = "float: right;" >
Ta tablica je poravnat desno
Tekst teče oko nje lijevo
Sljedeće objašnjava atribute TABLICA koje nisu dio bilo koje HTML specifikacije.
Prethodni podaci opisuju atribute HTML elementa koji vrijede u HTML 4.01, ali su zastarjeli u HTML5.
Slijedeće opisuje atribute TABLICA koje nisu važeće 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 korištenje ovih atributa na HTML tablicama.
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 atributu bgcolor, atribut bordercolor 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.
Atributi bordercolorlight i bordercolordark 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, atribut cols na elementu TABLE predložen je kako bi preglednicima znao koliko stupova ima tablica. 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.
Budući da postoji atribut širine (zastario u HTML5), mnogi su ljudi pretpostavljali da postoji i atribut visine za tablice. No, budući da su tablice u skladu s širinom njihovog sadržaja ili definiranom širinom u CSS ili širini atributa, visina nije mogla biti ograničena. Umjesto toga, preglednici su dopustili da visina atributa definira minimalnu visinu tablice. Ako je stol bio viši od te visine, bio bi viši. Ali, trebali biste upotrijebiti imovinu
Uz visinu CSS visine možete ograničiti visinu ako koristite i CSS svojstvo kako biste definirali što se događa s bilo kojim viškom sadržaja.
Da biste postavili minimalnu visinu na stol, napišite:
style = "height: 30em;" >
Ta tablica je najmanje 30 ems.
Dva svojstva i dodani prostor oko lijeve / desne strane (hspace) i gornji / donji (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 bi trebao omotati 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 na dno.
style = "vertikalno poravnanje: dno"; > Sadržaj na dnu.
Sadržaj u sredini.