Html poravnanje tablice u ćeliji. Sve metode okomitog poravnanja u CSS-u

Da biste postavili poravnanje tablice na središte web stranice ili duž jednog od njezinih rubova, upotrijebite parametar oznake poravnanja

. Rezultat će biti vidljiv samo ako širina tablice ne zauzima cijelo dostupno područje, drugim riječima, manje od 100%.

Parametar align može imati sljedeće vrijednosti: lijevo, desno, središte.

lijevo — poravnajte stol ulijevo. Ovaj je parametar zadani i stoga se obično ne navodi.
desno — poravnajte tablicu na desnu stranu web stranice.
središte — poravnajte tablicu prema sredini web stranice.

Primjer 1 pokazuje kako centrirati tablicu.

Primjer 1: Poravnanje stola prema sredini

Sadržaj tablice

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Poravnajte stol prema sredini

Zapravo, align ne samo da postavlja poravnanje, već također uzrokuje omotavanje sadržaja oko tablice s drugih strana, slično ponašanju oznake . Ali budući da

nema parametar hspace koji određuje vodoravnu marginu, tada se ova uloga mora prenijeti na stilove, posebno atribut margine. Primjer 2 prikazuje tablicu poravnatu udesno i sadržaj omotan oko nje.

Primjer 2: Poravnanje tablice udesno

Sadržaj tablice

Sadržaj koji se mota oko stola...

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Poravnajte stol na desnu stranu

Trenutačni primjer stvara tablicu sa sivom pozadinom i desnim poravnanjem. Da biste razvili uvlake od tablice do sadržaja, koristite parametar margine s vrijednošću od 10 piksela.

Kako biste spriječili omatanje tablice kada je poravnata duž jednog od rubova, najlakši je način dodati oznaku iza tablice
uz dani stil jasno: oba . Ova naredba zabranjuje protok i s lijevog i s desnog ruba (primjer 3).

Primjer 3: Razmotajte stol

Sadržaj tablice

sadržaj...

Poravnanje tablice prema sredini vrši se na isti način, pomoću parametra oznake align="center".

, ali u ovom slučaju ne dolazi do prelamanja i sadržaj nakon tablice uvijek počinje u novom retku.

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

Osnovne suptilnosti

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

Kako centrirati sam stol

Najčešće trebate rasporediti tablicu u središte stranice, iako je u početku pritisnuta na lijevu stranu stranice. Kako biste ga poravnali sa središtem, morate postaviti svojstvo margine na auto.

...

Zbog toga se uvlačenje tablice automatski izračunava. Nakon toga, tablica će biti u sredini stranice.

Središte u ćelijama

Jednako tako često morate poravnati podatke prema središtu ćelije. Postoje tri načina za to: vodoravni, okomiti i apsolutni. Iz njihovog naziva jasno je po kojoj osi će se odvijati centriranje. U svakom slučaju koristi se oznaka , odgovoran za određenu stanicu u nizu. Zatim morate njegovim atributima valign (vertikalno) i/ili align (horizontalno) dodijeliti vrijednost "centar", ovisno o vašem zadatku:

Tekst centriran u ćeliji

Ako želite učiniti ovo oblikovanje standardnim za cijelu web-lokaciju ili stranicu (kako ne biste prepisivali svaku tablicu), trebali biste koristiti CSS stilove. Da biste to učinili, dodajte sljedeći kod unutar oznake :

Pomoću ove metode također možete postaviti poravnanje za određenu ćeliju, stupac, redak ili cijelu tablicu u cjelini. Kao što vidite, svaka od metoda je vrlo jednostavna.

Mislim da su se mnogi od vas koji su se morali baviti rasporedom susreli s potrebom okomitog poravnavanja elemenata i poznaju poteškoće koje nastaju prilikom poravnavanja elementa prema sredini.

Da, u CSS-u postoji posebno svojstvo vertikalnog poravnanja s više vrijednosti za okomito poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekuje. Pokušajmo to shvatiti.

Usporedimo sljedeće pristupe. Poravnajte pomoću:

• stolovi,
• uvlačenje,
• linija-visina
• istezanje,
• negativna margina,
• transformirati
• pseudo element
• flexbox.

Za ilustraciju, razmotrite sljedeći primjer.

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

Izazov je poravnati unutarnji element sa središtem vanjskog elementa.

Prvo, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova znan. Dodajmo pravilo display: inline-block unutarnjem elementu, te text-align: center i vertical-align: middle vanjskom elementu.

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

Postavimo veličine blokova, kao i boje pozadine kako bismo mogli vidjeti njihove granice.

Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnavanje: sredina; boja pozadine: #ffc; ) .unutarnji (zaslon: inline-block; širina: 100px; visina: 100px; boja pozadine : #fcc; )
Nakon primjene stilova, vidjet ćemo da je unutarnji blok poravnat vodoravno, ali ne i okomito:
http://jsfiddle.net/c1bgfffq/

Zašto se to dogodilo? Stvar je u tome što svojstvo vertical-align utječe na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga primjena ovog svojstva na vanjski element nije proizvela ništa. Štoviše, primjena ovog svojstva na unutarnji element također neće učiniti ništa, jer su inline-blokovi poravnati okomito u odnosu na susjedne blokove, au našem slučaju imamo jedan inline blok.

Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaku od njih.

Poravnanje pomoću tablice

Prvo rješenje koje pada na pamet je zamijeniti vanjski blok tablicom od jedne ćelije. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutarnji blok.

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

Očigledni nedostatak ovog rješenja je da je, sa semantičkog gledišta, neispravno koristiti tablice za usklađivanje. Drugi nedostatak je što stvaranje tablice zahtijeva dodavanje još jednog elementa oko vanjskog bloka.

Prvi minus se može djelomično ukloniti zamjenom oznaka table i td s div i postavljanjem načina prikaza tablice u CSS-u.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Međutim, vanjski blok će i dalje ostati stol sa svim posljedicama.

Poravnanje pomoću uvlaka

Ako su poznate visine unutarnjeg i vanjskog bloka, tada se poravnanje može postaviti pomoću okomitih uvlaka unutarnjeg bloka pomoću formule: (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 obaju blokova.

Poravnanje pomoću visine linije

Ako znate da unutarnji blok ne smije zauzimati više od jednog retka teksta, tada možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutarnjeg bloka ne bi trebao prelamati u drugi redak, preporučuje se dodavanje pravila white-space: nowrap i overflow: hidden.

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

Ova se tehnika također može upotrijebiti za poravnavanje višerednog teksta ako redefinirate vrijednost visine retka za unutarnji blok, te također dodate display: inline-block i vertical-align: središnja pravila.

Vanjski (visina: 200px; visina linije: 200px; ) .unutarnji (visina linije: normalno; prikaz: umetnuti blok; okomito poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/

Nedostatak ove metode je da mora biti poznata visina vanjskog bloka.

Poravnanje pomoću "istezanja"

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

Da biste to učinili potrebno vam je:

1. postavite relativno pozicioniranje vanjskom bloku, a apsolutno pozicioniranje internom bloku;
2. dodajte pravila top: 0 i bottom: 0 unutarnjem bloku, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
3. postavite okomito ispunjavanje unutarnjeg bloka na auto.

.outer (position: relative; ) .inner ( height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideja koja stoji iza ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje da preglednik izračuna vertikalno ispunjavanje u jednakom omjeru ako je postavljeno na auto.

Usklađivanje s vrhom negativne margine

Ova metoda je postala široko poznata i vrlo se često koristi. Kao i prethodni, koristi se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg.

Morate postaviti vanjski blok na relativno pozicioniranje, a unutarnji blok na apsolutno pozicioniranje. Zatim trebate pomaknuti unutarnji blok prema dolje za polovicu visine vanjskog vrha bloka: 50% i podići ga za polovicu vlastite visine margin-top: -H unutarnji / 2.

Vanjski (položaj: relativan; ) .unutarnji (visina: 100 px; položaj: apsolutni; vrh: 50%; margin-top: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Nedostatak ove metode je što se mora znati visina unutarnje jedinice.

Usklađivanje s transformacijom

Ova metoda je slična prethodnoj, ali se može koristiti kada je visina unutarnje jedinice nepoznata. U ovom slučaju, umjesto postavljanja negativnog ispuna piksela, možete koristiti svojstvo transformacije i pomaknuti unutarnji blok prema gore pomoću funkcije translateY i vrijednosti od -50% .

Vanjski ( položaj: relativan; ) .unutarnji ( položaj: apsolutni; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Zašto je bilo nemoguće postaviti vrijednost kao postotak u prethodnoj metodi? Budući da se postotne vrijednosti margine izračunavaju u odnosu na nadređeni element, vrijednost od 50% bila bi polovica visine vanjske kutije, a morali bismo podići unutarnju kutiju na polovicu vlastite visine. Svojstvo transformacije savršeno je za to.

Nedostatak ove metode je što se ne može koristiti ako unutarnja jedinica ima apsolutno pozicioniranje.

Usklađivanje s Flexboxom

Najmoderniji način okomitog poravnanja je korištenje fleksibilnog rasporeda okvira (popularno poznatog kao Flexbox). Ovaj vam modul omogućuje fleksibilnu kontrolu pozicioniranja elemenata na stranici, raspoređujući ih gotovo bilo gdje. Središnje poravnanje za Flexbox vrlo je jednostavan zadatak.

Vanjski blok treba postaviti na display: flex, a unutarnji blok na margin: auto. I to je sve! Prekrasno, zar ne?

Vanjski (zaslon: savitljiv; širina: 200 px; visina: 200 px; ) .unutarnji (širina: 100 px; margina: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nedostatak ove metode je što Flexbox podržavaju samo moderni preglednici.

Koju metodu trebam odabrati?

Morate krenuti od izjave problema:

• Za okomito poravnavanje teksta bolje je koristiti okomite uvlake ili svojstvo line-height.
• Za apsolutno pozicionirane elemente s poznatom visinom (na primjer, ikone), metoda s negativnim svojstvom margin-top je idealna.
• Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudoelement ili svojstvo transformacije.
• Pa, ako ste toliko sretni da ne trebate podržavati starije verzije IE preglednika, onda je, naravno, bolje koristiti Flexbox.

Oznake: Dodajte oznake

ili HTML svojstva tablica i ćelija koristeći primjere

Nastavljamo učiti HTML tablice. Trenutna lekcija će vas naučiti kako instalirati veličina stola, poravnajte njegov sadržaj, odnosno sadržaj ćelija, okomito i vodoravno. Također ćete naučiti kako odrediti Zaglavlje HTML tablice.

Navigacija po stranici

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

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

Utvrđene su dimenzije prve ćelije iz prvog reda. Kao rezultat toga, druga ćelija istog reda naslijedila je visinu prve, a prva ćelija drugog reda svoju širinu (širina prve ćelije, prvi red). Ovo je osobitost interakcije elemenata HTML tablice.

Horizontalno HTML poravnanje u tablici i ćeliji, tekstu

HTML poravnanje unutar tablice. Tekst lijevo, desno, središte ćelija tablice:

Proizlaziti:

Proizlaziti:

Proizlaziti:

Oznake odrediti Zaglavlje HTML tablice.

HTML tablica centrirana, lijevo, desno

Horizontalni izgled HTML tablice unutar web stranice:

align="center" poravnaj="lijevo" poravnaj="desno"

Gornji primjer prikazuje tri odvojena stolovi, od kojih se svaki sastoji od jedne ćelije. bgcolor - HTML atribut - definira boju pozadine. U prethodnoj lekciji koristili smo ga CSS analogno - boja pozadine .

HTML tablica smještena unutar ćelije

Unutar druge ćelije nalazi se još jedna stol sa svojim atributima, značenjima i stilovima.

Dimenzije i pozadina unutarnjeg stola, za razliku od vanjskog, navedeni su pomoću CSS.

obavještava preglednik da je tablica dovršena.

Svaka tablica sastoji se od stupaca i redaka.

Označiti stvara niz i oznaku ćelija u nizu. Prema tome, koliko je ćelija uključeno u red, toliko će biti i stupaca u tablici.

Označiti također stvara ćeliju. Razlikuje se od oznake je da ćelija stvorena oznakom je ćelija zaglavlja: njezin je sadržaj centriran, a ako je riječ o tekstu, preglednik ga prikazuje podebljano.

Sadržaj ćelije stvoren oznakom standardno se nalazi na njegovoj lijevoj strani.

Označiti stvara zaglavlje tablice, ono se nalazi unutar oznake

- odmah nakon uvodne oznake. Zadano zaglavlje nalazi se iznad tablice i poravnato je s njezinim središtem.

Naslov tablice

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

Poravnanje tablice. Poravnavanje sadržaja ćelije

Atribut align oznake koristi se za poravnavanje tablice.

.

Pomoću atributa align možete postaviti tablicu na lijevi ili desni (align= "left" i align= "right" ) dio prozora preglednika ( nadređeni element) ili u njegovom središtu (align="center" ).

Poravnavanje sadržaja redaka ( označiti

) i ćelije ( označiti , stvaranje retka tablice nema atribute visine i širine. Visina reda odgovara visini ćelija koje se nalaze u njemu. A širina reda jednaka je širini stola.

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

Navedite pozitivan cijeli broj. U ovom slučaju, veličina će biti navedena u pikselima;

Navedite pozitivan cijeli broj iza kojeg slijedi simbol %.

Ako sadržaj tablice ili ćelije premašuje navedene dimenzije, preglednik će ih zanemariti, a nove dimenzije će se automatski odabrati u skladu s dimenzijama sadržaja.

) vodoravno i određivanje njegovog položaja - iznad ili ispod stola.

Prema zadanim postavkama sadržaj ćelije vodoravno je poravnat ulijevo i okomito u sredini.

Visina i širina tablice i ćelija

Zadane veličine ( visine i širine) i tablice i ćelije mijenjaju se ovisno o veličini njihovog sadržaja.

Ali visina i širina tablice i njezinih pojedinačnih ćelija mogu se eksplicitno postaviti - korištenjem atributa visine i širine.

Označiti

) vodoravno se također radi pomoću atributa align, a okomito pomoću atributa valign: Atribut poravnanja prihvaća vrijednosti lijevo, desno, središte i opravdanje, koje određuju poravnanje sadržaja redaka i ćelija prema njihovoj lijevoj, desnoj, središnjoj i širini; Atribut valign, koji ima vrijednosti top, bottom i middle, određuje poravnanje sadržaja redaka i ćelija duž njihovih gornjih, donjih i srednjih rubova. Atribut align također služi za poravnavanje zaglavlja ( označiti

>

Kao što se može vidjeti iz primjera: određivanjem širine jedne od ćelija u stupcu, time postavljate širinu cijelog stupca; a određivanjem visine jedne od ćelija u nizu, određujete visinu cijelog retka.

Granice tablice i ćelije

Tablica i svaka njezina ćelija imaju svoje obrube, koji prema zadanim postavkama nisu vidljivi.

atribut rubne oznake

omogućuje vam da obrube učinite vidljivima i postavite njihovu debljinu. Ovo će prikazati obrube oko tablice i oko svake ćelije.

Debljina ruba ( odnosno okvire) naveden je u pikselima. Vrijednost atributa border je pozitivan cijeli broj. Ako je atribut obruba naveden bez vrijednosti, debljina obruba bit će 1 piksel.

Debljina ruba postavljena je samo za stol. Debljina ruba oko ćelija uvijek je 1 piksel ( ili nedostaje).

Prema zadanim postavkama obrub se pojavljuje s 3D efektom i crn je.

Atribut bordercolor određuje boju obruba i eliminira 3D efekt. Atribut se može koristiti za postavljanje boje ruba tablice ( označiti

), nizovi ( označiti ) ili ćelije ( označiti

). Atribut bordercolor ne podržavaju svi preglednici i stoga se ne preporučuje. Za postavljanje boje obruba bolje je koristiti stilove ( već je u CSS-u). Atribut granice nije naveden. Stoga nema granica. Debljina ruba tablice je 3 piksela. Ćelije imaju obrub od 1 piksela! Prikaz djelomičnog ruba Rub tablice i rub oko ćelija mogu biti djelomično prikazani. Atribut oznake okvira određuje gdje treba nacrtati obrub tablice. Atribut pravila određuje kako prikazati granice ćelija. "500px" frame="hsides" rules="cols" > instalirano horizontalna granice stola I prikazane su granice između stupaca Podstava unutar i izvan ćelija Prilikom oblikovanja tablica u HTML-u, kako biste vizualno predstavili neke informacije i učinili ih lakšim za percepciju, može biti korisno koristiti ispune unutar i izvan ćelija. Interno ispunjavanje - od obruba ćelija do njihovog sadržaja, postavlja se atributom cellpadding oznake . Vanjska ispuna - udaljenost između obruba susjednih ćelija i udaljenost od obruba ćelija do obruba tablice, postavljeni su 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 stanica i od stanica do ruba tablice je 25 piksela Spajanje ćelija Prilikom dizajniranja i oblikovanja tablica u HTML-u često morate spojiti susjedne ćelije. A ako se pojavi takva potreba, trebali biste koristiti atribute colspan i rowspan oznake

. Atribut colspan određuje broj ćelija koje će se spojiti vodoravno, a atribut rowspan određuje broj ćelija koje će se spojiti okomito. Oba atributa imaju smisla ako se tablica sastoji od više redaka. 1 2 3 4 1 2 3 4 Pozadina stola. Pozadina ćelije tablice U HTML-u je moguće postaviti opću pozadinu za cijelu tablicu, kao i pozadinu za zasebno odabranu ćeliju. Atribut oznake pozadine određuje sliku koja će biti pozadinska slika tablice. Vrijednost atributa određuje adresu slikovne datoteke - apsolutni ili relativni put do datoteke (). atribut oznake bgcolor postavlja boju pozadine tablice. Boja se može postaviti na dva načina () Koristeći iste atribute, možete postaviti pozadinsku sliku i boju pozadine za bilo koju ćeliju tablice ( označiti , I . Bilo koji od njih može se koristiti za promjenu nekih svojstava jednog ili više redaka tablice: ovo je ponovno poravnavanje sadržaja ćelija u redovima vodoravno i okomito - korištenjem atributa align i valign; i postavljanje boje pozadine ćelija pomoću atributa bgcolor. Kada koristite ove oznake, trebali biste biti svjesni nekoliko nijansi koje određuju razlike među njima. Oznake I mora se staviti ispred oznake , odmah nakon uvodne oznake tablice ). Tamnoružičasta je boja pozadine stola. Pozadinska slika pojedine ćelije je nebo! Prisjetimo se i postojanja cols atributa oznake , koji pregledniku govori broj stupaca u tablici. Korištenje atributa cols omogućuje pregledniku brži prikaz sadržaja tablice. Uređivanje tablice U ovom odjeljku ćemo pogledati oznake koje se koriste pri uređivanju nekoliko elemenata tablice odjednom. Ove oznake se mogu podijeliti u dvije grupe. Prva grupa uključuje oznake I . Oni su gotovo identični i služe za postavljanje nekih svojstava i promjenu karakteristika jednog ili više stupaca tablice. Jedna od ovih oznaka postavlja se odmah iza oznake . Recimo da je ovo oznaka . Korištenje atributa span oznake navedite broj stupaca na koje će se primijeniti atributi align, valign ili width ( vodoravno, okomito poravnavanje sadržaja ćelija stupaca ili postavljanje širine stupaca). Ako je atribut span u oznaci nedostaje, tada će se promijeniti karakteristike jednog - prvog stupca tablice. Drugi put kada upotrijebite oznaku svojstva su postavljena za sljedeće ( next - ako nedostaje atribut span) stupci tablice, itd. "2" širina="70px" > 1 2 3 4 5 1 2 3 4 5 U drugu skupinu oznaka također spadaju oznake koje su međusobno gotovo identične . Nizovi smješteni u oznaku prikazani su na vrhu tablice, a retci su okruženi oznakom nalazit će se na dnu tablice. Obje oznake mogu se primijeniti samo jednom unutar iste tablice. Označiti 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 Najbolji članci na temu Pri kojoj brzini snimanja trebam snimati video na kameri? Gdje dobiti potencijalnog klijenta: svi dostupni načini za dobivanje potencijalnog klijenta Ključ s čipom u automobilu: sve što trebate znati o njemu Čipovi postoje u nekoliko varijanti Kategorije: Programi Sigurnost Windows 10 Željezo Windows 8 U kontaktu s Greške © 2023 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.