Html colspan atribut td oznake. Korištenje okomito spojenih ćelija

Da bismo razumjeli koliko je važno slijediti točno ovaj redoslijed pisanja html koda tablica, razmotrimo složeniju opciju koja će već zahtijevati malo prostorne mašte i logike. Prijeđimo na sljedeći stol.

Pozdrav, dragi čitatelji bloga. Predstavljam vam još jedan članak koji će biti posvećen tome što je tablica u HTML-u, koje se oznake koriste za njezino stvaranje (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), kako postaviti pozadinu i granice za to, ali i mnogo više.

Unatoč činjenici da se tablični izgled web mjesta () na Html () jeziku postupno zamjenjuje blokovskim, još uvijek morate znati glavne oznake i mogućnosti postavljanja tablica. Na primjer, motor još uvijek koristi zastarjeli izgled, a ako želite nešto promijeniti u izgledu njegovih stranica, onda će vam ovo znanje pomoći.

Čak i najjednostavnije umetanje koda brojača pogodaka može od vas zahtijevati razumijevanje principa izrade tablica u html-u. Dopustite mi da vas podsjetim da smo već uspjeli razmotriti, kao i.

Tablice u Html - Table, Tr, Th, Td elementi

Sada je tablični izgled izblijedio u pozadinu s dolaskom CSS-a, ali unatoč tome, stari dobri tablet i dalje je često najprikladniji način za predstavljanje informacija, a još uvijek morate znati njegove glavne oznake.

Ranije, čak i prije uvođenja CSS-a, webmasteri uopće nisu mogli bez njih, jer se na njima temeljio cijeli izgled web stranica. Korištene su ne samo osnovne oznake Table, Tr, Th i Td, već i cijeli bogati asortiman pomoćnih elemenata (Col, Tbody, Caption, Rowspan, Colspan itd.). Na Internetu još uvijek možete pronaći stranice i forume izrađene na temelju tabelarnog izgleda, što vam može poslužiti kao dodatni poticaj da naučite osnove njihove konstrukcije.

Tablice u Html jeziku su poseban element, jer je element Tablica sam po sebi blok element, ali istovremeno ne zauzima sav prostor koji mu je na raspolaganju po širini, kao što to čine ostali blok elementi. Po širini zauzima samo onoliko prostora koliko je potrebno za smještaj sadržaja – ni više ni manje.

Iako će se u ovom slučaju oznaka Table u svim ostalim aspektima ponašati točno kao blok element. Na primjer, oznake koje slijede jedna za drugom u kodu bit će na web stranici položiti jedno na drugo, čak i ako bi njihova 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.

Oni se formiraju prema sljedećem principu. Cijela tablica uokvirena je otvarajućim i zatvarajućim oznakama tablice, unutar kojih se pomoću Tr kreiraju njeni redovi, na primjer ovako:

Ali već unutar Tr, stanice se stvaraju pomoću Td. Također se mogu stvoriti pomoću Th, a razlika između ovih ćelija i onih stvorenih pomoću Td elemenata bit će samo vizualna. Funkcionalno, elementi Td i Th rade na isti način.

Ali sadržaj (sadržaj) ćelije stvorene oznakom Td bit će poravnat lijevo, a sadržaj ćelije stvorene pomoću Th bit će središnje poravnat i također podebljan u korištenom fontu. Sami Th elementi uvedeni su upravo da bi se napravile zaglavlja stupaca i redaka za tablice.

Sadržaj se nalazi unutar Td ili Th stanica. Sve što vidite na web stranici unutar tablice nalazit će se točno unutar ćelija koje tvore početne i završne oznake Td ili Th:

Ali samo po sebi, stvaranje ploča se odvija red po red - otvorite Tr, a zatim zatvorite Tr. Koliko takvih parova Tr elemenata imate, toliko ćete redaka dobiti. Koliko će stupaca biti?

Točno onoliko koliko ih stvorite u ćelijama svakog retka (Tr) (Td ili Th). Ako želite napraviti jednostavnu i simetričnu ploču (pogledajte gornju sliku), tada trebate napraviti jednak broj ćelija (Td ili Th) u svakoj liniji.

Dakle, tablice u Html-u formiraju se red po red - Tr je odgovoran za formiranje redaka, a Td ili Th - za formiranje stupaca. Nevjerojatno, apsolutno bilo koji sadržaj može se umetnuti unutar Td ili Th - tekst, umetnuti ili blok elementi (, slike s, naslovi, odlomci), itd.

Da. ispada da u Html kodu ne može postojati ploča koja bi se sastojala od manje od tri elementa - Table, Tr, Td (ili Th).

Stol - glavni element stola

Počnimo s oznakom Table, odnosno atributima koje ima:

Zapravo, ovo nisu svi atributi, već samo oni najrelevantniji i trenutno korišteni. Najdetaljnije informacije o svim mogućim atributima oznake Table, kao i bilo kojeg drugog elementa.

Jer tablica je blok element koji nema tendenciju da zauzme sav raspoloživi prostor širine, što znači da možemo primijeniti vodoravno poravnanje na oznaku tablice pomoću atributa Uskladiti.

Ali ovdje nije sve tako jednostavno, jer korištenje vrijednosti lijeve i desne strane u Alignu neće poravnati našu ploču lijevo ili desno, već omotati tekst oko nje, u potpunoj analogiji s onim kako smo je vidjeli s . Pa, kada koristite središnju vrijednost za poravnanje, jednostavno će se poravnati prema sredini bez ikakvog prelamanja.

Pomoću atributa Width možete postaviti širinu tablice, dok možete koristiti i apsolutne vrijednosti u pikselima i relativne vrijednosti u postocima (100% će odgovarati cjelokupnom dostupnom prostoru u širini).

Krenuti dalje. podstava za ćelije omogućuje postavljanje uvlake sadržaja u ćelijama (Td ili Th) od njezinih rubova (na sve četiri strane istovremeno), a Cellspacing omogućuje postavljanje udaljenosti između susjednih ćelija tablice u pikselima (zadana vrijednost je dva piksela) . Mislim da je ideja jasna, ali bit će jasnije pokazati to 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ć Pozadine (koja se, usput, koristi samo u oznaci Tijelo i elementima - Tablica, Tr, Th ili Td), možete odabrati bilo koju sliku iz datoteke kao pozadinu, put kojoj će kao vrijednost biti naveden ovaj atribut.

Ova će slika, poput pločice, prekriti cijelu web stranicu (u slučaju oznake Body) ili cijelu tablicu (u slučaju Table), na primjer, ovako:

Kada koristite atribut Bgcolor u tablici, morat ćete kao njegovu vrijednost navesti boju kojom želite ispuniti svoju tablicu. pogledajte navedeni link.

Krenuti dalje. Zatim 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 imati opciju postaviti širinu ove granice u pikselima. Prema zadanim postavkama, nijedan okvir nije nacrtan (border=0).

Ali imajte na umu da je u Html-u okvir tablice reljefni. Imat će svijetle i tamne bočne boje koje izgledaju kao od svjetlosti koja pada iz gornjeg kuta zaslona. S tim u vezi, treba imati na umu da u Borderu ne postavljate širinu cijelog okvira. Ovoj će se debljini dodati svijetle i tamne strane. Općenito, malo je zbunjujuće, ali treba pogledati na primjeru.

S elementom tablice pretpostavit ćemo da smo završili i da je vrijeme da prijeđemo na sljedeći. Posebnost Tr-a je u tome što je on isključivo servis i nije vidljiv na web stranici. U svojoj srži, Tr je nevidljivi spremnik za Td ili Th, koji će se nalaziti u njemu.

Tr - element reda tablice u Html-u

Uz pomoć Tr taga jednostavno sve ćelije koje su u njemu zatvorene (Td ili Th) stavimo 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 sadržane u ovom spremniku. Trenutačno najčešće korišteni Tr atributi prikazani su na slici:

Align radi u njemu 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 ili prema sredini.

Valign specificira okomito poravnanje sadržaja u svim ćelijama (Td ili Th) određenog retka (Tr). Vrijednosti Top, Middle i Bottom postavljaju poravnanje na vrh, sredinu odnosno dno. Prema zadanim postavkama, poravnanje se koristi u sredini visine - Sredina.

Vrijednost Baseline postavlja poravnanje teksta u Td ili Th danog retka s osnovnom linijom fontova. Ovo može biti zgodno kada imate tekst u različitim ćelijama s različitim veličinama fonta, a osnovno poravnanje u Valignu učinit će takvu tablicu korisnijom za čitatelje (po mom mišljenju):

Samo će se prvi redovi sadržaja u ćelijama (Td ili Th) poravnati s osnovnom linijom fonta, a svi ostali redovi sadržaja bit će postavljeni kako hoće.

Također možete koristiti atribut Bgcolor u oznaci Tr, ispunjavajući ove retke bojom pozadine koja vam je potrebna. Da. sve ćelije u ovom retku ispunjene su bojom koju ste odabrali:

Kao što vidite, Td ili Th unutar ovog Tr elementa je ispunjen bojom pozadine, jer sama linija nije vidljiva na ploči.

Td ili Th - elementi ćelije tablice u Html-u

Pa, prijeđimo sada na najvažniji element - ćeliju, odnosno atribute oznaka Td i Th, koji su i danas u upotrebi:

Align i Valign u Td ili Th oznakama govore pregledniku kako točno poravnati sadržaj po širini i visini, a ne po cijelom retku, kao što smo nedavno smatrali. Štoviše, atributi određene ćelije imat će prioritet nad sličnim atributima retka.

Oni. u cijelom retku sadržaj ćelija može biti desno poravnat, ali u nekom zasebnom retku možete postaviti drugačije poravnanje i ono će imati prednost (prekid) nad poravnanjem koje je postavljeno u oznaci Tr.

Widht i Height omogućuju postavljanje visine i širine ćelije, u pikselima i kao postotak (u širini). Bgcolor i Background u Html Td ili Th elementima omogućuju postavljanje zasebne pozadine (u obliku boje ili slike) za svaku specifičnu ćeliju:

Nowrap u Td ili Th sprječava prelamanje sadržaja u ćeliji u novi redak, osim ako tekst ovog sadržaja ne sadrži . To jest, u ovom slučaju, razmaci se neće koristiti za automatsko prelamanje teksta. Vjerojatno 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 retka, a Colspan je raspon stupca. Služe, odnosno, za kombiniranje ćelija u stupac ili u red.

Ako želite kombinirati više ćelija u jednom stupcu tablice, tada ćete morati koristiti Rowspan, jer. obuhvaćate više redaka u jednoj ćeliji. A ako želite kombinirati nekoliko ćelija u nizu, tada ćete morati koristiti Colspan, jer da biste obuhvatili jednu ćeliju potrebno vam je više stupaca.

Colspan i Rowspan zadani su na jedan, tj. svaka ćelija pripada jednom stupcu i jednom retku. Čim ste spojili ćelije, one se već počinju odnositi na nekoliko stupaca ili na nekoliko redaka (ili oboje u isto vrijeme).

Caption - natpis tablice

Postoji još jedan dodatni element pod nazivom "Html table header" i formiran je pomoću Caption tagova. Ovaj se element ne koristi više od jednom (ili se ne koristi uopće) i postavlja se odmah nakon uvodne oznake Table. Unutar natpisa može se smjestiti samo ugrađeni sadržaj iu njemu ne bi trebalo biti blok elemenata.

Položaj natpisa (Caption) može se postaviti pomoću atributa Align. Vrijednosti Top i Bottom postavit će položaj naslova, odnosno iznad i ispod tablice. Vrijednosti Lijevo i Desno trenutno se ne koriste jer rade različito u različitim preglednicima. Najbolje ih je zaboraviti. Oni. općenito, naslov (Caption) može biti samo ispod ploče ili iznad nje (ova se vrijednost koristi prema zadanim postavkama):

U općem slučaju možemo dati takav blok dijagram konstrukcije:

Pogledajmo sada primjer kako možete stvoriti tablicu s ćelijama različitih veličina, od kojih će neke obuhvaćati više stupaca ili redaka. Kao što smo vam već rekli malo ranije, oni se kreiraju liniju po liniju u HTML-u. Oslonimo se na izgled prikazan na gornjoj slici.

Za početak napišemo početni tag Table i odmah iza njega otvorimo tag prvog reda Tr. Prvi redak naše buduće tablice sastoji se od jedne ćelije koja se proteže kroz dva stupca odjednom, tako da će se atribut Colspan=2 morati dodati oznaci ove ćelije:

Zatim zatvaramo tag prvog reda (Tr) i otvaramo tag sljedećeg, koji će već imati dvije ćelije. Prva ćelija drugog reda je neugledna i sastojat će se od uobičajenih početnih ili završnih oznaka Td ili Th, između kojih će biti zatvoren njen sadržaj.

Ali druga ćelija drugog retka je izvanredna, jer se proteže kroz dva retka odjednom, i stoga ćemo morati dodati atribut Rowspan=2 njenoj oznaci:

Pa, ostaje nam da opišemo samo treću liniju. Prva ćelija ove linije opet ne predstavlja ništa posebno, ali drugu smo već opisali u drugoj liniji, što znači da je više neće biti ovdje. Svaka ćelija se može opisati samo jednom. Nadam se da je ovo razumljivo. Da. Treći red tablice će izgledati ovako:

Pa, sada kombinirajmo sve ovo u jedan kod i vidimo što će se dogoditi:

Zapravo, ispalo je onako kako smo planirali. Jasno je da ovdje nema ništa komplicirano - dovoljno je razumjeti logiku rada atributa Colspan i Rowspan.

Tablični (zastarjeli) izgled

Razgovarajmo sada o takvom konceptu kao što je tabularni izgled 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 pri postavljanju web mjesta - postavljanje blok elemenata u jedan red u Html kodu.

Kao što već znate, elementi bloka, kada se postave jedan za drugim u Html kodu, bit će postavljeni jedan ispod drugog na web stranici. Usput, isti znakovi su također blok elementi i možete koristiti dvije metode da ih stavite u jedan red.

Prvi od njih sastoji se u propisivanju prve tablice atributa Align s vrijednošću oznake Left to the Table, uslijed čega će druga već stajati desno od prve i priljubiti se uz nju. Upisivanjem Align=left i drugog u oznaku Table, možemo staviti čak tri komada u jedan red.

Ali prva metoda ne dopušta nam da ih razdvojimo, jer se CSS tada još nije koristio. Stoga je najprikladniji način za postavljanje nekoliko tablica (ili bilo kojih drugih elemenata bloka) u jedan red bio stvaranje tablice s jednim retkom (Tr) i brojem ćelija koje nam trebaju (Td ili Th), razmjerno broju blokova elemente koje trebamo postaviti u jedan red.

Dakle, za najjednostavnije postavljanje nekoliko dijelova u nizu, morat ćete stvoriti takozvane ugniježđene tablice, kada se drugi umetne kao sadržaj u jednu ćeliju:

Sada će biti moguće primijeniti sve gore opisane atribute na Html elemente koji se nalaze u ćelijama tablice koju smo izradili, i za Tr oznake i za Td ili Th oznake. Bit će moguće pozicionirati sadržaj u ćelije, postaviti potrebne uvlake, ispuniti ga pozadinom itd.

Oni. sada bez upotrebe CSS-a (koji prije nije postojao) možemo poravnati sadržaj (naše elemente bloka), a nevidljivim okvirom natpisa možemo pozicionirati sadržaj na web stranici. Na primjer, neće biti teško postaviti prikaz teksta u tri stupca ili, općenito, što vam srce poželi.

Ako otvorite izvorni kod neke stare stranice, ili još bolje foruma, tada ćete s velikim stupnjem vjerojatnosti vidjeti puno znakova ugniježđenih u drugima i tako dalje do potpune zabune.

U tabelarnom rasporedu takve su se konstrukcije koristile posvuda, a neke odluke tog vremena, koje bi sada bile izvedene u tren oka, zahtijevale su vrlo glomazne strukture od ploča ugniježđenih jedna u drugu. Tablica je korištena za izradu vodoravnih i okomitih izbornika za web stranice, dijeljenje odlomaka s tekstom u stupce i još mnogo toga

Tbody, Thead i Tfoot - spremnici za retke u Html tablici

No, vratimo se opet našim ovcama i pogledajmo još nekoliko elemenata koji su ranije (kada još nije bilo CSS-a) omogućavali postavljanje svojstava za veliki broj redaka odjednom u oznaci Table. Sami Trs su nevidljivi spremnici za Td ili Th, ali postoje i tri druge vrste spremnika, koji zauzvrat služe kao spremnici za Tr.

Pomoću njih ćemo moći postaviti svojstva za veliku grupu linija odjednom, na primjer, ispuniti ih pozadinom, postaviti željeno poravnanje itd. Govorim o elementima kao što su Thead (za zaglavlje), Tbody (za sadržaj) i Tfoot (za kraj). Prilikom izrade tablice prvo se ispisuje grupa redaka koja se odnosi na zaglavlje (okruženo u Thead tagovima), zatim grupa redaka koja se odnosi na njen kraj (Tfoot) i tek onda grupa linija koja se odnosi na njen glavni sadržaj (Tbody). .

U Html tablici odjeljak Thead može se pojaviti 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, znakovi na ovoj stranici su savršeno prikazani, iako se nisam potrudio staviti početne i završne Tbody oznake. Sve je vrlo jednostavno - prilikom raščlanjivanja koda, sam preglednik je dodao elemente Tbody, što se može vidjeti gledanjem ovog vrlo rezultirajućeg koda:

Ali u praksi, ako su webmasteri radili složene tablice, onda im je Tbody bio vrlo koristan. Recimo da imate tablicu s nekoliko tisuća redaka i trebate prilagoditi poravnanje u svim ćelijama na način drugačiji od zadanog. Bez upotrebe Tbodya, morali biste dodati odgovarajući atribut nekoliko tisuća puta svim oznakama niza.

No, na kraju krajeva, moguće je sve te tisuće redaka zatvoriti u jedan spremnik Tbody i samo u njemu registrirati potrebni atribut s potrebnim poravnanjem. Ovo može uvelike rasteretiti HTML kod od nepotrebnih ponavljanja. Općenito, u jednostavnim tablicama elementi Tbody, Thead i Tfoot mogu se zanemariti, ali u složenim tablicama njihova je upotreba još uvijek relevantna čak iu naše vrijeme, kada postoji tako moćan alat kao što je CSS.

Col - postavite širinu stupaca tablice

Col i Colgroup sada imaju gotovo isti učinak, pa razgovarajmo o njihovoj upotrebi koristeći element Col kao primjer. Potrebno je za zgodno postavljanje širine stupaca i redaka. Col ima dva glavna atributa, Span i Width, koji vam omogućuju postavljanje različitih širina za sve stupce unutar oznaka Col.

Raspon postavlja raspon (veličinu spremnika) određivanjem broja stupaca u njemu za koje će se primijeniti širina navedena u Širina. Na primjer, ovako:

Oni. za prva dva stupca tablice postavio sam širinu na 50 piksela, za treći stupac - 200 piksela, a za preostala dva - po 100 piksela. Sve je vrlo jednostavno i jasno, po mom mišljenju. No zapravo, širina stupaca postavljena kroz elemente Col samo je vaša deklaracija, jer kada se promijeni veličina prozora preglednika, širina stupaca će se promijeniti.

Sretno ti! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na

Možda će vas zanimati

Select, Option, Textarea, Label, Fieldset, Legend - Html oznake obrasca padajućeg popisa i tekstualnog polja
Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex rezultati i drugi programi
MailTo - što je to i kako napraviti link za e-poštu u HTML-u
Html forme za web stranicu - oznake Form, Input and Select, Option, Textarea, Label i druge za izradu elemenata web forme

Najpopularniji povezani članci

AirSelfie Mini leteća selfie kamera Leteća selfie kamera

Kako ga sami sastaviti?

Teslina zavojnica i demonstracija nevjerojatnih svojstava elektromagnetskog polja Tesline zavojnice