Uvlačenje u html tablici. Korištenje graničnog svojstva

Dakle, najviše smo učili s vama jednostavnih koraka, što se može učiniti s granicama tablice. A sada stol izgleda mnogo estetski ugodnije. Međutim, punjenje stanica izravno počiva na granicama. To se lako može popraviti samo uvlačenjem ćelija u HTML tablici. I tada će tekst unutar okvira, u ćeliji, biti čitljiviji.

Za uvlačenje ćelije upotrijebite atribut cellpadding za oznaku

. Međutim, postoji još jedna, poželjnija opcija: CSS.

U ovom slučaju, uvlačenje se postavlja pomoću svojstva podstava. Uz njegovu pomoć, neće biti teško uvući gdje je to potrebno, to jest, na vrhu, desno, dolje ili lijevo, koristeći jedno od ovih svojstava: padding-top, padding-desno, padding-bottom I padding-lijevo.

Možete točno odrediti koliko piksela treba biti udubljenje. Navedimo primjer u kojem će biti donja uvlaka 20 piksela, a sve ostalo bit će 10 . Takav CSS- kod će izgledati ovako:

Td ( ispuna: 10px; ispuna-dno: 20px; )

I kompletan kod stila u ovoj fazi:

Tablica ( obrub: puni 1px plavi; border-collapse: kolaps; ) td ( obrub: puni 1px plavi; padding: 10px; padding-bottom: 20px; )

Rezultat u pregledniku:

Razmaci između ćelija

U pravilu, problemi povezani sa stvaranjem tablica mogu se riješiti korištenjem oznaka, atributa i svojstava koji vam omogućuju stvaranje okvira, uvlake u ćelijama, kao i postavljanje pozadine boje samih ćelija.

Uvlake u tablicama ne nalaze se samo unutar ćelija. Oni također mogu biti prisutni između samih stanica.

Postoje dvije mogućnosti za pravljenje uvlaka između ćelija:

koristeći atribut razmak stanica za oznaku

korištenjem CSS-Svojstva granični razmak.

Mora se naglasiti da granični razmak specificiran je za tablicu kao cjelinu, dok je svojstvo podstava piše se izravno za ćelije.

Pogledajmo primjer:

Tablica ( obrub: jednobojni 1 px plavi; sažimanje obruba: odvojen; razmak obruba: 5 px; ) td ( obrub: puni 1 piksel plavi; ispuna: 10 px; razmak od dna: 20 px; )

I rezultirajući rezultat:

Odmah napomenimo da ne biste trebali pokušavati napraviti takva udubljenja pomoću border-collapse: kolaps. Uostalom, kada koristite ovu opciju, stanice se "lijepe" jedna za drugu.

A kako biste ih držali odvojene jedna od druge, trebali biste koristiti border-collapse: odvojeno. Važno je razumjeti da je ova vrijednost zadana vrijednost. I koristi se samo da jasno pokaže kako se ovaj problem rješava. Ako izbrišemo ovaj redak, rezultat će biti spremljen u obliku ćelija koje se nalaze odvojeno jedna od druge.

Tablica je jedan od glavnih alata za izradu web stranica.

Bez koristeći CSS, samo uz pomoć tablica možete izraditi stranice složenog dizajna. Ako ste završili seriju lekcija Izrada web stranice – prvi koraci, onda razumijete o čemu govorimo.

Bilo koja tablica je skup redaka i stupaca, na čijem se sjecištu nalaze ćelije. Na primjer:

Pogledajmo našu tablicu iz HTML perspektive:

sama tablica je navedena pomoću oznaka

tablica ima ime - oznake ,

tablica se sastoji od redaka – oznaka ,

svaki red se sastoji od stupaca – oznaka ,

stupci imaju imena smještena u prvom redu - oznake .

Kreirajmo tablicu u kojoj kao sadržaj označavamo sjecište brojeva redaka i stupaca:

Proizlaziti:

Kao što vidite, nije ispalo baš lijepo, ukrasit ćemo ga.

Parametri HTML tablice: uvlaka, širina, boja pozadine, okvir

U tu svrhu oznaka

Postoji nekoliko parametara:

širina- postavlja širinu tablice (u pikselima ili % širine ekrana),
bgcolor- postavlja boju pozadine ćelija tablice,
pozadina- ispunjava pozadinu stola uzorkom,
granica- postavlja obrub zadane širine (u pikselima) oko cijele tablice,
cellpadding- postavlja marginu u pikselima između granice ćelije i njenog sadržaja.

Primijenimo ove parametre:

Proizlaziti:

Ovako je bolje, ali naša je tablica pritisnuta na lijevi rub prozora, kao i tekst u njoj. Popravimo ovo dodavanjem još tri parametra:

uskladiti- postavlja poravnanje tablice: lijevo (desno), desno (lijevo), središte (centar),
razmak stanica- postavlja udaljenost između ćelija tablice (u pikselima),
cellpadding- postavlja udaljenost između teksta i unutarnjeg ruba ćelije tablice (u pikselima).

Primijenimo ove parametre:

Proizlaziti:

Imajte na umu da tablica ima dvostruke obrube. Ako navedete razmak ćelija="0", tada će granice poprimiti uobičajeni oblik:

Proizlaziti:

Općenito, za granice su odgovorna dva parametra:

okvir- postavlja vrstu okvira oko stola i može poprimiti sljedeće vrijednosti:
- poništiti- bez okvira,
- iznad- samo gornji okvir,
- ispod- samo donji okvir,
- hsides- samo gornji i donji okvir,
- vsides- samo lijevi i desni okvir,
- lhs- samo lijevi okvir,
- rhs- samo desni okvir,
- kutija- sva četiri dijela okvira.
pravila- postavlja vrstu internih granica tablice i može uzeti sljedeće vrijednosti:
- nikakav- nema granica između ćelija,
- skupine- granice samo između skupina redaka i skupina stupaca (o čemu će biti riječi malo kasnije),
- redaka- granice samo između linija,
- cols- granice su samo između stupaca,
- svi- prikazati sve granice.

Pomoću ovih parametara možete postaviti granice onako kako želite. Ovdje ćemo dati samo jedan primjer, sami eksperimentirajte sa svima.

Proizlaziti:

Treba napomenuti da su granice u različitim preglednicima prikazuju se malo drugačije.

HTML oznake tr i td

Tablice se formiraju red po red. Stoga parametri navedeni u retku (tr) proširuju svoj učinak na sve ćelije (td) retka. Stringovi mogu imati tri parametra:

uskladiti- horizontalno poravnava tekst u ćelijama, može uzeti vrijednosti: lijevo (desno), desno (lijevo), središte (centar),
valign- poravnava tekst u ćelijama okomito, može imati vrijednosti: gore (gore), dolje (dno), centrirano (sredina),
bgcolor- postavlja boju linije.

Pogledajmo primjer:

širina- postavlja širinu stupca (u pikselima ili kao postotak, gdje je 100% širina tablice),
visina- postavlja visinu ćelije, a sve ćelije u istom redu postat će te visine.

Na primjer, dodajmo našem kodu u oznake

Proizlaziti:

Treba napomenuti da će se tablica ukoliko ne postavite širinu i visinu formirati prema sadržaju (tako je bilo u prethodnim primjerima).

Ova lekcija je gotova, vježbajte kreiranje i dizajniranje tablica, te će vam vještine trebati u sljedećoj lekciji, gdje ćemo izraditi tablice složenih struktura.

CSS vam omogućuje postavljanje ne samo stila obruba tablice, već i stila obruba pojedinačnih ćelija. Budući da svaka ćelija ima svoje granice, granica između susjednih ćelija je dvostruka. Ali moguće je spojiti granice susjednih ćelija u jednu. Za to postoji svojstvo urušavanja granice. Uzima vrijednosti:

border-collapse: odvojeno - svaka ćelija ima svoju granicu (zadano)

border-collapse: kolaps - zajednička granica

border-collapse: naslijediti - vrijednost je preuzeta iz nadređenog elementa

Na primjer, napravimo tablicu i postavimo okvir za ćelije svih tablica koje će biti na stranici. Nemojmo prvo ništa mijenjati da vidimo kako će tablica izgledati:

Stil:

ove parametre
1	2	3

1
2
3
4
5
6

Stranica

Domaća zadaća.

U ovoj lekciji neću opisati sve u detalje - samo općenite točke. Da biste dovršili sliku, pogledajte primjer rezultata.

Napravite tri tablice, svaka se sastoji od jednog retka i tri stupca (stupca).
U prvoj tablici postavite zaglavlje ili "zaglavlje" stranice (ne smije se brkati sa "zaglavljem" HTML dokumenta), u drugu - lijevi i desni izbornik, kao i glavni sadržaj (sadržaj) , u trećem - podnožje ili "podnožje" stranice.
Neka širina prvog i zadnjeg stupca svake tablice bude fiksna.
Važno. Koristi oznaku samo za stvaranje četiri gumba horizontalni izbornik u zaglavlju stranice. U ostalim slučajevima neka slike idu u pozadinu, au drugim ćelijama tablica koriste se samo boje, au prvoj i posljednjoj tablici #99FF99.
Neka tekst sadržaja stranice bude poravnat s obje strane ćelije tablice, a naslov centriran.
Što se tiče udaljenosti između ćelija tablice, kao i uvlaka ćelija, razmislite sami gdje ih treba potpuno ukloniti, a gdje povećati.

Postao je popularan, web dizajneri su uglavnom koristili metodu tabličnog rasporeda i dobili vrlo dobre rezultate.

Oznake koje se koriste za izradu tablice u html-u

stol - potrebna oznaka, otvaranje i zatvaranje stola
naslov- izborna oznaka koja označava naslov tablice
th- neobavezna oznaka, čije početne i završne oznake sadrže naziv stupca. Obično se pojavljuje podebljano
tr- obavezna oznaka koja otvara i zatvara liniju
td- obavezna oznaka koja označava otvaranje i zatvaranje ćelije u nizu

Primjer koda za jednostavnu tablicu

HTML tablica

Naziv tablice
Stobet 1	Stobet 2
Tekst u prvoj ćeliji	Tekst u drugoj ćeliji

Prikazat će se preglednik

Namjena tablica u html-u

Lekcija o stolovima je vrlo važna! Zahvaljujući tablicama, možete organizirati ne samo tekst, već i slike, veze i još mnogo toga. U tablici možete odrediti pozadina(ili njegova boja), uvlačenje, širina, granica I drugi parametri to će joj dati lijepu izgled. Stol - Vaš prvi korak do razumijevanja web dizajn! Prije su mnoge stranice bile u potpunosti postavljene kao tablice, odnosno sve što je korisnik vidio (bočni izbornik, gornji izbornik, sadržaj) bilo je sadržaj ćelija velike tablice.
S tim u vezi, prijeđimo izravno na atribute koji stol čine lijepim...

Svojstva i parametri html tablica: uvlačenje, širina, boja pozadine, obrub (okvir)

U oznaka stola postoje sljedeći atributi:

širina- širina stola. može biti u pikselima ili % širine zaslona.
bgcolor- boja pozadine ćelija tablice
pozadina- ispunjava pozadinu stola uzorkom
granica- okvir i granice u tablici. Debljina je naznačena u pikselima
cellpadding- ispuna u pikselima između sadržaja ćelije i njenog unutarnjeg ruba
Kao i prije, vrijednost atributa pišemo pod navodnicima.

Pogledajmo korištenje ovih atributa na primjeru. Da bismo to učinili, napravimo tablicu (ali već bez iznimno rijetko korištenih natpisa i th oznaka) i postavite parametar na atribut granica, širina (širina tablice, reda ili ćelije) I bgcolor (boja ćelije)

HTML tablica

Kao rezultat toga, u pregledniku će se prikazati sljedeća tablica:

okvir- atribut koji označava okvir oko stola. Postoje sljedeće vrijednosti:

Praznina - bez okvira,
iznad - samo gornji okvir,
ispod - samo donji okvir,
hsides - samo gornji i donji okviri,
vsides - samo lijevi i desni okviri,
lhs - samo lijevi okvir,
desno - samo desni okvir,
kutija - sva četiri dijela okvira.

pravila- atribut koji označava granice unutar tablice, između ćelija. Postoje sljedeće vrijednosti:

Ništa - nema granica između ćelija,
grupe - granice samo između grupa redaka i grupa stupaca (o čemu ćemo govoriti malo kasnije),
redovi - samo granice između redova,
cols - granice samo između stupaca,
sve - prikaz svih granica.

Pogledajmo primjer koda

HTML tablica

Stobet 1	Stobet 2

Proizlaziti

Sada pokušajmo stvoriti prekrasan stol. Da bismo to učinili, počnimo koristiti poravnanje stola. Da biste to učinili, postoje sljedeći već poznati parametri:

uskladiti- poravnanje stola. Može se postaviti lijevo (lijevo), desno (desno), u sredini (centar)
razmak stanica- udaljenost između ćelija tablice. Navedeno u pikselima (zadano 0 piksela)
cellpadding- razmak u pikselima između sadržaja ćelije i njezinog unutarnjeg ruba (zadano 0 piksela)
Pogledajmo primjer

HTML tablica

Stobet 1	Stobet 2
Tekst u prvoj ćeliji prvog stupca	Tekst u drugoj ćeliji drugog stupca

Preglednik će prikazati centriranu tablicu koja izgleda ovako:

tr redaka i td ćelija u HTML tablicama

Opet da podsjetim da se tablice formiraju red po red (tr). Redovi (tr) već sadrže ćelije (td). Ako navedete parametar za niz (tr), on će vrijediti za sve stanice(td) u ovom retku, ako za određenu ćeliju, onda samo za nju. U gornjim primjerima odredio sam boju za red; ovaj je parametar bio raspodijeljen u skladu s tim na sve ćelije.

Za tr i td oznake postoje sljedeće

uskladiti- poravnanje teksta unutar ćelije. Lijevi rub (lijevo), desni rub (desno), centar (sredina)
valign- okomito poravnanje teksta unutar ćelije. Gore (gore), dolje (dno), centar (sredina)
bgcolor- postavlja boju linije
širina- širina stupca (sve donje ćelije će prihvatiti ovaj parametar) naznačena je u pikselima ili kao postotak, gdje je 100% širina cijele tablice
visina- visina ćelije (sve ćelije u redu će prihvatiti ovaj parametar)

Pogledajmo kod u kojem je sadržaj ćelija (td) poredan duž različitih rubova: u prvoj lijevo, u drugoj desno:

HTML tablica