html colspan atribut oznake td. Korištenje vertikalno spojenih ćelija

Da biste razumjeli koliko je važno slijediti upravo ovaj redoslijed pisanja html koda tabela, razmotrite složeniju opciju, koja će već zahtijevati malo prostorne mašte i logike. Pređimo na sljedeći sto.

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, i još mnogo toga.

Unatoč činjenici da je izgled tablice web-mjesta () u jeziku Html () sistematski zamijenjen rasporedom blokova, još uvijek morate znati glavne oznake i mogućnost prilagođavanja tabela. Na primjer, motor još uvijek koristi zastarjeli izgled, a ako želite napraviti bilo kakve promjene u izgledu njegovih stranica, onda će vam ovo znanje pomoći.

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

Tabele u HTML-u - Elementi Table, Tr, Th, Td

Sada je izgled tabele izbledeo u pozadinu pojavom CSS-a, ali ipak, najpogodniji način predstavljanja informacija je i dalje dobra stara tabela i još uvek morate da znate njene 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. Koristili smo ne samo osnovne tagove Table, Tr, Th i Td, već i čitav bogat asortiman pomoćnih elemenata (Col, Tbody, Caption, Rowspan, Colspan, itd.). Još uvijek možete pronaći na Internetu stranice i forume kreirane na osnovu rasporeda tablica, što vam može poslužiti kao dodatni poticaj da naučite osnove njihove konstrukcije.

Tabele u HTML jeziku su poseban element, jer je u suštini element Table blok element, ali u isto vrijeme ne zauzima sav raspoloživi prostor po š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 baš 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 im veličina dozvoljava da budu 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 otvarajućim i zatvarajućim oznakama tabele, unutar kojih se pomoću Tr kreiraju njeni redovi, na primer, ovako:

Ali već 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 čisto vizualna. Funkcionalno, Td i Th elementi rade na isti način.

Ali sadržaj (sadržaj) ćelije kreirane sa Td oznakom će biti poravnat levo, a sadržaj ćelije kreirane sa Th će biti centriran i takođe podebljan u korišćenom fontu. Sami Th elementi su uvedeni upravo da bi se obezbijedila naslova kolona i redova za tabele.

A sadržaj je 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 po sebi, stvaranje ploča se dešava red po red - otvori Tr, a zatim zatvori Tr. Koliko takvih parova Tr elemenata imate, koliko redova dobijete. Koliko će kolona biti?

Tačno onoliko koliko kreirate u svakom redu (Tr) ćelija (Td ili Th). Ako želite da napravite jednostavnu i simetričnu ploču (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 uz pomoć, naslove, pasuse) itd.

To. ispostavilo se da ne može postojati tabela u HTML kodu koja bi se sastojala od manje od tri elementa - Table, Tr, Td (ili Th).

Sto - glavni element stola

Počnimo gledajući oznaku Table, odnosno atribute koje ima:

Zapravo, to nisu svi atributi, već samo najrelevantniji i trenutno korišteni. Najdetaljnije informacije o svim mogućim atributima oznake Table, kao i bilo kojem drugom elementu.

Jer tabela je blok element koji ne nastoji zauzeti sav raspoloživi prostor u širini, što znači da možemo primijeniti horizontalno poravnanje na tablicu tag koristeći atribut Poravnajte.

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 lijevoj ili desnoj ivici, već da omotamo tekst oko nje, u potpunoj analogiji s onim kako smo vidjeli to u. Pa, ako koristite vrijednost Center za Align, ona će biti samo centrirana bez ikakvih omotača.

Koristeći atribut Width, 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 (zadano je dva piksela) . Mislim da je ideja jasna, ali ipak će biti jasnije pokazati to 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, 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 biti specificiran kao vrijednost ovaj atribut.

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

Kada koristite atribut Bgcolor u tabeli, moraćete da navedete boju kojom želite da ispunite svoju tabelu kao njenu vrednost. pogledajte navedeni link.

Nastavi. 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. Podrazumevano, granica nije iscrtana (border = 0).

Ali treba imati na umu da je u Html-u okvir tabele utisnut. Imat će boje svijetle i tamne strane, koje izgledaju kao od svjetlosti koja pada iz gornjeg ugla ekrana. S tim u vezi, treba imati na umu da u Borderu ne postavljate širinu cijele granice. Svijetle i tamne strane će se dodati ovoj debljini. Generalno, malo je zbunjujuće, ali to treba pogledati na primjeru.

Sa elementom Table, pretpostavićemo da smo gotovi i da je vreme da pređemo na sledeć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 tabele u HTML-u

Koristeći Tr tag, jednostavno stavljamo sve ćelije koje su u njemu 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. Trenutno najčešće korišteni atributi Tr prikazani su na slici:

Poravnanje u njemu 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 u centar.

Valign postavlja vertikalno poravnanje sadržaja u svim ćelijama (Td ili Th) datog reda (Tr). Vrijednosti Top, Middle i Bottom postavljaju poravnanje prema vrhu, sredini i dnu, respektivno. Podrazumevano poravnanje je u sredini visine - Middle.

Vrijednost Baseline specificira poravnanje teksta u Td ili Th date linije sa osnovnom linijom fontova. Ovo može biti zgodno kada vaš tekst u različitim ćelijama ima različite veličine fonta, a osnovno poravnanje u Valignu učinit će takvu tablicu upotrebljivijom za čitaoce (po mom mišljenju):

Samo će prvi redovi sadržaja u ćelijama (Td ili Th) biti poravnati sa osnovnom linijom fontova, a svi ostali redovi sadržaja će biti raspoređeni kako jesu.

Također možete koristiti atribut Bgcolor na Tr tag-u, ispunjavajući ove redove bojom pozadine koju želite. 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 ćelija tabele u HTML-u

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

Oznake Align i Valign u Td ili Th govore pretraživaču kako tačno sadržaj treba da bude poravnat po širini i visini, a ne po celoj liniji, kao što smo nedavno razmotrili. Štaviše, atributi određene ćelije će imati prioritet nad sličnim atributima reda.

One. u cijelom redu sadržaj ćelija može biti desno poravnat, ali u nekom posebnom redu možete postaviti drugačije poravnanje i ono će imati prednost (prekid) u odnosu na poravnanje koje je postavljeno u Tr tag-u.

Widht i Height vam omogućavaju da postavite visinu i širinu ćelije, kako u pikselima, tako iu procentima (u širini). Bgcolor i Background in Html Td ili Th elementi vam omogućavaju 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 novi red, osim ako se ovaj sadržaj ne pronađe u tekstu. To jest, u ovom slučaju, razmaci se neće koristiti za automatsko prelamanje teksta. Vjerovatno 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 kombinovanje ćelija u koloni ili u nizu.

Ako želite kombinirati nekoliko ćelija u jednoj koloni tablice, tada ćete morati koristiti Rowspan, jer protežete više redova jednom ćelijom. A ako želite kombinirati nekoliko ćelija u nizu, onda ćete morati koristiti Colspan, jer da biste obuhvatili jednu ćeliju, potrebno vam je više kolona.

Colspan i Rowspan su po defaultu postavljeni na jedan, tj. svaka ćelija se odnosi na jednu kolonu i jedan red. Čim spojite ćelije, one se već počinju odnositi na nekoliko kolona ili nekoliko redova (ili oboje u isto vrijeme).

Caption - naslov tabele

Postoji još jedan dodatni element koji se zove "Html zaglavlje 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 u njemu 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, respektivno, iznad i ispod tabele. Vrijednosti Lijevo i Desno se sada ne koriste, jer rade potpuno drugačije u različitim pretraživačima. Najbolje bi bilo zaboraviti na njih. One. Uglavnom, natpis se može naći samo ispod ili iznad njega (ova vrijednost se koristi po defaultu):

Općenito, možete dati sljedeći blok dijagram konstrukcije:

Uzmimo sada primjer kako možete kreirati tabelu sa ćelijama različite veličine, od kojih će neke obuhvatiti više kolona ili redova. Kao što smo rekli s vama malo ranije, oni se kreiraju red po red 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 red naše buduće tabele sastoji se od jedne ćelije koja se prostire na dve kolone odjednom, tako da će atribut Colspan = 2 morati da se doda 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 sastojaće se od uobičajenih oznaka za otkidanje ili zatvaranje Td ili Th, između kojih će biti zatvoren njen sadržaj.

Ali druga ćelija drugog reda je izvanredna, jer se proteže u dva reda odjednom, i stoga ćemo morati dodati atribut Rowspan = 2 u njenu oznaku:

Pa, ostaje nam samo da opišemo 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 komplicirano - dovoljno je razumjeti logiku rada Colspan i Rowspan atributa.

Tabelarni (zastarjeli) izgled

Hajde sada da razgovaramo o takvom konceptu kao što je izgled tabele i zašto su upravo oni postali glavni alat u jeziku za označavanje hiperteksta u odsustvu CSS-a (sada, naravno, svuda). Stvar je u tome što su samo tabele omogućile prilično jednostavno i fleksibilno rješavanje glavnog problema u izgledu stranice - postavljanje blok elemenata u jedan red u Html kodu.

Kao što već znate, blok elementi, kada se postavljaju jedan za drugim u Html kodu, biće postavljeni jedan ispod drugog i na web stranicu. Inače, isti znakovi su također blok elementi i možete koristiti dva načina da ih stavite u jedan red.

Prvi od njih se sastoji u propisivanju prve od tabela s atributom Align sa vrijednošću Left oznaci Table, zbog čega će druga već stajati desno od prve i priljubiti se uz nju. Registracijom Align = left i drugom u tag Table možemo staviti čak tri komada u jedan red.

Ali prvi način nam ne dozvoljava da ih udaljimo jedno od drugog, jer u to vrijeme CSS još nije bio korišten. Stoga je najpogodniji način da se nekoliko tabela (ili bilo kojeg drugog bloka) postavi u jedan red da se kreira tabela sa jednim redom (Tr) i brojem ćelija koje nam treba (Td ili Th), srazmerno broju bloka. elemente koje ćemo morati postaviti u jedan red.

Dakle, za najjednostavnije postavljanje nekoliko komada u nizu, morat ćete kreirati takozvane ugniježđene tablice, kada se druga ćelija umetne kao sadržaj u jednu ćeliju:

Sada se svi gore opisani atributi mogu primijeniti na Html elemente koji se nalaze u ćelijama tabele koju smo kreirali, kako za Tr tagove, tako i za Td ili Th tagove. Biće moguće pozicionirati sadržaj u ćelije, postaviti potrebna uvlake, ispuniti pozadinom itd.

One. sada je bez upotrebe CSS-a (koji ranije nije postojao) moguće poravnati sadržaj (naše blok elemente), a čineći okvir tabele nevidljivim, možemo pozicionirati sadržaj na web stranici. Na primjer, neće biti teško postaviti prikaz teksta u tri kolone ili, općenito, šta god vam srce poželi.

Ako otvorite izvorni kod nekog starog sajta, ili još bolje forum, onda ćete sa velikom verovatnoćom tamo videti mnogo tabela ugrađenih u druge, i tako sve do potpune zabune.

U tabelarnom rasporedu takvi dizajni su bili svuda korišćeni i neka tadašnja rešenja, koja bi sada bila urađena za tren oka, zahtevala su veoma glomazne dizajne od ploča ugnežđenih jedna u drugu. Tablica je korištena za kreiranje horizontalnih i vertikalnih menija za web stranice, razbijanje pasusa sa tekstovima u kolone i još mnogo toga.

Tbody, Thead i Tfoot - kontejneri za redove u Html tabeli

No, vratimo se ponovo na naše ramove i razmotrimo još nekoliko elemenata koji su ranije (kada još nije bilo CSS-a) omogućili postavljanje svojstava odjednom za veliki broj redova u tablici. Tr su sami nevidljivi kontejneri za Td ili Th, ali postoje tri druge vrste kontejnera koji zauzvrat služe kao kontejneri za Tr.

Uz pomoć njih moći ćemo odjednom postaviti svojstva za veliku grupu linija, na primjer, ispuniti ih pozadinom, dodijeliti željeno poravnanje itd. Govorim o elementima kao što su Thead (za zaglavlje), Tbody (za sadržaj) i Tfoot (za njegov kraj). Prilikom kreiranja tabele, prvo se ispisuje grupa linija koje se odnose na zaglavlje (ugrađene u Thead tagove), zatim grupa linija koje se odnose na njen kraj (Tfoot), a tek onda grupa linija koje se odnose na njen glavni sadržaj (Tbody ).

U Html tabeli, odeljak Thead može biti registrovan samo jednom, ili možda uopšte ne postoji. Isto važi i za kontejner Tfoot elemenata. Ali barem jedan dio Tbody mora biti prisutan.

Ali, na primjer, tabele na ovoj stranici su savršeno prikazane, iako se nisam trudio da zapišem tagove za otvaranje i zatvaranje Tbody. Sve je vrlo jednostavno - prilikom raščlanjivanja koda, sam pretraživač je dodao elemente Tbody, što se može vidjeti gledajući ovaj vrlo rezultujući kod:

Ali u praksi, ako su raniji webmasteri pravili složene tabele, onda im je Tbody jako dobro došao. Recimo da imate tabelu sa nekoliko hiljada redova i morate da podesite poravnanje u svim ćelijama na drugačiji način od podrazumevanog. Bez upotrebe Tbody-a, morali biste dodati odgovarajući atribut nekoliko hiljada puta svim oznakama reda.

Ali možete, na kraju krajeva, sve ove hiljade redova staviti u jedan Tbody kontejner i samo u njega napisati traženi atribut sa potrebnim poravnanjem. Ovo može uvelike osloboditi HTML kod od nepotrebnih ponavljanja. Generalno, elementi Tbody, Thead i Tfoot mogu se zanemariti u jednostavnim tabelama, ali njihova upotreba je i dalje relevantna u složenim tabelama čak i danas, kada postoji tako moćan alat kao što je 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čitu širinu 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. Postavio sam širinu na 50 piksela za prve dvije kolone tabele, 200 piksela za treću kolonu i 100 piksela za preostale dvije. Sve je prilično jednostavno i jasno, po mom mišljenju. Ali u stvari, širine kolona, ​​specificirane kroz Col elemente, su samo vaša deklaracija, jer kada se promijeni veličina prozora pretraživača, širine kolona će se promijeniti.

Sretno ti! Vidimo se uskoro na stranicama blog stranice

možete pogledati više video zapisa ako odete na

Možda ste zainteresovani

Odaberite, Option, Textarea, Label, Fieldset, Legend - Html oznake padajućeg izbornika i obrasca za tekst
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex 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 obrazaca

Top srodni članci

Različiti pokreti miša okomito i horizontalno

Kako komprimirati teksture u Fallout 4

Ostaje samo razumjeti potreban nivo