HTML atribut širine se koristi za postavljanje širine ćelije tabele, što zamenjuje podrazumevanu vrednost. To je zastarjelo. Koristite CSS za kontrolu rasporeda ćelija u HTML tabelama.
Podešavanje širine kolone tabele
Atribut širine, koji je sada zastario, bio je nekada standardna metoda podešavanje širine kolona tabele. Podrazumevano, pretraživač će prilagoditi kolone tabele 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 nikakav CSS ili HTML td width . Šta će pretraživač uraditi sa takvom tabelom?
| Tanak | Stvarno Stvarno Stvarno Široko |
| Malo |
Pregledač je dodijelio mnogo više prostora za drugu kolonu nego za prvu. Sada ćemo učiniti istu stvar, ali koristimo atribut širine da prisilimo 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, pretraživač mora svakoj koloni dati istu širinu. Ali prva tabela bi trebala automatski podesiti svoju veličinu da popuni 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 nije važeći HTML kod jer HTML tabelaširina je zastarjela. Ali isto možete učiniti i sa jednostavan kod CSS:
| Tanak | Stvarno Stvarno Stvarno Široko |
|---|---|
| Malo |
Hajde da vidimo kako bi pretraživač prikazao tabelu koristeći CSS umesto 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 sa širinom je visina ( visina). Ovaj atribut je također zastario i ne bi se trebao koristiti. Ali pošto govorimo o podešavanju širine kolona, moramo razmotriti podešavanje visine redova. Evo kako je to urađeno prije korištenja naslijeđenog atributa:
| Tanak | Stvarno Stvarno Stvarno Široko |
|---|---|
| Malo | Puno, puno, puno, puno sadržaja, toliko da će zahtijevati prijelom reda. |
Kako pretraživač daje ovaj primjer:
Da budem iskren, ne mogu zamisliti zašto biste trebali kontrolirati visinu linije pomoću koristeći HTML td width . Mnogo je smislenije konfigurirati vanjski i padding za sadržaj elementa
Opcije
align Određuje horizontalno poravnanje sadržaja ćelije. background Određuje pozadinsku sliku za ćeliju. bgcolor Boja pozadine ćelije. bordercolor Boja ivice. colspan Razdvaja horizontalne ćelije. visina Visina ćelije. nowrap Onemogućuje prelamanje linija. raspon redova Raspon vertikalnih ćelija. valign Poravnava sadržaj ćelije okomito. width Širina ćelije.Oznaka za zatvaranje
Nije potrebno.
Primjer 1: Korištenje oznake
| ... | |
| ... | ... |
Opis parametara oznake
ALIGN parametar
HTML:
3.2
4
XHTML:
1.0
1.1
Opis
Postavlja horizontalno poravnanje sadržaja ćelije.
Sintaksa
...
Argumenti
lijevo Poravnava sadržaj ćelije ulijevo. centar Centralno poravnanje. desno Poravnajte udesno. opravdati opravdanje (i desno i lijevo). Zadana vrijednost
Slično CSS-u
ALIGN parametar
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Postavlja horizontalno poravnanje sadržaja ćelije.
Sintaksa
Primjer 2: Poravnavanje sadržaja ćelije
| ... | ... |
BACKGROUND parametar
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Određuje sliku koja će se koristiti kao pozadinska slika ćelije tabele. Za razliku od običnih slika, pozadina nema podešenu širinu ili visinu i uvijek se prikazuje u punoj veličini 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 se pojaviti vidljive razlike koje su uočljive posjetiteljima stranice. Prilikom odabira pozadinske slike, uvjerite se da postoji dovoljan kontrast između nje i sadržaja ćelije. Animirane slike se mogu koristiti kao pozadine. GIF format, ali odvlače pažnju čitalaca.
Sintaksa
Argumenti
Bilo koja važeća adresa slike - možete koristiti relativnu ili apsolutnu putanju.
Zadana vrijednost
Slično CSS-u
pozadinska slika
Primjer 3: Pozadinska slika u ćeliji
| background="/images/rules.gif"> ... |
BGCOLOR parametar
Opis
Postavlja boju pozadine ćelije.
Sintaksa
Argumenti
Vrijednost boje može se postaviti na dva načina.
1. Po imenu
Pretraživači podržavaju neke boje svojim imenom.
2. Po heksadecimalnoj vrijednosti
Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem, za razliku od decimalnog, baziran je, kao što mu ime kaže, na broju 16. Brojevi će biti sledeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 se zamjenjuju sa latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan. Na primjer, broj 255 u decimalnom sistemu odgovara broju FF in heksadecimalni sistem. Da bi se izbjegla zabuna u određivanju brojnog sistema, prije heksadecimalni broj stavite heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Dakle, simbol boje je podijeljen na tri komponente #rrggbb, pri čemu prva dva simbola označavaju crvenu komponentu boje, srednja dva - zelenu, a zadnja dva - plavu.
Zadana vrijednost
Zavisi od pretraživača i njegove verzije, koja se obično koristi Bijela boja pozadini.
Slično CSS-u
boja pozadine
Primjer 4: Boja pozadine ćelije
| ... |
| ... |
BORDERCOLOR parametar
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Postavlja boju ivice oko ćelije. Okvir se prikazuje kada je instaliran granični parametar sa vrijednošću oznake koja nije nula
| ... | ||||||||||||||||||
| ... | ... |
COLSPAN parametar
Rice. 1. Primjer tabele u kojoj se koristi horizontalno spajanje ćelija
Tabela prikazana na slici 1 sadrži dva reda i dvije kolone, a gornje horizontalne ćelije su kombinovane pomoću parametra colspan.
Sintaksa
Argumenti
Zadana vrijednost
Primjer 6: Spajanje ćelija
| ćelija 1 | |
| ćelija 2 | ćelija 3 |
HEIGHT parametar
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Sam pretraživač postavlja visinu tabele i njenih ćelija na osnovu njihovog sadržaja. Međutim, ako koristite parametar visine, visina ćelija će se promijeniti. Ovdje postoje dvije moguće opcije. Ako je vrijednost visine manja od sadržaja ćelije, onda će se ovaj parametar zanemariti. Kada je visina ćelije postavljena da bude veća od njenog sadržaja, dodaje se vertikalni prazan prostor.
Sintaksa
Argumenti
Zadana vrijednost
Visina se izračunava na osnovu sadržaja ćelije.
Slično CSS-u
Primjer 7. Visina ćelije
| ... |
NOWRAP parametar
Opis
Dodavanje parametra nowrap u oznaku
Sintaksa
Argumenti
Zadana vrijednost
Podrazumevano, Nowrap nije postavljen.
Slično CSS-u
Primjer 8: Korištenje parametra nowrap
| ... |
ROWSPAN parametar
Rice. 2. Primjer tabele u kojoj se koristi vertikalno spajanje ćelija
Na prikazanoj slici. 2 tablica sadrži dva reda i dvije kolone, a lijeve vertikalne ćelije se kombiniraju pomoću parametra rowspan.
Sintaksa
Argumenti
Bilo koji 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 vertikalno poravnanje sadržaja ćelije. Prema zadanim postavkama, sadržaj ćelije se nalazi okomito u sredini.
Sintaksa
Argumenti
top Poravnava sadržaj ćelije s gornjom ivicom reda. sredina Poravnajte sa sredinom. dno Poravnajte sa donjom ivicom. osnovna linija Poravnavanje prema osnovnoj liniji, koja spaja sadržaj ćelije u jednu liniju.Zadana vrijednost
Slično CSS-u
Primjer 10: Poravnanje u ćeliji
| ... | ... |
parametar WIDTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Opis
Postavlja širinu ćelije. Ako ukupna širina sadržaja premašuje navedenu širinu ćelije, pretraživač će pokušati da se "ugura". date dimenzije zbog formatiranja teksta. U slučajevima kada to nije moguće, na primjer, ćelija sadrži slike, parametar širineće biti zanemarena i nova širina ćelije će se izračunati na osnovu njenog sadržaja.
Sintaksa
Argumenti
Bilo koja cjelobrojna vrijednost u pikselima ili postotak dostupnog prostora.
Zadana vrijednost
Širina se izračunava na osnovu sadržaja ćelije.
Slično CSS-u
Primjer 11. Širina ćelije
| ... | ... |
Table tags
align atribut
Atribut poravnati specificira poravnanje u ćeliji. Ispod je tabela vrijednosti i primjer:
| Ćelija 1 | Ćelija 2 |
pozadinski atribut
Atribut pozadini specificira sliku koja će biti postavljena u ćeliju. Ekvivalent u CSS-u je svojstvo pozadinska slika. Ispod je primjer:
| Ćelija 1 | Ćelija 2 |
bgcolor atribut
Atribut bgcolor Dodaje boju pozadine datoj ćeliji. Vrijednost mora uključivati boju pozadine. Ekvivalent u CSS-u je svojstvo boja pozadine. Ispod je primjer:
| Ćelija 1 | Ćelija 2 |
colspan atribut
Atribut colspan koristi se za horizontalno spajanje ćelija. Atribut se često koristi, da bismo ga razumjeli, pogledajmo primjer:
| Linija 1 | ||
| Linija 2 | Linija 2 | |
| Linija 3 | Linija 3 | Linija 3 |
atribut visine
Atribut visina odgovoran je za visinu ćelije. Prihvata vrijednosti u pikselima i procentima. Na to se ne gleda i smatra se da je bolje koristiti CSS, sa čime se slažem. Ispod je primjer:
| Ćelija 1 | Ćelija 2 |
rowspan atribut
Atribut raspon redova odgovoran je za vertikalno spajanje ćelija. Atribut je koristan za kreiranje složenih tabela. Ispod je primjer:
| Ćelija 1 | Ćelija 2 |
| Ćelija 3 |
valign atribut
Atribut valign koristi za vertikalno poravnanje sadržaj ćelije. Ispod je tabela vrijednosti i primjer:
| zdravo | Lorem ipsum dolor sit amet, consectetur adipiscing elite. 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 at. 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 massa. 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. Prihvata vrijednosti u pikselima i procentima. Na to se ne gleda i smatra se da je bolje koristiti CSS, sa čime se slažem. Ispod je primjer:
| Ćelija 1 | Ćelija 2 |
Pozdrav, dragi čitaoci blog stranice. Skrećem vašu pažnju na još jedan članak, koji će biti posvećen tome šta je tabela u HTML-u, koje oznake se koriste za kreiranje (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), kako postaviti pozadinu i granice za to, kao i mnogo više.
Unatoč činjenici da je tabelarni izgled stranice () u HTML jezik() postupno se zamjenjuje baziranom na blokovima, 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 njegove stranice, onda će vam ovo znanje pomoći.
Čak jednostavno umetanje Kod brojača posjeta može zahtijevati da razumijete principe konstruiranja tabela u HTML-u. Da vas podsjetim da smo već razmatrali, kao i.
Tabele u HTML-u - elementi Table, Tr, Th, Td
Danas je izgled tabele izbledeo u pozadinu pojavom CSS-a, ali je ipak često najčešće na zgodan način Prezentacija informacija i dalje ostaje stari dobri tablet i još uvijek morate znati njegove glavne oznake.
Ranije, čak i prije CSS implementacija, webmasteri uglavnom nisu mogli bez njih, jer je na njima baziran cijeli izgled web stranica. Korišteni su ne samo osnovni tagovi Table, Tr, Th i Td, već i čitava bogata paleta pomoćnih elemenata (Col, Tbody, Caption, Rowspan, Colspan, itd.). Na Internetu još uvijek možete pronaći stranice i forume kreirane na osnovu tabelarnog izgleda, što vam može poslužiti kao dodatni poticaj da proučite osnove njihove konstrukcije.
Tabele u HTML jeziku su poseban element, jer je u svojoj srži element Table na nivou bloka, ali u isto vrijeme ne zauzima sav raspoloživi prostor u širini, kao što to čine drugi. blok elementi. Što se tiče širine, zauzima samo prostor neophodan za smještaj sadržaja - ni više, ni manje.
Međutim, u svim ostalim aspektima, oznaka Table će se ponašati baš kao blok element. Na primjer, znakovi koji slijede jedan za drugim u kodu će se pojaviti na web stranici biti smješteni jedno ispod drugog, čak i ako bi im njihova veličina omogućila da stoje na istoj liniji. Još jedna karakteristika je da imaju prilično složenu strukturu u kojoj se lako možete zbuniti.
Formiraju se prema sljedećem principu. Cela tabela je uokvirena otvaranjem i zatvaranjem tabela tabele, unutar kojih se njeni redovi kreiraju pomoću Tr, na primer, ovako:
Ali unutar Tr, ćelije se kreiraju pomoću Td. Mogu se kreirati i pomoću Th, a razlika između ovih ćelija i onih stvorenih pomoću Td elemenata bit će samo čisto vizualna. Funkcionalno, Td i Th elementi rade identično.
Ali sadržaj ćelije kreirane sa Td oznakom će biti poravnat levo, dok će sadržaj ćelije kreirane sa Th oznakom biti poravnat po sredini i takođe podebljan u korišćenom fontu. Sami Th elementi su uvedeni upravo da bi napravili naslove kolona i redova za tabele.
A sadržaj se nalazi unutar Td ili Th ćelija. Sve što vidite na web stranici unutar tabele nalaziće se tačno unutar ćelija koje su formirane otvaranjem i zatvaranjem Td ili Th tagova:
Ali samo kreiranje znakova se dešava red po red - otvori Tr, a zatim zatvori Tr. Koliko takvih parova Tr elemenata imate, broj redova ćete dobiti. Koliko će kolona biti?
Točno onoliko ćelija (Td ili Th) koliko kreirate u svakom redu (Tr). Ako želite da napravite jednostavan i simetričan znak (pogledajte sliku iznad), potrebno je da broj ćelija (Td ili Th) u svakoj liniji bude isti.
Dakle, tabele u Html-u se formiraju red po red - Tr su odgovorni za formiranje redova, a Td ili Th su odgovorni za formiranje kolona. Važno je napomenuti da unutar Td ili Th možete umetnuti apsolutno bilo koji sadržaj - tekst, inline ili blok elemente ( , slike pomoću , naslove, pasuse) itd.
To. Ispostavilo se da u Html kodu ne može postojati tabela koja bi se sastojala od manje od tri elementa - Table, Tr, Td (ili Th).
Tabela - glavni element tabele
Počnimo s oznakom Table, odnosno atributima koje ona ima:
Zapravo, to nisu svi atributi, već samo oni najrelevantniji i najkorišćeniji. ovog trenutka. Maksimum detaljne informacije za sve vrste atributa oznake Table, kao i za bilo koji drugi element.
Jer tabela je blok element koji nema tendenciju da zauzme sav raspoloživi prostor u širini, što znači da možemo primijeniti horizontalno poravnanje na oznaku Table koristeći atribut Poravnajte.
Ali ovdje nije tako jednostavno, jer korištenje lijeve i desne vrijednosti u Align-u neće dovesti do poravnanja našeg znaka lijevo ili desno, već do premotavanja teksta oko njega, u potpunoj analogiji s onim kako smo ga vidjeli sa . Pa, ako koristite vrijednost Center za Align, ona će jednostavno biti poravnata sa središtem bez ikakvog premotavanja.
Korišćenjem Atribut širine možete postaviti širinu tablice, a možete koristiti i apsolutne vrijednosti u pikselima i relativne vrijednosti u procentima (100% će odgovarati cijelom dostupnom prostoru u širini).
Nastavi. Cellpadding omogućava 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 vam omogućava da postavite razmak između susjednih ćelija tablice u pikselima (zadana vrijednost je dva piksela ). Mislim da je ideja jasna, ali će to biti jasnije pokazati na primjeru:
Sljedeći atributi oznake Table su odgovorni za pozadinu naše tablice - to su elementi Bgcolor i Background. Kao što se vjerovatno sjećate, koristeći Pozadinu (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, do koje će biti naveden kao vrijednost ovog atributa.
Ova slika će, poput pločice, pokriti cijelu web stranicu (u slučaju Oznaka tijela) ili cijelu tablicu (u slučaju Tablice), na primjer, ovako:
Kada koristite atribut Bgcolor u tabeli, moraćete da navedete kao njegovu vrednost boju kojom želite da ispunite svoju tabelu. pogledajte navedeni link.
Nastavi. Sljedeći je atribut Granica, koji je odgovoran za formiranje okvira. Postoje suptilnosti u objašnjavanju kako nacrtati okvire, ali radi jednostavnosti možemo reći da će okvir biti nacrtan oko ćelija i oko same tablice. U Borderu ćete imati opciju da postavite debljinu ove granice u pikselima. Podrazumevano, granica nije iscrtana (border=0).
Ali treba uzeti u obzir da u HTML okvir Sto je reljefno. Imat će boje svijetle i tamne strane, koje izgledaju kao da pada gornji ugao osvetljenje ekrana. S tim u vezi, treba uzeti u obzir da u Borderu ne postavljate širinu cijelog okvira. Ovoj debljini će se dodati svjetlo i tamna strana. Općenito, malo je zbunjujuće, ali morate to pogledati na primjeru.
Sa elementom Table smatrat ćemo da smo gotovi i vrijeme je da pređemo na sljedeći. Posebnost Tr je u tome što je čisto servisna i nije vidljiva na web stranici. U svojoj srži, Tr je nevidljivi kontejner za Td ili Th koji će se nalaziti u njemu.
Tr - element reda tablice u HTML-u
Koristeći oznaku Tr, jednostavno stavljamo sve ćelije koje se nalaze u njoj (Td ili Th) u jedan red i to je to, sam Tr nije vidljiv. Iz ovoga slijedi važan zaključak: svi atributi ove oznake primjenjuju se posebno na ćelije sadržane u ovom kontejneru. Trenutno najčešće korišteni Tr atributi prikazani su na slici:
Poravnanje radi na isti način kao i za pasuse ili naslove, sadržaj u svim ćelijama (Td ili Th) datog reda (Tr) je poravnat lijevo ili desno, ili centriran.
Valign postavlja vertikalno poravnanje sadržaja u svim ćelijama (Td ili Th) datog reda (Tr). Vrijednosti Top, Middle i Bottom postavljaju poravnanje na vrh, sredinu i dno, respektivno. Podrazumevano poravnanje je Srednje.
Vrijednost Baseline specificira poravnanje teksta u Td ili Th ovog reda duž osnovne linije fonta. Ovo može biti zgodno kada imate različite ćelije tekst ima različite veličine font, a Baseline alignment u Valignu će učiniti takvu tabelu upotrebljivijom za čitaoce (po mom mišljenju):
Samo će prvi redovi sadržaja u ćelijama (Td ili Th) biti poravnati duž osnovne linije fonta, a svi ostali redovi sadržaja će biti pozicionirani kako se to dogodi.
Također možete koristiti atribut Bgcolor u oznaci Tr, ispunjavajući ove redove bojom pozadine koja vam je potrebna. To. Sve ćelije u ovom redu su ispunjene bojom po vašem izboru:
Kao što vidite, Td ili Th unutar ovog Tr elementa je ispunjen bojom pozadine, jer se sama linija ne vidi na ploči.
Td ili Th - elementi ćelije u HTML-u
Pa, sada prijeđimo na najvažniji element - ćeliju, odnosno atribute Td i Th tagova, koji su još uvijek u upotrebi:
Align i Valign u oznakama Td ili Th govore pretraživaču kako tačno sadržaj treba da bude poravnat po širini i visini, a ne preko cele linije, kao što smo nedavno pogledali. Štaviše, atributi određene ćelije će imati prioritet nad sličnih atributa linije.
One. u cijelom redu sadržaj ćelija se može poravnati udesno, ali u pojedinom redu možete postaviti drugačije poravnanje i ono će imati prioritet (prekid) u odnosu na poravnanje koje je navedeno u Tr tag-u.
Widht i Height vam omogućavaju da postavite visinu i širinu ćelije, kako u pikselima, tako i u procentima (po širini). Bgcolor i Background in Html elementi Td ili Th vam omogućavaju da postavite zasebnu pozadinu (u obliku boje ili slike) za svaku određenu ćeliju:
Nowrap u Td ili Th sprječava prijenos sadržaja u ćeliji nova linija, osim ako se ne pojavljuje u tekstu ovog sadržaja. Odnosno, u ovom slučaju razmaka znakova neće se koristiti za automatsko prelamanje teksta. Vjerovatno se ovaj atribut može smatrati svojevrsnim analogom opisanog.
Pa, sada smo došli do vrlo zanimljivih i, što je najvažnije, korisnih atributa - Colspan i Rowspan. Oni znače doseg. Rowspan je raspon redova, a Colspan je raspon kolona. Oni služe za kombinovanje ćelija u koloni ili u nizu.
Ako želite kombinirati nekoliko ćelija u jednoj koloni tablice, morat ćete koristiti Rowspan, jer... jednom ćelijom pokrivate nekoliko redova. A ako želite kombinirati nekoliko ćelija u nizu, onda ćete morati koristiti Colspan, jer Morate pokriti nekoliko kolona jednom ćelijom.
Colspan i Rowspan su zadani jednako jedan, tj. svaka ćelija pripada jednoj koloni i jednom redu. Čim spojite ćelije, one već počinju pripadati nekoliko stupaca ili nekoliko redova (ili oboje u isto vrijeme).
Naslov - naslov tabele
Postoji još jedan dodatni element koji se zove “Html naslov tabele” 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 inline sadržaj može biti unutar natpisa i tamo ne bi trebalo biti nikakvih blok elemenata.
Položaj natpisa se može postaviti pomoću atributa Align. Vrijednosti Top i Bottom će postaviti poziciju zaglavlja iznad i ispod tabele, respektivno. Vrijednosti Lijevo i Desno se trenutno ne koriste, jer rade potpuno drugačije u različitim pretraživačima. Najbolje bi bilo zaboraviti na njih. One. By uglavnom Naslov se može nalaziti samo ispod ili iznad znaka (ova vrijednost se koristi po defaultu):
Općenito, možete dati sljedeći blok dijagram konstrukcije:
Pogledajmo sada primjer kako možete kreirati tabelu sa ćelijama različitih veličina, od kojih će neke obuhvatiti više stupaca ili redova. Kao što smo vam već rekli malo ranije, oni se kreiraju red po red u HTML-u. Oslonimo se na raspored prikazan na slici koja se nalazi iznad.
Prvo upisujemo početni tag Table i odmah nakon njega otvaramo tag prvog reda Tr. Prvi red naše buduće tabele sastoji se od jedne ćelije koja se prostire na dve kolone odjednom, tako da ćete morati da dodate Colspan=2 atribut u oznaku ove ćelije:
Zatim zatvaramo oznaku prvog reda (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 otvarajućih ili zatvarajućih Td ili Th tagova, između kojih će biti zatvoren njen sadržaj.
Ali druga ćelija drugog reda je izvanredna, jer pokriva dva reda odjednom i stoga ćemo morati dodati atribut Rowspan=2 u njenu oznaku:
Pa, moramo samo opisati treći red. Prva ćelija ovog reda, opet, ne predstavlja ništa posebno, ali drugu smo već opisali u drugom redu, što znači da je više neće biti. Svaka ćelija se može opisati samo jednom, nadam se da je ovo jasno. To. treći red tabele će izgledati ovako:
Pa, hajde da spojimo sve ovo u jedan kod i vidimo šta će se desiti:
Zapravo, ispalo je kako smo planirali. Jasno je da ovdje nema ništa komplikovano - samo razumite logiku funkcioniranja Colspan i Rowspan atributa.
Tabelarni (zastarjeli) izgled
Hajde sada da razgovaramo o takvom konceptu kao što je tabelarni izgled i zašto su postali glavni alat u jeziku za označavanje hiperteksta u nedostatku CSS-a (sada, naravno, svuda). Stvar je u tome što su samo tabele omogućile da se prilično jednostavno i fleksibilno riješi glavni problem u izgledu web stranice - postavljanje blok elemenata u Html kodu u jedan red.
Kao što već znate, blok elementi, kada se postavljaju jedan za drugim u Html kodu, biće postavljeni jedan ispod drugog na web stranici. Usput, isti znakovi su također blok elementi i možete koristiti dva načina da ih stavite u jedan red.
Prvi od njih je dodijeliti atribut Align sa vrijednošću Left oznaci Table prve od tablica, zbog čega će druga već stajati desno od prve i pritisnuti je. Upisivanjem Align=left i drugog u tag Table možemo staviti čak tri komada u jedan red.
Ali prva metoda nam ne dozvoljava da ih udaljimo jedno od drugog, jer se CSS tada još nije koristio. Stoga je najpogodniji način da se nekoliko tablica (ili bilo kojeg drugog elementa bloka) smjesti u jedan red bio kreiranje tablice s jednim redom (Tr) i brojem ćelija koje su nam potrebne (Td ili Th), srazmjerno broju bloka. elemente koje bismo trebali postaviti u jedan red.
Dakle, za najjednostavnije postavljanje nekoliko komada u nizu, morat ćete kreirati takozvane ugniježđene tablice, kada se drugi umetne u ćeliju jedne kao sadržaj:
Sada na HTML elementi koje se nalaze u ćelijama tabele koju smo kreirali, biće moguće primeniti sve gore opisane atribute, kako za Tr tagove tako i za Td ili Th tagove. Biće moguće pozicionirati sadržaj u ćelije, postaviti potrebna uvlake, ispuniti ga pozadinom itd.
One. sada bez koristeći CSS(što ranije nije postojalo) možemo poravnati sadržaj (naše blok elemente), a time što okvir znaka učinimo nevidljivim možemo pozicionirati sadržaj na web stranici. Na primjer, neće biti teško postaviti prikaz teksta u tri stupca ili šta god vam srce poželi.
Ako otvorite izvor neki stari sajt, ili još bolje, forum, onda ćete sa velikom verovatnoćom tamo videti mnogo znakova ugnežđenih unutar drugih, i tako sve dok ne dođe do potpune zabune.
Sa rasporedom tablica, takvi dizajni su se koristili svuda, a neka tadašnja rješenja, koja bi sada bila urađena za tren oka, zahtijevala su vrlo glomazne strukture tableta ugniježđenih jedna u drugu. Horizontalno i vertikalni meniji za web stranice, razbijanje pasusa s tekstovima u stupce i još mnogo toga
Tbody, Thead i Tfoot - kontejneri za redove u Html tabeli
No, vratimo se opet na naše ovce i pogledajmo još nekoliko elemenata koji su omogućili ranije (kada još nije bilo CSS-a) da odmah postavimo svojstva za veliki broj redova u oznaci Table. Sami Tr su nevidljivi kontejneri za Td ili Th, ali pored toga postoje tri druge vrste kontejnera koji zauzvrat služe kao kontejneri za Tr.
Koristeći ih, mož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 kraj). Prilikom kreiranja tabele, prvo se upisuje grupa redova koji se odnose na zaglavlje (ograđenih u Thead tagovima), zatim grupa redova koji se odnose na njen završetak (Tfoot), a tek onda grupa linija koja se odnosi na njen glavni sadržaj (Tbody ).
IN HTML tabela Odjeljak Thead može biti specificiran samo jednom, ili možda uopće ne postoji. Isto važi i za kontejner napravljen od Tfoot elemenata. Ali barem jedan dio Tbody mora biti prisutan.
Ali, na primjer, znakovi prikazani na ovoj stranici su savršeno prikazani, iako se nisam trudio dodati tagove za otvaranje i zatvaranje Tbody. Sve je vrlo jednostavno - sam pretraživač je dodao elemente Tbody prilikom raščlanjivanja koda, što možete provjeriti gledajući ovaj vrlo rezultujući kod:
Ali u praksi, ako su webmasteri pravili složene tabele, onda im je Tbody bio vrlo koristan. Recimo da imate tabelu sa nekoliko hiljada redova i da morate da podesite poravnanje u svim ćelijama na način različit od podrazumevanog. Bez korištenja Tbody-a, morali biste dodati odgovarajući atribut svim oznakama reda nekoliko hiljada puta.
Ali možete staviti sve ove hiljade redova u jedan Tbody kontejner i samo pisati u njega potreban atribut sa potrebnim poravnanjem. Ovo 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 je njihova upotreba i dalje relevantna čak i u naše vrijeme, kada postoje takvi moćan alat kao CSS.
Col — postavite širinu kolona tabele
Col i Colgroup sada imaju skoro isti uticaj, pa hajde da pričamo o njihovoj upotrebi koristeći Col element kao primer. Potrebno je pogodno postaviti širinu kolona i redova. Col ima dva glavna atributa, raspon i širinu, koji vam omogućavaju da postavite različite širine za sve kolone zatvorene u Col tagovima.
Span postavlja raspon (veličinu spremnika) specificirajući broj stupaca za koje će se primijeniti širina navedena u Width. Na primjer, ovako:
One. za prve dvije kolone tabele postavljam širinu na 50 piksela, za treću kolonu - 200 piksela, a za preostale dvije - po 100 piksela. Sve je prilično jednostavno i jasno, po mom mišljenju. Ali u stvari, širina kolona navedenih kroz Col elemente je samo vaša deklaracija, jer kada promijenite veličinu prozora pretraživača, širina kolona će se promijeniti.
Sretno ti! Vidimo se uskoro na stranicama blog stranice
Više videa možete pogledati ako odete na");">
Možda ste zainteresovani
Odaberite, Option, Textarea, Label, Fieldset, Legend - oznake HTML forme padajuće liste i tekstualno polje 
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex izlaz i drugi programi 
MailTo - šta je to i kako napraviti link u HTML-u za slanje e-pošte 
Html obrasci za sajt - oznake Forma, Input i Select, Option, Textarea, Label i drugi za kreiranje elemenata web obrasca
Svaka oznaka
Kako napraviti tabelu u html-u
Evo primjera, html koda:
Primjer tabele Kolona 1 Kolona 2
Obratite pažnju na ćeliju
Pogledajmo sada pobliže sve atribute oznaka
| ili linije | ||||||||||
| ... | ... |
...
2. Svojstvo background="URL" - postavlja pozadinska slika. Umjesto URL-a, treba napisati adresu slike u pozadini. Primjer
Konvertuje se u sledeće na stranici: U razmatranom primjeru, naš pozadinska slika nalazi se u folderu img (koji se nalazi u istom direktoriju kao i html stranica), a slika se zove fon.gif . Imajte na umu da smo u tag dodali style="color:white;" . Pošto je pozadina skoro crna, da bismo sprečili da se tekst stapa sa pozadinom, napravili smo tekst belim. 3. Svojstvo bgcolor="color" - postavlja boju pozadine tabele. Možete odabrati bilo koju boju iz cijele palete (pogledajte kodove i nazive html boja) 4. Svojstvo border="number" - postavlja debljinu ivice tabele. U prethodnim primjerima smo specificirali border="1" , što znači da je debljina ivice 1 piksel. 5. Svojstvo bordercolor="color" - postavlja boju ivice. Ako border="0" tada neće biti ivice i boja ivice neće imati značenje. 6. Svojstvo cellpadding="number" - 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 kolona. Ako ga ne postavite, pretraživač će sam odrediti broj kolona. Jedina razlika je u tome što će specificiranje ovog parametra najvjerovatnije ubrzati učitavanje tabele. 9. Svojstvo frame="parameter" - kako prikazati ivice oko stola. Može uzeti sljedeće vrijednosti:
10. Svojstvo height="number" - postavlja visinu tabele: u pikselima ili u procentima. 11. Pravila svojstva="parametar" - gdje prikazati granice između ćelija. Može uzeti sljedeće vrijednosti:
|
