Poravnanje ćelija HTML tablice. Svi načini vertikalnog poravnanja u CSS-u

Da biste postavili poravnanje tablice u sredini web stranice ili duž jednog od njenih rubova, parametar align oznake

. Rezultat će biti uočljiv samo ako širina stola ne zauzima cijelu raspoloživu površinu, drugim riječima, manje od 100%.

Parametar align može imati sljedeće vrijednosti: lijevo, desno, centar.

lijevo — poravnanje stola na lijevoj strani. Ovaj parametar se koristi po defaultu, tako da se obično ne specificira.
desno - poravnanje tabele na desnoj strani web stranice.
centar - poravnajte tabelu sa sredinom web stranice.

Primjer 1 pokazuje kako postaviti poravnanje tablice na centar.

Primjer 1: Poravnavanje tablice po sredini

Sadržaj tabele

Rezultat ovog primjera prikazan je na sl. jedan.

Rice. 1. Poravnavanje stola prema sredini

Zapravo, align ne samo da postavlja poravnanje, već i čini da sadržaj teče oko stola s drugih strana, slično ponašanju oznake . Ali pošto

nema parametar hspace koji postavlja horizontalnu marginu, tada se ova uloga mora prebaciti na stilove, posebno na atribut margine. Primjer 2 pokazuje desno poravnanje tabele i tok sadržaja oko nje.

Primjer 2: Poravnavanje tablice na desnu stranu

Sadržaj tabele

Sadržaj pakovanja stola...

Rezultat ovog primjera prikazan je na sl. 2.

Rice. 2. Poravnajte sto na desnoj strani

Trenutni primjer kreira tabelu sa sivom pozadinom i desnim poravnanjem. Za razvoj uvlaka iz tabele u sadržaj, koristi se parametar margine sa vrijednošću od 10 piksela.

Kako biste spriječili da se tablica omota kada je poravnata duž jedne od ivica, najlakši način je da dodate oznaku nakon tablice
sa jasnim: oba stila set. Ova komanda onemogućava prelamanje i sa lijeve i desne ivice (primjer 3).

Primjer 3: Odmotavanje tablice

Sadržaj tabele

sadržaj...

Poravnavanje tabele sa središtem se vrši na isti način, preko parametra oznake align="center".

, ali u ovom slučaju nema prelamanja i sadržaj nakon tabele uvijek počinje u novom redu.

Posjetiocu bi trebalo biti lako da pronađe informacije koje su mu potrebne na stranici. Za to, kao i za izražavanje nekog izraza, koriste se razne HTML oznake. Ovaj članak će raspravljati o nijansama rada s tablicama, posebno o njihovom poravnanju.

Osnovne suptilnosti

Prije svega, treba napomenuti da ovaj grafički oblik prezentacije podataka omogućava strukturiranje informacija, što uvelike olakšava njihovu asimilaciju. Gotovo svaki sadržaj može biti unutar ćelija tabele: od teksta do videa. Važno je uzeti u obzir ne samo veličinu, već i njegovu lokaciju.

Kako napraviti sam sto u centru

Najčešće je potrebno rasporediti tabelu u sredinu stranice, iako je u početku pritisnuta na lijevu stranu stranice. Da biste ga poravnali sa središtem, morate postaviti njegovu marginu na auto.

...

Ovo uzrokuje da se dopuna tabele automatski izračuna. Nakon toga, tabela će biti centrirana na stranici.

Centralno poravnanje u ćelijama

Jednako često, trebate poravnati podatke sa središtem ćelije. U ovom slučaju postoje tri načina: horizontalni, vertikalni i apsolutni. Iz njihovog imena je jasno na kojoj će osi doći do centriranja. U svakom slučaju, oznaka se koristi , koji je odgovoran za određenu ćeliju u redu. Zatim morate postaviti njegove atribute valign (vertikalni) i/ili align (horizontalni) na "center", ovisno o vašem zadatku:

Tekst u sredini ćelije

Ako želite da ovo formatiranje bude standardno za cijelu stranicu ili stranicu (kako ne biste prepisivali svaku tabelu), onda biste trebali koristiti CSS stilove. Da biste to učinili, dodajte sljedeći kod unutar oznake :

Koristeći ovu metodu, također možete postaviti poravnanje za određenu ćeliju, kao i za stupac, red ili cijelu tablicu u cjelini. Kao što vidite, bilo koja od metoda je vrlo jednostavna.

Mislim da su se mnogi od vas koji su radili na rasporedu naišli na potrebu da se elementi poravnaju okomito i znaju koje poteškoće nastaju kada se element poravna sa središtem.

Da, za vertikalno poravnanje u CSS-u postoji posebno svojstvo vertical-align s mnogo vrijednosti. Međutim, u praksi to ne funkcionira kako se očekivalo. Pokušajmo ovo shvatiti.

Uporedimo sljedeće pristupe. Usklađenost sa:

• stolovi,
• udubljenje,
• visina linije ,
• istezanje,
• negativna marža,
• transformirati,
• pseudo element
• flexbox.

Kao ilustraciju, razmotrite sljedeći primjer.

Postoje dva elementa div, od kojih je jedan ugniježđen u drugi. Dajmo im odgovarajuće klase - vanjske i unutrašnje.

Cilj je poravnati unutrašnji element sa središtem vanjskog elementa.

Za početak, razmotrite slučaj kada su veličine vanjskog i unutarnjeg bloka poznato. Dodajmo display: inline-block unutrašnjem elementu, a text-align: centar i vertikalno poravnanje: sredini vanjskom elementu.

Imajte na umu da se poravnanje primjenjuje samo na elemente koji imaju inline ili inline-blok način prikaza.

Postavimo veličine blokova, kao i boje pozadine da vidimo njihove granice.

Vanjski (širina: 200px; visina: 200px; poravnanje teksta: centar; vertikalno poravnanje: sredina; boja pozadine: #ffc; ) .unutrašnji (prikaz: inline-blok; širina: 100px; visina: 100px; boja pozadine : #fcc;)
Nakon primjene stilova, vidjet ćemo da je unutrašnji blok poravnat vodoravno, ali ne i okomito:
http://jsfiddle.net/c1bgfffq/

Zašto se to dogodilo?Činjenica je da svojstvo vertical-align utiče na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga, primjena ove osobine na vanjski element nije učinila ništa. Štaviše, primjena ovog svojstva na unutrašnji element također neće učiniti ništa, budući da su inline-blokovi vertikalno poravnati sa susjednim blokovima, a u našem slučaju imamo jedan inline-blok.

Postoji nekoliko tehnika za rješavanje ovog problema. Pogledajmo pobliže svaki od njih u nastavku.

Poravnanje sa stolom

Prvo rješenje koje vam pada na pamet je zamjena vanjskog bloka sa jednoćelijskom tablicom. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutrašnji blok.

http://jsfiddle.net/c1bgfffq/1/

Očigledan nedostatak ovog rješenja je što je sa stanovišta semantike pogrešno koristiti tabele za poravnanje. Drugi nedostatak je što da biste kreirali tabelu, morate dodati još jedan element oko vanjskog bloka.

Prvi minus se može djelomično ukloniti zamjenom tabele i td tagova sa div i postavljanjem načina prikaza tabele u CSS-u.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Ipak, vanjski blok će i dalje ostati stol sa svim posljedicama koje proizilaze.

Poravnanje sa paddingom

Ako su visine unutrašnjeg i vanjskog bloka poznate, onda se poravnanje može postaviti pomoću vertikalnog odsječka unutarnjeg bloka, koristeći formulu: (H vanjski - H unutarnji) / 2.

Vanjski (visina: 200px; ) .unutarnji (visina: 100px; margina: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nedostatak rješenja je što je primjenjivo samo u ograničenom broju slučajeva kada su poznate visine oba bloka.

Poravnanje sa visinom linije

Ako znate da unutrašnji blok ne bi trebao zauzimati više od jednog reda teksta, onda možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutrašnjeg bloka ne bi trebao premotati u drugi red, preporučuje se dodavanje bijelih razmaka: nowrap i overflow: skrivenih pravila.

Vanjski (visina: 200px; visina linije: 200px; ) .unutarnji (razmak: nowrap; overflow: skriven; )
http://jsfiddle.net/c1bgfffq/12/

Ova tehnika se također može koristiti za poravnavanje višerednog teksta ako nadjačate vrijednost visine reda za unutrašnji blok i dodate pravila display: inline-block i vertical-align: middle .

Vanjski (visina: 200px; visina linije: 200px; ) .unutrašnja (visina linije: normalna; prikaz: inline-block; vertikalno poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/

Nedostatak ove metode je što visina vanjskog bloka mora biti poznata.

Stretch Alignment

Ova metoda se može koristiti kada je visina vanjskog bloka nepoznata, ali je poznata visina unutrašnjeg.

Za ovo vam je potrebno:

1. postaviti relativno pozicioniranje na vanjski blok, a apsolutno pozicioniranje na unutrašnji blok;
2. dodajte pravila gornji: 0 i donji: 0 unutrašnjem bloku, zbog čega će se protegnuti na cijelu visinu vanjskog bloka;
3. postavite vrijednost na auto za vertikalni padding unutrašnjeg bloka.

.vanjski (pozicija: relativna; ) .unutrašnja (visina: 100px; pozicija: apsolutna; vrh: 0; dno: 0; margina: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Suština ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje pretraživač da izračuna vertikalni padding u jednakoj proporciji ako je njihova vrijednost postavljena na auto .

Poravnanje sa negativnim vrhom margine

Ova metoda je postala nadaleko poznata i vrlo se često koristi. Kao i prethodni, primjenjuje se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutrašnjeg.

Morate postaviti vanjski blok na relativno pozicioniranje, a unutrašnji blok na apsolutno pozicioniranje. Zatim treba da pomerite unutrašnju kutiju do polovine visine gornje strane spoljne kutije: 50% i da je pomerite do polovine njene sopstvene visine margin-top: -H unutrašnja / 2.

Vanjski ( pozicija: relativna; ) .unutrašnja (visina: 100px; pozicija: apsolutna; vrh: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nedostatak ove metode je što visina unutrašnje jedinice mora biti poznata.

Poravnanje sa transformacijom

Ova metoda je slična prethodnoj, ali se može primijeniti kada je visina unutrašnjeg bloka nepoznata. U ovom slučaju, umjesto postavljanja negativnog dopuna u pikselima, možete koristiti svojstvo transformacije i podići unutrašnju kutiju prema gore pomoću funkcije translateY i vrijednosti od -50% .

Vanjska ( pozicija: relativna; ) .unutrašnja ( pozicija: apsolutna; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Zašto u prethodnoj metodi nije bilo moguće postaviti vrijednost kao postotak? Budući da su procentualne vrijednosti svojstva margine relativne u odnosu na roditeljski element, vrijednost od 50% bi bila jednaka polovini visine vanjskog okvira, a mi bismo morali podići unutrašnji okvir za polovinu njegove vlastite visine. To je upravo ono čemu služi svojstvo transformacije.

Nedostatak ove metode je što se ne može primijeniti ako unutrašnji blok ima apsolutno pozicioniranje.

Usklađivanje sa Flexboxom

Najmoderniji način za vertikalno poravnanje je korištenje fleksibilnog rasporeda kutije (popularno poznatog kao Flexbox). Ovaj modul vam omogućava fleksibilnu kontrolu pozicioniranja elemenata na stranici, postavljajući ih gotovo bilo gdje. Centralno poravnanje za Flexbox je vrlo jednostavan zadatak.

Vanjski blok treba postaviti na display: flex, a unutrašnji blok na margin: auto. I to je sve! Prelepo, zar ne?

Vanjski (prikaz: flex; širina: 200px; visina: 200px; ) .unutrašnji (širina: 100px; margina: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nedostatak ove metode je što Flexbox podržavaju samo moderni pretraživači.

Koji način odabrati?

Potrebno je poći od iskaza problema:

• Za vertikalno poravnanje teksta, bolje je koristiti vertikalni padding ili svojstvo line-height.
• Za apsolutno pozicionirane elemente sa poznatom visinom (kao što su ikone), pristup negativne margine na vrhu je idealan.
• Za složenije slučajeve u kojima je visina bloka nepoznata, treba koristiti pseudoelement ili svojstvo transformacije.
• Pa, ako ste dovoljno sretni da ne morate podržavati starije verzije IE-a, onda je, naravno, bolji Flexbox.

Oznake: Dodajte oznake

ili svojstva HTML tablice i ćelije na primjerima

Nastavljamo sa učenjem HTML tabele. Trenutna lekcija će vas naučiti kako instalirati veličina stola, vertikalno i horizontalno poravnajte njegov sadržaj, tačnije sadržaj ćelija. Također ćete naučiti kako odrediti HTML zaglavlje tabele.

Navigacija po stranici

Širina i visina ćelije HTML tabele (veličina ćelije)

Visina i širina HTML ćelije, veličina definisano sljedećim atributima:

Zadate su dimenzije prve ćelije iz prvog reda. Kao rezultat toga, druga ćelija istog reda naslijedila je visinu prve, a prva ćelija drugog reda je naslijedila njenu širinu (širina prve ćelije, prvog reda). Ovo je karakteristika interakcije elemenata HTML tabele.

Horizontalno HTML poravnanje u tabeli i u ćeliji, tekst

HTML poravnanje unutar tabele. Tekst lijevo, desno, centriran u ćelijama tabele:

rezultat:

rezultat:

rezultat:

oznake odrediti HTML zaglavlje tabele.

Centar HTML tabele, leva, desna strana

Horizontalni izgled HTML tabele unutar web stranice:

align="centar" poravnati = "lijevo" align="desno"

Gornji primjer prikazuje tri odvojena stolovi, od kojih se svaka sastoji od jedne ćelije. bgcolor- HTML atribut - definira boju pozadine. U prethodnom tutorijalu smo ga koristili css analogno - boja pozadine.

HTML tabela koja se nalazi unutar ćelije

Unutar druge ćelije je još jedna sto sa svojim vlastitim atributima, vrijednostima i stilovima.

Dimenzije i pozadina unutrašnjeg stola, za razliku od vanjskog, date su uz pomoć css.

obavještava pretraživač da je tabela kompletna.

Svaka tabela se sastoji od kolona i redova.

Tag kreira string i oznaku ćelija u nizu. Prema tome, koliko ćelija je uključeno u red, toliko će biti i kolona u tabeli.

Tag takođe stvara ćeliju. Njegova razlika od oznake da je ćelija kreirana pomoću oznake je ćelija zaglavlja: njen sadržaj je centriran, a ako je tekst, pretraživač ga prikazuje podebljanim slovima.

Sadržaj ćelije kreiran pomoću oznake podrazumevano se nalazi u njegovom levom delu.

Tag kreira zaglavlje tabele, nalazi se unutar oznake

- odmah nakon uvodne oznake. Naslov se podrazumevano postavlja iznad tabele i centriran.

Zaglavlje tabele

1. ćelija 1. reda	2. ćelija 1. reda
1. ćelija 2. red	2. ćelija 2. reda

Poravnanje tabele. Poravnanje sadržaja ćelije

Atribut align oznake se koristi za poravnavanje tablice.

.

Sa atributom align možete postaviti tabelu u lijevi ili desni (align= "left" i align= "right" ) dio prozora pretraživača ( roditeljski element) ili po njegovom centru (align= "center" ).

Poravnanje sadržaja linije ( tag

) i ćelije ( tag Ono što kreira red tabele nema atribute visine i širine. Visina reda odgovara visini ćelija koje se nalaze u njemu. Širina reda je jednaka širini tabele.

Vrijednosti visine i širine su navedene u pikselima ili kao postotak slobodnog prostora. Za postavljanje vrijednosti:

Određuje pozitivan cijeli broj. U ovom slučaju, veličina će biti data u pikselima;

Navedite pozitivan cijeli broj simbolom %.

Ako sadržaj tabele ili ćelije premašuje navedene dimenzije, pretraživač će ih ignorisati, a nove dimenzije će biti automatski odabrane u skladu sa dimenzijama sadržaja.

) horizontalno i određivanje njegove lokacije - iznad stola ili ispod njega.

Prema zadanim postavkama, sadržaj ćelije je vodoravno poravnat lijevo, a vertikalno centriran.

Visina i širina tabele i ćelija

Zadane veličine ( visina i širina), a tabele i ćelije se mijenjaju ovisno o veličini njihovog sadržaja.

Ali visina i širina i tabele i njenih pojedinačnih ćelija mogu se eksplicitno postaviti - koristeći atribute visine i širine, respektivno.

Tag

) horizontalno se također radi s atributom align, a okomito s atributom valign: Atribut align uzima vrijednosti lijevo, desno, centar i justify, koje postavljaju poravnanje sadržaja redova i ćelija po lijevoj, desnoj, središnjoj i širini, respektivno; Atribut valign, koji uzima vrijednosti top , bottom i middle , postavlja poravnanje sadržaja redova i ćelija prema njihovom vrhu, dnu i sredini, respektivno. Atribut align također služi za poravnavanje zaglavlja ( tag

>

Kao što možete vidjeti iz primjera: specificiranjem širine jedne od ćelija kolone, time postavljate širinu cijele kolone; i specificiranjem visine jedne od ćelija reda, postavljate visinu cijelog reda.

Granice stola i ćelija

Tabela i svaka njena ćelija imaju svoje granice, koje nisu vidljive prema zadanim postavkama.

Atribut granice oznake

omogućava vam da ivice učinite vidljivim i postavite njihovu debljinu. Ovo će prikazati granice oko tabele i oko svake ćelije.

Debljina ivice ( ili okviri) je navedeno u pikselima. Vrijednost atributa granice je pozitivan cijeli broj. Ako je atribut granice naveden bez vrijednosti, ivica će biti debela 1 piksel.

Debljina ivice je podešena samo za tabelu. Debljina ivice oko ćelija je uvijek 1 piksel ( ili nedostaje).

Podrazumevano, ivica je prikazana sa 3D efektom i crna je.

Atribut bordercolor postavlja boju ivice i uklanja 3D efekat. Atribut se može koristiti za postavljanje boje ivice tabele ( tag

), žice ( tag ) ili ćelije ( tag

). Atribut bordercolor ne podržavaju svi pretraživači i stoga se ne preporučuje. Da biste postavili boju obruba, bolje je koristiti stilove ( već je u css-u). Atribut granice nije naveden. Dakle, ne postoje granice. Ivica tabele je debela 3 piksela. Ćelije imaju ivice debljine 1 piksel! Djelomični prikaz granica Granica tabele i okvir oko ćelija mogu biti delimično prikazani. atribut oznake okvira specificira gdje treba nacrtati granicu tabele. Atribut pravila određuje kako prikazati granice ćelija. "500px" okvir="hsides" rules="cols" > Instalirano horizontalno ivice tabele I granice se prikazuju između kolona Podstava unutar i izvan ćelija Prilikom oblikovanja tablica u HTML-u, za vizualnu prezentaciju nekih informacija i njihovu pogodnu percepciju, može biti korisno koristiti uvlake unutar i izvan ćelija. Padding - od granica ćelija do njihovog sadržaja, postavljenih atributom cellpadding oznake . Vanjski padding - udaljenost između granica susjednih ćelija i udaljenost od granica ćelija do ivice tabele, postavlja se atributom razmaka ćelija oznake. . Vrijednosti atributa su pozitivni cijeli brojevi koji određuju udaljenost u pikselima. Udaljenost od sadržaja ćelije do njihovih granica je 10 piksela Udaljenost između ćelija i od ćelija do granice tabele je 25px Spajanje ćelija Prilikom dizajniranja i oblikovanja tabela u HTML-u, često je potrebno spojiti susjedne ćelije. A ako se pojavi takva potreba, onda biste trebali koristiti atribute colspan i rowspan oznake

. Colspan atribut specificira broj ćelija koje se spajaju horizontalno, a rowspan atribut postavlja broj ćelija koje se spajaju vertikalno. Oba atributa imaju smisla ako tabela ima više redova. 1 2 3 4 1 2 3 4 Pozadina stola. Pozadina ćelija tabele U HTML-u je moguće postaviti opću pozadinu za cijelu tabelu, kao i pozadinu za jednu odabranu ćeliju. Pozadinski atribut oznake specificira sliku koja će biti pozadinska slika tabele. Vrijednost atributa specificira adresu datoteke sa slikom - apsolutnu ili relativnu putanju do datoteke (). atribut oznake bgcolor postavlja boju pozadine tabele. Boja se može postaviti na dva načina () Koristeći iste atribute, možete postaviti sliku pozadine i boju pozadine za bilo koju ćeliju tabele ( tag , I . Bilo koji od njih se može koristiti za promjenu nekih svojstava jednog ili više redova tabele: ovo je opet poravnanje sadržaja ćelija u redovima horizontalno i vertikalno - koristeći atribute align i valign; i postavljanje boje pozadine ćelija pomoću atributa bgcolor. Kada koristite ove oznake, trebali biste biti svjesni nekoliko nijansi koje samo određuju razlike između njih. oznake I moraju biti postavljeni prije oznake , odmah nakon oznake uvodne tabele ). Tamno ružičasta je boja pozadine stola. Pozadinska slika jedne ćelije je nebo! Prisjetite se i postojanja atributa cols oznake , koji pretraživaču govori broj kolona u tabeli. Korišćenje atributa cols omogućava pretraživaču da brže prikaže sadržaj tabele. Uređivanje tabele U ovom dijelu ćemo razmotriti oznake koje se koriste prilikom uređivanja nekoliko elemenata tablice odjednom. Ove oznake se mogu podijeliti u dvije grupe. Prva grupa uključuje oznake I . Gotovo su identični i služe za postavljanje nekih svojstava i promjenu karakteristika jedne ili više kolona tabele. Jedna od ovih oznaka se postavlja odmah iza oznake . Recimo ovu oznaku . Korištenje atributa span oznake navedite broj kolona na koje će se primijeniti atributi align , valign ili width ( poravnajte sadržaj ćelija kolona vodoravno, okomito ili postavite širinu kolona). Ako je span atribut u oznaci nedostaje, tada će se promijeniti karakteristike jedne - prve kolone tabele. Drugi put kada koristite oznaku svojstva su postavljena za sljedeće ( sljedeće - ako je atribut span odsutan) kolone tabele itd. "2" širina="70px" > 1 2 3 4 5 1 2 3 4 5 Druga grupa oznaka također uključuje gotovo identične oznake . Linije postavljene u oznaku su prikazani na vrhu tabele, a redovi u okviru oznake će se nalaziti na dnu tabele. Obje oznake se mogu primijeniti samo jednom unutar iste tabele. Tag može se koristiti više puta unutar oznake . "desno" bgcolor= "#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 Top Related Articles Istorijat i opis koncepta slučaja u poslovanju, uputstva za pisanje i rešavanje Ubrzajte pokretanje računara Windows System Restore Pokrenite oporavak kada se možete prijaviti Kategorije: Programi Sigurnost Windows 10 Iron Windows 8 U kontaktu sa Greške © 2022 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.