Iskorišćavanje najviše od HTML tabela pomoću atributa tabele učenja
HTML tablični atributi daju vam mnogo više kontrole nad HTML tablicama. Postoji puno atributa dostupnih tablicama kako bi ih učinili interesantnijim i promenili izgled vaše stranice.
HTML TABLE Atributi atributa
U HTML5 element koristi globalne atribute i još jedan atribut:. I promenilo se samo na vrednost 1 ili prazno (tj. Granica = ""). Ako želite da promenite širinu granice, koristite CSS svojstvo granice širine.
Pogledajte ispod kako biste saznali za validne atribute tablice HTML5.
Postoji i nekoliko atributa koji su dio HTML 4.01 specifikacije koja je zastarjela u HTML5:
- -Uporabite svojstvo CSS-a na tabličnim TD i TH elementima.
- - Koristite granični razmak CSS na stolu.
- -Uslovi CSS stilova border-color: black; i granični stil na stolu.
- -Uslovi CSS stilova border-color: black; i graničnog stila na odgovarajućim elementima tabele.
- - Uostalom, trebali biste opisati strukturu tabele u CAPTION ili staviti celu tabelu u FIGURU i opisati je u FIGCAPTION-u. Alternativno, mogli biste pojednostaviti strukturu tabele tako da nije potrebno objašnjenje.
- -Koristite svojstvo CSS širine.
I jedan atribut koji je zastario u HTML 4.01 i takođe je zastario u HTML5.
Saznajte više o HTML 4.01 TABELSKIM atributima.
- poravnajte - Koristite CSS marža svojstvo umjesto.
Postoji i nekoliko atributa koji nisu deo bilo koje HTML specifikacije.
Koristite ove atribute ako znate da pretraživači koji podržavate mogu da ih izađuju i da vam ne brine o važećem HTML-u.
- Umjesto toga koristite CSS svojstvo pozadine.
- bordercolor-Umjesto toga koristite CSS svojstvo granične boje.
- bordercolorlight-Umjesto toga koristite CSS svojstvo granične boje.
- bordercolordark-Umjesto toga koristite CSS svojstvo granične boje.
- cols - Nema alternative za ovaj atribut.
- visina - koristite CSS visinu visine.
- Umesto toga koristite CSS robnu marku.
- Umesto toga koristite CSS robnu marku.
- Umjesto toga koristiti CSS svojstvo bijelog prostora.
- Koristite CSS svojstvo vertikalno poravnato umjesto toga.
Saznajte više o atributima specifičnog pretraživača pretraživača.
HTML5 TABLE Element Atributi
Kao što smo već pomenuli, postoji samo jedan atribut, koji je pored globalnih atributa, koji važi na HTML5 TABLE elementu: granica.
Granični atribut se koristi za definisanje granice oko celog stola i svih ćelija unutar nje. Postojalo je neko pitanje da li će biti uključeno u specifikaciju HTML5, ali je ostalo zato što je pružala informacije o strukturi tabele, a ne samo zbog simulacija stila.
Da biste dodali granični atribut, postavite vrednost na 1 ako postoji granica i prazna (ili ostavite atribut) ako nije. Većina pretraživača će takođe podržati 0 bez granice i bilo koja druga vrijednost cijele vrijednosti (2, 3, 30, 500, itd.) Kako bi deklarisala širinu granice u pikselima, ali je ovo zastarjelo u HTML5. Umesto toga, trebalo bi koristiti CSS svojstva stila granice da definišete širinu granice i druge stilove.
Da biste kreirali tablicu sa granicom, napišite:
border = "1" >
Ovo je tabela sa granicom
Postoje HTML 4.01 atributi koji su zastarjeli u HTML5. Ako planirate pisanje HTML 4.01 dokumenata, možete ih naučiti, inače možete ih ignorisati. Većina ovih atributa ima alternative, opisane gore.
Opisujemo atribute elementa koji važe u HTML5 (i HTML 4.01). Ovo opisuje atribute TABELA koji važe 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šim stranama biti sigurnije u budućnosti kada se preselite na HTML5.
Valid HTML 4.01 atributa
Atribut koji smo opisali iznad.
Jedina razlika u HTML-u 4.01 iz HTML5 je da možete odrediti bilo koji cijeli cijeli broj (0, 1, 2, 15, 20, 200, itd.) Da biste definirali širinu granice u pikselima.
Da biste napravili tablicu sa graničnom linijom 5px, napišite:
border = "5" >
Ova tabela ima granicu od 5px.
Pogledajte primjer dvije tabele sa granicama.
Atribut definiše količinu prostora između granica ćelije i sadržaja ćelije. Podrazumevano je dva piksela. Postavite cellpadding na 0 ako ne želite prostora između sadržaja i granica.
Da biste postavili padanje ćelije na 20, napišite:
cellpadding = "20" >
Ova tabela ima cellpadding od 20.
Granice ćelija će biti razdvojene za 20 piksela.
Pogledajte primer tabele sa ćelijskom opcijom
Atribut definiše količinu prostora između ćelija tablice i sadržaja ćelije. Kao i cellpadding, podrazumevano je postavljeno na dva piksla, tako da ga morate podesiti na 0 ako ne želite razmak između ćelija.
Da biste dodali razmak ćelija u tablicu, napišite:
cellspacing = "20" >
Ova tabela ima ćelijski razmak od 20.
Ćelije će biti razdvojene za 20 piksela.
Pogledajte tabelu sa cellspacing-om
Atribut identifikuje koji delovi granice koji okružuju spoljašnjost tabele će biti vidljivi. Možete postaviti svoj sto na sve četiri strane, bilo koju stranu, gornji i donji, levo i desno ili nijedno.
Evo HTML-a za sto sa samo levom bočnom granicom:
frame = "lhs" >
Ova tabela
će imati
samo
leva strana uokvirena.
Još jedan primer sa donjim okvirom:
frame = "ispod" >
Ova tabela ima okvir na dnu.
Pogledajte neke tabele sa okvirima
Atribut je sličan atributu okvira, samo to utiče na granice oko ćelija tabele. Možete odrediti pravila za sve ćelije, između stupaca, između grupa kao što su TBODY i TFOOT ili nijedna.
Da biste napravili tabelu sa linijama samo između redova, napišite:
rules = "redovi" >
Ova 4x4 tablica ima
redovi nisu kolone
prikazano sa
atribut pravila.
A drugi sa linijama između stupaca:
rules = "cols" >
Ovo je
tabela
gdje je
kolone
su
označeno
Evo primera tabele s pravilima
Atribut pruža informacije o tablici za čitače ekrana i druge korisničke agente koji mogu imati problema sa očitavanjem tabela. Da biste koristili atribut snimanja, upisujete kratak opis tabele i stavite je kao vrijednost atributa. Rezime neće biti prikazan na web stranici većine standardnih web pregledača.
Evo kako napisati jednostavnu tablicu s rezimeom:
summary = "Ovo je tabela uzoraka koja sadrži informacije o punjenju. Svrha ove tabele je da demonstrira rezime." >
kolona 1 red 1
kolona 2 red 1
kolona 1 red 2
kolona 2 red 2
Pogledajte tabelu s rezimeom
Atribut definiše širinu tabele u pikselima ili kao procenat elementa kontejnera. Ako širina nije postavljena, tabela će potrajati samo toliko prostora koliko je potrebno za prikaz sadržaja, sa maksimalnom širinom kao i širinom roditeljskog elementa.
Da biste napravili tablicu sa određenom širinom u pikselima, napišite:
< širina tabele = "300" >
Ova tabela je 80% širine kontejnera u kome se nalazi.
I da biste napravili sto sa širinom koja je procenat roditeljskog elementa, napišite:
< širina tabele = "80%" >
Ova tabela je 80% širine kontejnera u kome se nalazi.
Pogledajte primer tabele širine
Zastareli HTML 4.01 TABELSKI atribut
Postoji jedan atribut elementa TABLE koji je zastarjel u HTML 4.01 i zastarjel u HTML5: align . Ovaj atribut vam omogućava da postavite gde se tabela nalazi na stranici u odnosu na tekst koji je pored nje. Ovaj atribut je zastario u HTML 4.01, i ne bi trebalo da ga koristite. Umesto toga, koristite CSS svojstvo ili marginu-levo: auto; i margin-desno: auto; stilova. Funkcija float daje rezultat koji je bliži onome što je dodeljen atribut poravnanja, ali to može uticati na način prikazivanja ostatka sadržaja stranice. Marža-desno: auto; i margin-lijevo: auto; ono što W3C preporučuje kao alternativu.
Ovde je zastareli primjer korištenjem atributa align:
align = "desno" >
Ova tabela je ispravno poravnana
Tekst tekući oko njega levo
Pogledajte zastario primjer korištenjem atributa poravnanja.
I da biste dobili isti efekat sa važećim (bez opozivanja) HTML-a, napišite:
style = "float: desno;" >
Ova tabela je ispravno poravnana
Tekst tekući oko njega levo
Sledeće objašnjava atribute TABLE-a koji nisu dio bilo koje HTML specifikacije.
Prethodne informacije opisuju atribute HTML elementa koji važe u HTML 4.01 ali su zastarjeli u HTML5.
Sledeće opisuje atribute TABELA koji nisu važeći u bilo kojoj trenutnoj specifikaciji. Ako vam nije briga o tome da li vaše stranice potvrđuju i vaši korisnici koriste pregledač koji podržava ove elemente, onda možete koristiti ove elemente. Ali većina njih nije podržana u modernim pretraživačima ili ima alternative koje su u skladu sa standardima.
Ne preporučujemo korišćenje ovih atributa na HTML tablicama.
Atribut je star atribut koji je uključen pre nego što je CSS bio široko podržan. Omogućava vam da promenite boju pozadine tabele. Možete podesiti ime boje ili heksadecimalni kod. Ovaj atribut i dalje funkcioniše u mnogim pregledačima, ali za budućnost-zaštićeni HTML, ne biste ga trebali koristiti, a umjesto toga koristite CSS.
Bolja alternativa ovom atributu je svojstvo stila.
Da biste promenili boju pozadine tablice, napišite:
style = "background-color: #ccc;" >
Ova tabela ima sivu pozadinu
Slično kao atribut bgcolor, atribut bordercolor vam omogućava da promenite boju atributa. Ovaj atribut podržava samo Internet Explorer. Umesto toga, trebalo bi da koristite svojstvo stila graničnog stila.
Da biste promenili boju granice tablice, napišite:
style = "border-color: red;" >
Ova tabela ima crvenu ivicu.
Atribut bordercolorlight i bordercolordark uključeni su u Internet Explorer kako biste omogućili kreiranje 3D granice oko vaše tabele. Međutim, od IE8 i gore, ovo je podržano samo u IE7 Standardnom režimu i Quirks modu . Microsoft navodi da ova svojstva više nisu podržana.
Za kratko vreme, atribut cols na elementu TABLE je predložen da pomogne pregledačima da znaju koliko stolova ima stol. Pretpostavka je bila da će ovo pomoći ubrzavanje iznošenja velikih stolova. Međutim, to je implementirano samo od strane Internet Explorer-a, a od IE8-a i gore, ovo je podržano samo u IE7 standardnom režimu i Quirks modu.
Pošto postoji atribut širine (zastareo u HTML5), mnogi su pretpostavili da postoji i atribut visine za tabele. Ali zato što tabele odgovaraju širini njihovog sadržaja ili definisanoj širini u atributu CSS ili širini, visina nije mogla biti ograničena. Umjesto toga, pretraživači su omogućili atribut visine da definišu minimalnu visinu tabele. Ako je tabela bila viša od te visine, biće prikazana viša. Ali trebali biste koristiti imovinu
Pomoću CSS visine svojstva možete ograničiti visinu ako koristite i CSS svojstvo kako biste definirali šta se dešava sa bilo kojim viškom sadržaja.
Da biste postavili minimalnu visinu na stolu, napišite:
style = "height: 30em;" >
Ova tabela je najmanje 30 ems visoka.
Dva atributa i dodatni prostor oko leve / desne strane (hspace) i gornje / donje (vspace) tabele. Umesto toga koristite svoj stil stil.
Da biste postavili vertikalni prostor na 20 piksela i horizontalni prostor na 40 piksela, napišite:
style = "margin: 20px 40px;"
Ova tabela ima veličinu od 20 piksela i hspace od 40 piksela.
Atribut je boolean atribut koji definiše da li sadržaj tabele treba da se prelazi na ivicu roditeljskog elementa ili prozora ili silno horizontalno pomeranje. Umesto toga, trebalo bi definirati karakteristike omotanja svake ćelije tablice koristeći CSS svojstvo.
Da biste napravili kolonu sa puno teksta, ne pišite:
style = "white-space: nowrap;" > Ovo je kolona sa tonom sadržaja. Ali čak i ako je širi od kontejnera, tekst ne treba da se preklopi na sledeću liniju, već umjesto toga primorava prozor pregledača da se pomera horizontalno da bi vidio sav sadržaj.
Konačno, atribut definiše kako sadržaj svake ćelije treba vertikalno poravnati unutar ćelije. Umjesto ovog nevažećeg atributa, trebate koristiti osobinu CSS u svakoj ćeliji kojoj želite promijeniti poravnanje. Nećete primijetiti efekte ovog stila ako sadržaj ćelije nije manji od dostupnog prostora stvorenog od strane drugih, većih ćelija.
Da biste primorali ćeliju da se poravna na dno (umesto na sredinu, kao podrazumevano), napišite:
Ova ćelija je duže od ostatka i tako će siliti visinu da bude viša. Tako ćete videti da je vertikalno poravnana ćelija poravnana sa dnom.
style = "vertical-align: bottom;" > Sadržaj na dnu.
Sadržaj u sredini.