HTML atribut širine koristi se za postavljanje širine ćelije tablice, što nadjačava zadanu. Zastario je. Koristite CSS za kontrolu rasporeda ćelija u HTML tablicama.
Podešavanje širine stupca tablice
Atribut širine, koji je sada zastario, bio je nekoć standardna metoda podešavanje širine stupaca tablice. Prema zadanim postavkama, preglednik će prilagoditi stupce tablice tako da odgovaraju njenom sadržaju. Ali ako trebate kontrolirati širinu svakog stupca, to možete učiniti podešavanjem širine za svaki element.
| Tanak | Stvarno Stvarno Stvarno Široko |
|---|---|
| Malo |
Kao što vidite, u prvom slučaju nismo primijenili CSS ili HTML td širinu. Što će preglednik učiniti s takvom tablicom?
| Tanak | Stvarno Stvarno Stvarno Široko |
| Malo |
Preglednik je dodijelio puno više prostora za drugi stupac nego za prvi. Sada učinimo isto, ali upotrijebimo atribut širine kako biste prisilili stupce da budu iste veličine:
| Tanak | Stvarno Stvarno Stvarno Široko |
|---|---|
| Malo | Puno, puno, puno, puno sadržaja, toliko da bi nam možda trebao čak i prijelom reda. |
U oba slučaja, preglednik mora svakom stupcu dati istu širinu. Ali prva tablica bi trebala automatski promijeniti veličinu kako bi ispunila raspoloživi prostor, dok druga ima fiksnu širinu.
| Tanak | Stvarno Stvarno Stvarno Široko |
| Malo | Puno, puno, puno, puno sadržaja, toliko da bi nam možda trebao čak i prijelom reda. |
Prilično dobro. Nažalost, ovo je nevažeći HTML jer HTML tablicaširina je zastarjela. Ali isto možete učiniti sa jednostavan kod CSS:
| Tanak | Stvarno Stvarno Stvarno Široko |
|---|---|
| Malo |
Pogledajmo kako će preglednik generirati tablicu koristeći CSS umjesto atributa širine:
| Tanak | Stvarno Stvarno Stvarno Široko |
| Malo | Puno, puno, puno, puno sadržaja, toliko da će zahtijevati prijelom reda. |
Podesiva visina reda stola
Drugi atribut koji je usko povezan s širinom je visina ( visina). Ovaj atribut je također zastario, pa se ne bi trebao koristiti. No, budući da govorimo o prilagodbi širine stupaca, moramo razmotriti i podešavanje visine redaka. Evo kako je to prije učinjeno s deprecated atributom:
| Tanak | Stvarno Stvarno Stvarno Široko |
|---|---|
| Malo | Puno, puno, puno, puno sadržaja, toliko da će zahtijevati prijelom reda. |
Kako preglednik prikazuje ovaj primjer:
Da budem iskren, ne mogu zamisliti zašto postoji potreba kontrolirati visinu linije koristeći HTML td širina. Puno je smislenije prilagoditi vanjski i unutarnje obloge za sadržaj elementa
Parametri
align Određuje horizontalno poravnanje sadržaja ćelije. background Određuje pozadinsku sliku u ćeliji. bgcolor Boja pozadine ćelije. bordercolor Boja obruba. colspan Spaja horizontalne ćelije. visina Visina ćelije. nowrap Sprječava prelamanje redaka. rowspan Spaja okomite ćelije. valign Vertikalno poravnanje sadržaja ćelije. širina Širina ćelije.Završna oznaka
Nije obavezno.
Primjer 1. Korištenje oznake
| ... | |
| ... | ... |
Opis parametara oznake
ALIGN parametar
HTML:
3.2
4
XHTML:
1.0
1.1
Opis
Određuje vodoravno poravnanje sadržaja ćelije.
Sintaksa
...
Argumenti
lijevo Poravnava sadržaj ćelije ulijevo. centar Poravnanje po sredini. desno Poravnava udesno. justify Poravnajte širinu (desno i lijevo u isto vrijeme). Zadana vrijednost
Analogni CSS
ALIGN parametar
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Određuje vodoravno poravnanje sadržaja ćelije.
Sintaksa
Primjer 2. Poravnavanje sadržaja ćelije
| ... | ... |
Parametar BACKGROUND
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Određuje sliku koja će se koristiti kao pozadinska slika ćelije tablice. Za razliku od običnih slika, pozadina nije postavljena na širinu i visinu, te se uvijek prikazuje u punoj veličini i skalirana na 100%. Ako je slika manja od širine ili visine ćelije, onda se slika ponavlja vodoravno udesno i dolje, nižući se poput mozaika. Iz tog razloga, na raskrsnici pozadinske slike mogu biti vidljive kapi koje su uočljive posjetiteljima stranice. Prilikom odabira pozadinske slike, provjerite postoji li dovoljan kontrast između nje i sadržaja ćelije. Dopušteno je koristiti animirane slike kao pozadinu GIF format ali odvlače pažnju čitatelja.
Sintaksa
Argumenti
Bilo koja valjana adresa slike - možete koristiti relativni ili apsolutni put.
Zadana vrijednost
Analogni CSS
pozadinska slika
Primjer 3. Tapeta u ćeliji
| pozadina = "/ slike / pravila.gif"> ... |
Parametar BGCOLOR
Opis
Postavlja boju pozadine ćelije.
Sintaksa
Argumenti
Vrijednost boje može se postaviti na dva načina.
1. Po svom imenu
Preglednici podržavaju neke boje po imenu.
2. Po heksadecimalnoj vrijednosti
Za postavljanje boja koriste se heksadecimalni brojevi. Heksadecimalni sustav, za razliku od decimalnog sustava, temelji se, kako mu ime govori, na broju 16. Brojevi će biti sljedeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Zamijenjene su znamenke od 10 do 15 latiničnim slovima... Brojevi veći od 15 u heksadecimalu nastaju spajanjem dva broja u jedan. Na primjer, decimalni broj 255 odgovara FF in heksadecimalni sustav... Kako ne bi došlo do zabune u definiciji brojevnog sustava, prije heksadecimalni broj koristite hash simbol #, na primjer # 666999. Svaka od tri boje - crvena, zelena i plava - može se kretati od 00 do FF. Dakle, oznaka boje podijeljena je na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja - zelenu, a posljednja dva - plavu.
Zadana vrijednost
Ovisi o pregledniku i njegovoj verziji, koja se obično koristi bijela boja pozadini.
Analogni CSS
boja pozadine
Primjer 4. Boja pozadine ćelije
| ... |
| ... |
BORDERCOLOR parametar
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Postavlja boju obruba oko ćelije. Okvir se prikazuje kada je instaliran parametar granice s vrijednošću različitom od nule za oznaku
| ... | ||||||||||||||||||
| ... | ... |
COLSPAN parametar
Riža. 1. Primjer tablice u kojoj se koristi horizontalna konkatenacija ćelija
Tablica na slici 1 sadrži dva retka i dva stupca, s gornjim horizontalnim ćelijama spojenim pomoću parametra colspan.
Sintaksa
Argumenti
Zadana vrijednost
Primjer 6. Spajanje ćelija
| ćelija 1 | |
| ćelija 2 | ćelija 3 |
Parametar VISINA
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Preglednik sam postavlja visinu tablice i njenih ćelija na temelju njihovog sadržaja. Međutim, korištenje parametra visine promijenit će visinu ćelija. Ovdje postoje dvije mogućnosti. Ako je vrijednost visine manja od sadržaja ćelije, tada će se ovaj parametar zanemariti. Kada je visina ćelije postavljena da bude veća od njenog sadržaja, dodaje se okomiti bijeli prostor.
Sintaksa
Argumenti
Zadana vrijednost
Visina se izračunava na temelju sadržaja ćelije.
Analogni CSS
Primjer 7. Visina ćelije
| ... |
NOWRAP parametar
Opis
Dodavanje parametra nowrap u oznaku
Sintaksa
Argumenti
Zadana vrijednost
Nowrap opcija nije postavljena prema zadanim postavkama.
Analogni CSS
Primjer 8. Korištenje parametra nowrap
| ... |
ROWSPAN parametar
Riža. 2. Primjer tablice u kojoj se koristi vertikalna konkatenacija ćelija
U onom prikazanom na sl. Tablica 2 sadrži dva retka i dva stupca, pri čemu se lijeve okomite ćelije spajaju pomoću parametra raspona redaka.
Sintaksa
Argumenti
Svaki pozitivan cijeli broj veći od 2.
Zadana vrijednost
Primjer 9. Spajanje ćelija
| ćelija 1 | ćelija 2 |
| ćelija 3 |
VALIGN parametar
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Postavlja okomito poravnanje sadržaja ćelije. Prema zadanim postavkama, sadržaj ćelije je centriran okomito.
Sintaksa
Argumenti
vrh Poravnava sadržaj ćelije s vrhom retka. sredina Poravnajte u sredini. bottom Poravnava prema dnu. osnovna linija Poravnava s osnovnom linijom, koja pričvršćuje sadržaj ćelije u jednu liniju.Zadana vrijednost
Analogni CSS
Primjer 10. Poravnanje u ćeliji
| ... | ... |
Parametar WIDTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Određuje širinu ćelije. Ako ukupna širina sadržaja premašuje navedenu širinu ćelije, tada će se preglednik pokušati "ugurati" u zadane dimenzije oblikovanjem teksta. U slučaju kada to nije moguće, na primjer, u ćeliji su slike, parametar širine bit će zanemarena i nova širina ćelije izračunat će se na temelju njezinog sadržaja.
Sintaksa
Argumenti
Bilo koja cjelobrojna vrijednost u pikselima ili postotak dostupnog prostora.
Zadana vrijednost
Širina se izračunava na temelju sadržaja ćelije.
Analogni CSS
Primjer 11. Širina ćelija
| ... | ... |
Oznake tablice
Atribut poravnanja
Atribut uskladiti postavlja poravnanje u ćeliji. Ispod je tablica vrijednosti i primjer:
| Ćelija 1 | Ćelija 2 |
Atribut pozadine
Atribut pozadini definira sliku koja se postavlja u ćeliju. Analog u CSS-u je svojstvo pozadinska slika... Evo primjera:
| Ćelija 1 | Ćelija 2 |
Atribut Bgcolor
Atribut bgcolor dodaje boju pozadine navedenoj ćeliji. Vrijednost mora specificirati boju pozadine. Analog u CSS-u je svojstvo boja pozadine... Evo primjera:
| Ćelija 1 | Ćelija 2 |
Colspan atribut
Atribut kolspan koristi se za horizontalno kombiniranje stanica. Atribut se često koristi, da biste ga razumjeli, razmotrite primjer:
| Linija 1 | ||
| 2. redak | 2. redak | |
| 3. redak | 3. redak | 3. redak |
Atribut visine
Atribut visina odgovoran je za visinu ćelije. Prihvaća vrijednosti u pikselima i postocima. Zastario je i smatra se da je bolje koristiti CSS, s čime se slažem. Evo primjera:
| Ćelija 1 | Ćelija 2 |
Atribut raspona redaka
Atribut raspon redova odgovoran je za vertikalno spajanje stanica. Atribut je koristan za kreiranje složenih tablica. Evo primjera:
| Ćelija 1 | Ćelija 2 |
| Ćelija 3 |
Valign atribut
Atribut valign prijaviti se za vertikalno poravnanje sadržaj stanica. Ispod je tablica vrijednosti i primjer:
| Hej | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at egestas orci. Vivamus vitae pretium neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut finibus commodo nibh, in accumsan nulla finibus na. Etiam nec lacus eu turpis volutpat sodales. Ut pretium dui lacus, non commodo est malesuada placerat. Nulla bibendum quam elit, in placerat ex placerat ut. Curabitur non aliquet masa. Cum sociis natoque penatibus et magnis dis porođajni montes, nascetur ridiculus mus. Nam gravida mi quis enim vulputate, sed convallis magna ultrices. Proin purus enim, fermentum vel tincidunt id, bibendum eget felis. |
Atribut širine
Atribut širina odgovoran je za širinu ćelije. Prihvaća vrijednosti u pikselima i postocima. Zastario je i smatra se da je bolje koristiti CSS, s čime se slažem. Evo primjera:
| Ćelija 1 | Ćelija 2 |
Pozdrav dragi čitatelji blog stranice. Skrećem vam pozornost na još jedan članak, koji će biti posvećen tome što je tablica u HTML-u, koje oznake se koriste za njegovu izradu (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), kako postaviti pozadinu i granice za to, i još mnogo toga.
Unatoč činjenici da je izgled tablice web-mjesta () u html jeziku() sustavno zamjenjuje blok, još uvijek morate znati glavne oznake i mogućnost prilagođavanja tablica. Na primjer, motor još uvijek koristi zastarjeli izgled i ako želite napraviti bilo kakve promjene izgled svojim stranicama, ovo znanje će vam pomoći.
Čak najjednostavniji umetak kod brojača pogodaka može zahtijevati od vas razumijevanje principa građenja tablica u html-u. Podsjetim da smo već uspjeli razmotriti, kao i.
Tablice u HTML-u - Table, Tr, Th, Td elementi
Danas je izgled tablice izblijedio u pozadinu pojavom CSS-a, no unatoč tome, često je najčešće na zgodan način prezentacija informacija je još uvijek dobra stara ploča i još trebate znati njezine glavne oznake.
Ranije, prije CSS injekcija, webmasteri uopće nisu mogli bez njih, jer se na njima temeljio cjelokupni izgled stranica. Koristili smo ne samo osnovne oznake Table, Tr, Th i Td, već i cijeli bogati asortiman pomoćnih elemenata (Col, Tbody, Caption, Rowspan, Colspan, itd.). Još uvijek možete pronaći na Internetu stranice i forume izrađene na temelju rasporeda tablica, što vam može poslužiti kao dodatni poticaj da naučite osnove njihove konstrukcije.
Tablice u HTML jeziku su poseban element, jer je u biti element Table blok element, ali u isto vrijeme ne zauzima sav prostor koji mu je dostupan u širini, kao što to čine drugi. blok elementi... Po širini zauzima samo prostor koji je potreban za smještaj sadržaja – ni više, ni manje.
Međutim, oznaka Table će se inače ponašati točno kao blok element. Na primjer, znakovi koji slijede jedan za drugim u kodu bit će na web stranici biti smješteni jedno ispod drugog, čak i ako bi im veličina dopuštala da budu na istoj liniji. Još jedna značajka je da imaju prilično složenu strukturu u kojoj se lako možete zbuniti.
Formiraju se prema sljedećem principu. Cijela je tablica uokvirena tagovima za otvaranje i zatvaranje tablice, unutar kojih se pomoću Tr kreiraju njezini redovi, na primjer, ovako:
Ali već unutar Tr, stanice se stvaraju pomoću Td. Mogu se izraditi i pomoću Th, a razlika između ovih ćelija i onih stvorenih pomoću Td elemenata bit će isključivo vizualna. Funkcionalno, Td i Th elementi rade na isti način.
Ali sadržaj (sadržaj) ćelije stvorene oznakom Td bit će poravnat lijevo, a sadržaj ćelije kreirane pomoću Th bit će centriran i također podebljan u korištenom fontu. Sami Th elementi uvedeni su upravo kako bi osigurali naslove stupaca i redaka za tablice.
A sadržaj je unutar Td ili Th ćelija. Sve što vidite na web stranici unutar tablice nalazit će se točno unutar ćelija koje su formirane otvaranjem i zatvaranjem Td ili Th tagova:
Ali samo po sebi, stvaranje ploča događa se red po red - otvori Tr, a zatim zatvori Tr. Koliko takvih parova Tr elemenata imate, koliko redaka dobijete. Koliko će stupaca biti?
Točno onoliko koliko stvorite u svakom retku (Tr) ćelija (Td ili Th). Ako želite napraviti jednostavnu i simetričnu ploču (pogledajte gornju sliku), tada trebate napraviti isti broj ćelija (Td ili Th) u svakoj liniji.
Dakle, tablice u Html-u se formiraju red po red - Tr su zaslužne za formiranje redaka, a Td ili Th za formiranje stupaca. Važno je napomenuti da unutar Td ili Th možete umetnuti apsolutno bilo koji sadržaj - tekst, inline ili blok elemente (, slike uz pomoć, naslove, odlomke) itd.
Da. ispada da u Html kodu ne može postojati tablica koja bi se sastojala od manje od tri elementa - Table, Tr, Td (ili Th).
Tablica - glavni element stola
Počnimo gledajući oznaku Table, odnosno atribute koje ima:
Zapravo, to nisu svi atributi, već samo najrelevantniji i korišteni ovaj trenutak... Maksimum detaljne informacije prema svim vrstama atributa oznake Table, kao i bilo kojeg drugog elementa.
Jer tablica je blok element koji ne želi zauzeti sav raspoloživi prostor u širini, što znači da možemo primijeniti horizontalno poravnanje na oznaku Table pomoću atributa Uskladiti.
Ali ovdje sve nije tako jednostavno, jer korištenje vrijednosti lijevo i desno u Align neće dovesti do poravnanja naše ploče na lijevom ili desnom rubu, već do omota teksta oko njega, u potpunoj analogiji s onim kako smo vidjeli to u. Pa, ako upotrijebite vrijednost Center za Align, ona će biti samo centrirana bez ikakvih omotača.
Preko Atribut širine možete postaviti širinu tablice, dok možete koristiti i apsolutne vrijednosti u pikselima i relativne u postocima (100% će odgovarati cijelom dostupnom prostoru u širini).
Samo naprijed. Cellpadding omogućuje vam da postavite uvlačenje sadržaja u ćelijama (Td ili Th) od njegovih rubova (na sve četiri strane u isto vrijeme), a razmak između ćelija omogućuje postavljanje udaljenosti između susjednih ćelija tablice u pikselima (zadano je dva piksela) . Mislim da je ideja jasna, ali ipak će to biti jasnije pokazati na primjeru:
Sljedeći atributi oznake Table odgovorni su za pozadinu naše tablice - to su elementi Bgcolor i Background. Kao što se vjerojatno sjećate, uz pomoć Background (koja se, inače, koristi samo u oznaci Body i elementima - Table, Tr, Th ili Td), možete odabrati bilo koju sliku iz datoteke kao pozadinu, putanju kojoj će kao vrijednost biti naveden ovaj atribut.
Ova će slika, poput pločice, prekriti cijelu web stranicu (u slučaju Oznaka tijela) ili cijelu tablicu (u slučaju tablice), na primjer, ovako:
Kada koristite atribut Bgcolor u tablici, morat ćete kao vrijednost navesti boju kojom želite ispuniti svoju tablicu. pogledajte navedeni link.
Samo naprijed. Sljedeći u redu imamo atribut Granica, koji je odgovoran za formiranje okvira. Postoje suptilnosti u objašnjavanju crtanja okvira, ali radi jednostavnosti možemo reći da će okvir biti nacrtan oko ćelija i oko samog stola. U Borderu ćete moći postaviti debljinu ove granice u pikselima. Prema zadanim postavkama, granica se ne iscrtava (obrub = 0).
Ali treba imati na umu da u Html okvir stol je utisnut. Imat će boje svijetle i tamne strane, koje izgledaju kao da su ispale gornji kut svjetlo ekrana. S tim u vezi, treba imati na umu da u Borderu ne postavljate širinu cijelog obruba. Na ovu debljinu, svjetlo i tamna strana... Općenito, malo je zbunjujuće, ali to treba pogledati na primjeru.
S elementom Table pretpostavit ćemo da smo gotovi i da je vrijeme da prijeđemo na sljedeći. Posebnost Tr je u tome što je isključivo servisni i nije vidljiv na web stranici. U svojoj srži, Tr je nevidljivi spremnik za Td ili Th, koji će se u njemu nalaziti.
Tr - element reda tablice u Html-u
Koristeći oznaku Tr, jednostavno stavimo sve ćelije koje su u njoj zatvorene (Td ili Th) u jedan red i to je to, sam Tr se ne vidi. Iz ovoga slijedi važan zaključak - svi atributi ove oznake primjenjuju se posebno na ćelije zatvorene u ovom spremniku. Trenutačno najčešće korišteni atributi Tr prikazani su na slici:
Poravnaj u njemu radi na isti način kao i za odlomke ili naslove, sadržaj u svim ćelijama (Td ili Th) određenog retka (Tr) poravnat je lijevo ili desno, odnosno središte.
Valign postavlja okomito poravnanje sadržaja u svim ćelijama (Td ili Th) danog retka (Tr). Vrijednosti Top, Middle i Bottom postavljaju poravnanje prema vrhu, sredini i dnu. Zadano poravnanje je u sredini visine - Middle.
Vrijednost Baseline specificira poravnanje teksta u Td ili Th zadanog retka s osnovnom linijom fontova. Ovo može biti zgodno kada imate različite stanice tekst ima različite veličine font, a Baseline poravnanje u Valignu učinit će takvu tablicu korisnijom za čitatelje (po mom mišljenju):
Samo će prvi retki sadržaja u ćelijama (Td ili Th) biti poravnati s osnovnom linijom fontova, a svi ostali retki sadržaja bit će raspoređeni kako jesu.
Također možete koristiti atribut Bgcolor na oznaci Tr, ispunjavajući ove retke bojom pozadine koju želite. Da. sve ćelije u ovom retku ispunjene su bojom po vašem izboru:
Kao što vidite, upravo je Td ili Th unutar ovog Tr elementa ispunjen bojom pozadine, jer se sama linija ne vidi na ploči.
Td ili Th - elementi ćelija tablice u HTML-u
Pa, prijeđimo sada na najvažniji element - ćeliju, odnosno na atribute oznaka Td i Th, koji se i danas koriste:
Oznake Align i Valign u Td ili Th govore pregledniku kako bi sadržaj trebao biti poravnat po širini i visini, a ne u cijelom retku, kao što smo nedavno razmotrili. Štoviše, atributi određene ćelije imat će prioritet nad sličnih atributažice.
Oni. u cijelom retku sadržaj ćelija se može poravnati udesno, ali u nekom zasebnom retku možete postaviti drugačije poravnanje i ono će imati prednost (prekid) u odnosu na poravnanje koje je postavljeno u oznaci Tr.
Širina i visina omogućuju vam da postavite visinu i širinu ćelije, u pikselima i u postocima (u širini). Bgcolor i Background in Html Td ili Th elementi omogućuju vam da postavite zasebnu pozadinu (u obliku boje ili slike) za svaku određenu ćeliju:
Nowrap u Td ili Th zabranjuje prijenos sadržaja iz ćelije u nova linija, osim ako se ovaj sadržaj ne nalazi u tekstu. tj. u ovom slučaju razmak znakova neće se koristiti za automatsko prelamanje teksta. Vjerojatno se ovaj atribut može smatrati svojevrsnim analogom opisanog.
Pa, evo nas s vama do vrlo zanimljivih i, što je najvažnije, korisnih atributa - Colspan i Rowspan. Oni znače pokrivenost. Rowspan je raspon linije, a Colspan je raspon stupca. Oni služe za kombiniranje stanica u stupcu ili u nizu.
Ako želite kombinirati nekoliko ćelija u jednom stupcu tablice, tada ćete morati koristiti Rowspan, jer obuhvaćate više redaka jednom ćelijom. A ako želite kombinirati nekoliko ćelija za redom, onda ćete morati koristiti Colspan, jer da biste obuhvatili jednu ćeliju, potrebno vam je više stupaca.
Colspan i Rowspan su prema zadanim postavkama jednako jednom, tj. svaka ćelija se odnosi na jedan stupac i jedan red. Čim spojite ćelije, one se već počinju odnositi na nekoliko stupaca ili nekoliko redaka (ili oboje u isto vrijeme).
Caption - natpis tablice
Postoji još jedan dodatni element koji se zove "Html zaglavlje tablice" i formira se pomoću oznaka Caption. Ovaj element se ne koristi više od jednom (ili se uopće ne koristi) i postavlja se odmah nakon uvodne oznake Table. Samo umetnuti sadržaj može biti unutar natpisa i u njemu ne smije biti nikakvih blok elemenata.
Položaj natpisa može se postaviti pomoću atributa Align. Vrijednosti Top i Bottom će postaviti položaj zaglavlja, respektivno, iznad i ispod tablice. Vrijednosti Lijevo i Desno se sada ne koriste, jer rade potpuno drugačije u različitim preglednicima... Najbolje bi bilo zaboraviti na njih. Oni. na uglavnom natpis se može nalaziti samo ispod znaka ili iznad njega (ova vrijednost se koristi prema zadanim postavkama):
Općenito, možete dati sljedeći blok dijagram konstrukcije:
Uzmimo sada primjer kako možete stvoriti tablicu s ćelijama različite veličine, od kojih će neke obuhvaćati više stupaca ili redaka. Kao što smo rekli s vama malo ranije, oni se stvaraju redak po redak u HTML-u. Oslonimo se na raspored prikazan na gornjoj slici.
Za početak napišemo početnu oznaku Table i odmah nakon nje otvorimo oznaku prvog retka Tr. Prvi red naše buduće tablice sastoji se od jedne ćelije koja se proteže u dva stupca odjednom, tako da će atribut Colspan = 2 trebati dodati u oznaku ove ćelije:
Zatim zatvaramo oznaku prvog retka (Tr) i otvaramo oznaku sljedećeg, koji će već imati dvije ćelije. Prva ćelija drugog reda je neupadljiva i sastojat će se od uobičajenih oznaka za otkidanje ili zatvaranje Td ili Th, između kojih će biti zatvoren njezin sadržaj.
Ali druga ćelija drugog retka je izvanredna, jer se proteže u dva retka odjednom, i stoga ćemo morati dodati atribut Rowspan = 2 njegovoj oznaci:
Pa, ostaje nam samo opisati treći redak. Prva ćelija ovog retka, opet, ne predstavlja ništa posebno, ali drugu smo već opisali u drugom retku, što znači da je ovdje više neće biti. Svaka se ćelija može opisati samo jednom. nadam se da je ovo jasno. Da. treći red tablice izgledat će ovako:
Pa, sada spojimo sve ovo u jedan kod i vidimo što će se dogoditi:
Zapravo, ispalo je kako smo planirali. Jasno je da ovdje nema ništa komplicirano - dovoljno je razumjeti logiku rada atributa Colspan i Rowspan.
Tablični (zastarjeli) izgled
Sada razgovarajmo o takvom konceptu kao što je izgled tablice i zašto su upravo oni postali glavni alat u jeziku za označavanje hiperteksta u nedostatku CSS-a (sada, naravno, posvuda). Stvar je u tome što su samo tablice omogućile prilično jednostavno i fleksibilno rješavanje glavnog problema u izgledu web-mjesta - postavljanje blok elemenata u jedan red u Html kodu.
Kao što već znate, blok elementi, kada se postavljaju jedan za drugim u Html kodu, bit će smješteni jedan ispod drugog i na web stranici. Usput, isti znakovi su također blok elementi i možete koristiti dvije metode da ih stavite u jedan red.
Prvi se sastoji u propisivanju prve od tablica s atributom Align s vrijednošću Lijevo oznaci Table, zbog čega će druga već stajati desno od prve i priljubiti se uz nju. Nakon što smo registrirali Align = left i drugi u oznaci Table, možemo staviti čak tri komada u jedan red.
Ali prvi način nam ne dopušta da ih odmaknemo jedno od drugog, jer se u to vrijeme CSS još nije koristio. Stoga je najprikladniji način za postavljanje nekoliko tablica (ili bilo kojeg drugog elementa bloka) u jedan red bio kreiranje tablice s jednim redom (Tr) i brojem ćelija koje nam treba (Td ili Th), proporcionalno broju bloka elemente koje ćemo morati smjestiti u jedan red.
Dakle, za najjednostavniji smještaj nekoliko komada u nizu, morat ćete stvoriti takozvane ugniježđene tablice, kada se druga ćelija umetne kao sadržaj u jednu ćeliju:
Sada na HTML elementi, koji se nalazi u ćelijama tablice koju smo kreirali, bit će moguće primijeniti sve gore opisane atribute, kako za Tr oznake, tako i za Td ili Th oznake. Bit će moguće pozicionirati sadržaj u ćelije, postaviti potrebne uvlake, ispuniti pozadinom itd.
Oni. sada bez koristeći CSS(što prije nije postojalo) možete poravnati sadržaj (naše blok elemente), a time što okvir ploče učinimo nevidljivim, možemo pozicionirati sadržaj na web stranici. Primjerice, neće biti teško postaviti prikaz teksta u tri stupca ili, općenito, što god vam srce poželi.
Ako otvorite izvor neke stare stranice, ili još bolje foruma, onda ćete s velikom vjerojatnošću tamo vidjeti puno ploča ugniježđenih u druge i tako sve do potpune zabune.
U tabličnom rasporedu takvi su se dizajni koristili posvuda, a neka tadašnja rješenja, koja bi se sada radila u tren oka, zahtijevala su vrlo glomazne nacrte od ploča ugniježđenih jedna u drugu. Na stolu, vodoravno i okomiti izbornici za web stranice, razbijanje odlomaka s tekstovima u stupce i još mnogo toga
Tbody, Thead i Tfoot - spremnici za retke u Html tablici
No, vratimo se opet na naše ramove i razmotrimo još nekoliko elemenata koji su ranije (kada još nije bilo CSS-a) omogućili odmah postavljanje svojstava za veliki broj linije u oznaci Table. Tr su sami nevidljivi spremnici za Td ili Th, ali postoje tri druge vrste spremnika koji zauzvrat služe kao spremnici za Tr.
Uz njihovu pomoć, moći ćemo odmah postaviti svojstva za velika grupa linije, na primjer, ispunite ih pozadinom, dodijelite željeno poravnanje itd. Govorim o elementima kao što su Thead (za zaglavlje), Tbody (za sadržaj) i Tfoot (za njegov kraj). Prilikom izrade tablice, prvo se ispisuje skupina redaka vezanih uz zaglavlje (ograđena u oznakama Thead), zatim skupina redaka koja se odnosi na njen kraj (Tfoot), a tek onda grupa redaka koja se odnosi na njen glavni sadržaj (Tbody ).
V Html tablica odjeljak Thead može se registrirati samo jednom ili uopće ne postoji. Isto vrijedi i za spremnik Tfoot elemenata. Ali barem jedan odjeljak Tbody mora biti prisutan.
No, na primjer, tablice na ovoj stranici prikazane su savršeno, iako se nisam trudio staviti oznake za otvaranje i zatvaranje Tbody. Sve je vrlo jednostavno - prilikom raščlanjivanja koda, sam preglednik je dodao elemente Tbody, što se može vidjeti gledajući ovaj vrlo rezultirajući kod:
Ali u praksi, ako su raniji webmasteri pravili složene tablice, onda im je Tbody jako dobro došao. Recimo da imate tablicu s nekoliko tisuća redaka i trebate prilagoditi poravnanje u svim ćelijama na drugačiji način od zadanog. Bez upotrebe Tbody-a, morali biste dodati odgovarajući atribut nekoliko tisuća puta svim oznakama retka.
Ali možete, na kraju krajeva, sve ove tisuće redaka staviti u jedan Tbody spremnik i pisati samo u njega traženi atribut s ispravnim poravnanjem. To može uvelike osloboditi HTML kod od nepotrebnih ponavljanja. Općenito, u jednostavne tablice elementi Tbody, Thead i Tfoot mogu se zanemariti, ali u složenim, njihova je upotreba i dalje aktualna čak i u naše vrijeme, kada postoje takvi moćan alat poput CSS-a.
Col - postavite širinu stupaca tablice
Col i Colgroup sada imaju gotovo isti utjecaj, pa razgovarajmo o njihovoj upotrebi koristeći Col element kao primjer. Potrebno je prikladno postaviti širinu stupaca i redaka. Col ima dva glavna atributa, raspon i širinu, koji vam omogućuju postavljanje različite širine za sve stupce zatvorene u oznakama Col.
Raspon postavlja raspon (veličinu spremnika) navodeći broj stupaca za koje će se primijeniti širina navedena u Width. Na primjer, ovako:
Oni. Postavio sam širinu na 50 piksela za prva dva stupca tablice, 200 piksela za treći stupac i 100 piksela za preostala dva. Sve je prilično jednostavno i jasno, po mom mišljenju. Ali u stvari, širine stupaca, specificirane kroz Col elemente, samo su vaša deklaracija, jer kada se promijeni veličina prozora preglednika, širine stupaca će se promijeniti.
Sretno ti! Vidimo se uskoro na stranicama blog stranice
možete pogledati više videozapisa ako odete na");">
Možda ćete biti zainteresirani
Odaberite, Opcija, Textarea, Label, Fieldset, Legend - oznake Html obrasci padajuće izbornike i tekstni okvir 
Kako se postavljaju boje u Html i CSS kodu, odabir RGB nijansi u tablicama, Yandex i drugi programi 
MailTo - što je to i kako napraviti link u Html za slanje e-pošte 
Html obrasci za stranicu - oznake Form, Input i Select, Option, Textarea, Label i drugi za izradu elemenata web obrazaca
Svaka oznaka
Kako napraviti tablicu u html-u
Dajemo primjer, html kod:
Primjer tablice 1. stupac 2. stupac
Obratite pažnju na ćeliju
Sada pogledajmo pobliže sve atribute oznake.
| ili žice | ||||||||||
| ... | ... |
...
2. Pozadina svojstva = "URL" - postavlja pozadinska slika... Umjesto URL-a mora biti napisana adresa pozadinske slike. Primjer
Pretvoreno na stranici u sljedeće: U razmatranom primjeru, naš pozadinska slika nalazi se u mapi img (koja se nalazi u istom direktoriju kao i html stranica), a slika se zove fon.gif. Imajte na umu da smo u oznaku dodali style = "boja: bijela;" ... Budući da je pozadina gotovo crna, da se tekst ne spaja s pozadinom, tekst smo napravili bijelim. 3. Svojstvo bgcolor = "color" - postavlja boju pozadine tablice. Kao boju možete odabrati bilo koju od cijele palete (pogledajte kodove i nazive html boja) 4. Granica svojstva = "broj" - postavlja debljinu obruba tablice. U prethodnim primjerima naveli smo border = "1", što znači da je širina obruba 1 piksel. 5. Svojstvo bordercolor = "color" - postavlja boju obruba. Ako je granica = "0", tada neće biti obruba i boja obruba neće imati smisla. 6. Svojstvo cellpadding = "broj" - uvlačenje od okvira do sadržaja ćelije u pikselima. 7. Svojstvo cellspacing = "number" - udaljenost između ćelija u pikselima. 8. Svojstvo cols = "broj" - broj stupaca. Ako ga ne navedete, preglednik će sam odrediti broj stupaca. Jedina razlika je u tome što će navođenje ovog parametra vjerojatno ubrzati učitavanje tablice. 9. Okvir svojstva = "parametar" - kako prikazati obrube oko stola. Može poprimiti sljedeće vrijednosti:
10. Visina svojstva = "broj" - postavlja visinu tablice: ili u pikselima ili u postocima. 11. Pravila svojstava = "parametar" - gdje prikazati granice između ćelija. Može poprimiti sljedeće vrijednosti:
|
