Ako postavite širinu tablice s atributom. Ponašanje prazne ćelije

stvara niz i oznaku :

stvara zaglavlje tablice, nalazi se unutar oznake - odmah nakon uvodne oznake. Naslov je prema zadanim postavkama postavljen iznad tablice i poravnat sa središtem tablice.

Zaglavlje tablice

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

Poravnanje tablice. Poravnavanje sadržaja ćelija

Atribut align oznake koristi se za poravnavanje tablice

.

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

Poravnavanje sadržaja redaka ( označiti

) i stanice ( označiti koji stvara red tablice nema atribute visine i širine. Visina reda odgovara visini ćelija koje se nalaze u njemu. A širina reda jednaka je širini tablice.

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

Označen je pozitivan cijeli broj. U ovom slučaju, veličina će biti postavljena u pikselima;

Naveden je pozitivan cijeli broj iza kojeg slijedi simbol %.

Ako sadržaj tablice ili ćelije premašuje navedene veličine, preglednik će ih zanemariti, a nove će se veličine automatski uklopiti u skladu s veličinom sadržaja.

) horizontalno i određivanje njegovog položaja - iznad ili ispod tablice.

Prema zadanim postavkama, sadržaj ćelije je vodoravno poravnat lijevo, a okomito u sredini.

Visina i širina tablice i ćelija

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

No, visina i širina tablice i njenih pojedinačnih ćelija mogu se postaviti eksplicitno - pomoću atributa visine i širine.

Označiti

) horizontalno se također radi pomoću atributa align, a okomito pomoću atributa valign: Atribut align preuzima vrijednosti lijevo, desno, središte i justify, koje postavljaju poravnanje sadržaja redaka i ćelija prema lijevoj, desnoj, središnjoj i širini; Atribut valign, koji uzima vrijednosti vrh, dno i sredina, postavlja poravnanje sadržaja redaka i ćelija prema njihovom vrhu, dnu i sredini. Atribut align također služi za poravnavanje naslova ( označiti

>

Kao što možete vidjeti iz primjera: određujući širinu jedne od ćelija stupca, time postavljate širinu cijelog stupca; a navođenjem visine jedne od ćelija u retku postavljate visinu cijelog retka.

Granice stola i ćelija

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

Atribut granice oznake

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

Debljina ruba ( ili okvir) postavlja se u pikselima. Vrijednost atributa granice je pozitivan cijeli broj. Ako je obrub naveden bez vrijednosti, obrub će biti debeo 1 piksel.

Debljina obruba je postavljena samo za tablicu. Širina obruba oko ćelija je uvijek 1 piksel ( ili nedostaje).

Obrub se prema zadanim postavkama prikazuje u 3D i crne je boje.

Atribut bordercolor postavlja boju obruba i uklanja 3D efekt. Atribut se može koristiti za postavljanje boje obruba tablice ( označiti

), linije ( označiti ) ili ćelije ( označiti - red html tablice
- stupac (ćelija) html tablice.

Sada pokušajmo spojiti sve oznake u jednu tablicu. Da bismo to učinili, napravit ćemo html tablicu koja se sastoji od dva retka i tri stupca:

Vrlo je jednostavno napraviti takvu html tablicu. Prvo, stavimo oznake same tablice, unutar koje stavljamo potreban broj redaka (u našem primjeru 2 reda):

). Atribut bordercolor ne podržavaju svi preglednici i stoga se ne preporučuje. Da biste postavili boju obruba, bolje je koristiti stilove ( već je u CSS-u). Atribut granice nije naveden. Stoga nema granica. Obrub tablice je debeo 3 piksela. Ćelije imaju granice od 1 piksela! Djelomični prikaz granica Granica tablice i okvir oko ćelija mogu se djelomično prikazati. Atribut okvira oznake označava gdje treba nacrtati granicu tablice. Atribut pravila određuje kako prikazati granice ćelije. Okvir "500px" = pravila "hsides" = "cols"> Instalirano vodoravno granice stola I prikazane granice između zvučnika Uvlačenja unutar i izvan ćelija Prilikom oblikovanja tablica u HTML-u može biti korisno koristiti uvlake unutar i izvan ćelija za vizualizaciju nekih informacija i njihovo lakše čitanje. Unutarnji padding - od granica ćelija do njihovog sadržaja, postavljen atributom cellpadding oznake . Vanjski padding - udaljenost između granica susjednih ćelija i udaljenost od granica ćelija do granice tablice, postavljena 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 granice tablice je 25 piksela Spajanje stanica Prilikom oblikovanja i oblikovanja tablica u HTML-u često je potrebno kombinirati susjedne ćelije. A ako se pojavi takva potreba, onda biste trebali koristiti atribute oznake colspan i rowspan	. Atribut colspan specificira broj ćelija koje će se vodoravno spojiti, a rowspan atribut određuje broj ćelija koje će se okomito spojiti. Oba atributa su značajna ako tablica ima više redaka. 1 2 3 4 1 2 3 4 Pozadina stola. Pozadina ćelija tablice U HTML-u je moguće postaviti opću pozadinu za cijelu tablicu, kao i pozadinu za zasebno odabranu ćeliju. Atribut pozadine oznake određuje sliku koja će biti pozadinska slika tablice. Vrijednost atributa je adresa datoteke sa slikom - apsolutni ili relativni put do datoteke (). Atribut oznake Bgcolor postavlja boju pozadine stola. Boja se može postaviti na dva načina () Koristeći iste atribute, postavite pozadinsku sliku i boju pozadine za bilo koju ćeliju u tablici ( označiti , i . Bilo koji od njih može se koristiti za promjenu nekih svojstava jednog ili nekoliko redaka tablice: ovo je, opet, poravnavanje sadržaja ćelija u recima vodoravno i okomito - korištenjem atributa align i valign; i postavljanje boje pozadine ćelija pomoću atributa bgcolor. Postoji nekoliko nijansi kojih morate biti svjesni kada koristite ove oznake koje definiraju razlike među njima. Oznake i mora se postaviti prije oznake , odmah nakon početne oznake tablice ). Tamno ružičasta je boja pozadine stola. Pozadinska slika pojedine ćelije je nebo! Prisjetite se i postojanja atributa cols 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 ćemo odjeljku pogledati oznake koje se koriste prilikom uređivanja više elemenata tablice odjednom. Ove oznake se mogu podijeliti u dvije grupe. Prva skupina uključuje oznake i ... Gotovo su 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 naznačite broj stupaca na koje će se primijeniti atributi align, valign ili width ( poravnavanje sadržaja ćelija stupaca vodoravno, okomito ili postavljanje širine stupaca). Ako atribut span u oznaci je odsutan, tada će se promijeniti karakteristike jednog - prvog stupca tablice. Kod druge upotrebe oznake svojstva su postavljena za sljedeće ( sljedeći - ako nedostaje atribut span) stupci tablice itd. "2" širina ="70px"> 1 2 3 4 5 1 2 3 4 5 Druga skupina oznaka također uključuje oznake koje su međusobno gotovo identične. ... Žice umotane u oznaku prikazani su na vrhu tablice, a redovi u oznaci 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 1. Što su HTML tablice i zašto su potrebne? html tablice- ovo je jedna od najosnovnijih komponenti svake html stranice i, sukladno tome, svake stranice. Na primjer, stranica se cijela stranica sastoji od tablica: slika, tekstova, poveznica, obrazaca za registraciju - sve se postavlja relativno jedno prema drugom pomoću html tablica (zapravo, cijela stranica također se nalazi u jednoj velikoj tablici). 2. Koje su oznake za html tablice? Oznake specificiranje html tablice zapisuje se ovako: Ali kako znamo, sve se tablice sastoje od redaka i stupaca (ćelija), tako da i za njih morate postaviti oznake:

Zatim podijelimo svaki red u ćelije pomoću oznaka stupaca:

- ćelija 1.1
- ćelija 1.2
- ćelija 1.3


- ćelija 2.1
- ćelija 2.2
- ćelija 2.3

Zapravo, prva znamenka u oznakama je broj retka, a druga je broj ćelije (1x2 je prvi red, druga ćelija itd.).

3. Kako postaviti boju pozadine html tablica?

Sada ćemo shvatiti kako se pozadina tablice ili svake ćelije postavlja zasebno.

Dakle, za postavljanje pozadine koristi se atribut bgcolor = "boja_pozadine".

Na primjer, ako trebamo postaviti jednu boju za cijelu ploču, to se radi ovako:

bgcolor = "boja_pozadine">

- ćelija 1.1
- ćelija 1.2
- ćelija 1.3


- ćelija 2.1
- ćelija 2.2
- ćelija 2.3

Na primjer, ako je potrebno napraviti žutu ploču, tada pišemo:

Ako je potrebno postavite boju pozadine retka html tablicu, zatim atribut bgcolor = "boja_pozadine" primijeniti na oznaku

Moramo postaviti širinu tablice, ali ponekad moramo promijeniti širinu tablice. I moramo to shvatiti. kako promijeniti širinu stola. Širina tablice može se mijenjati u pikselima ili u postocima ... Sada ćemo se pozabaviti promjenom širine tablice u html-u! Zadnji put smo napravili tablicu širine 500 piksela, s tri stupca i tri retka! (Zapamtite border = "1 atribut - koji je odgovoran za obrub) Ovdje je kod za ovu tablicu; Sada, da bismo razumjeli kako promijeniti širinu tablice ili stupca, promijenit ćemo i dodati neke brojeve našem kodu širina tablice = "500" - promijenite na 599. Ova stranica je izgrađena na tablicama, a širina tekstualnog okvira, t.j. gdje se te riječi nalaze jednaka je 600 piksela. Dobit ćemo: Širina stupca #2 bit će 200 piksela: Širina stupca br. 3 bit će 299 piksela: I dobivamo sljedeći kod: Gledamo svoj stol Sada promijenimo vrijednost atributa širine na pola = 50%. Gledamo našu tablicu, koja je 50%. To je sve što sam vam htio reći o tome kako promijeniti širinu stola. A sada prijeđimo na visinu stola! obavještava preglednik o završetku tablice. Svaka tablica se sastoji od stupaca i redaka. Označiti
ćelija u nizu. Prema tome, koliko je ćelija uključeno u red, toliko će biti i stupaca u tablici. Označiti	također stvara stanicu. Njegova razlika od oznake	u toj ćeliji koju stvara oznaka	je ćelija - naslov: njegov je sadržaj centriran, a ako je riječ o tekstu, preglednik ga prikazuje podebljano. Sadržaj ćelije koju je stvorila oznaka	po zadanom se nalazi u njegovom lijevom dijelu. Označiti

bgcolor = "# FFFF00"> bgcolor = "# 0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

U ovom slučaju, atribut broj ćelije postavlja tekst unutar oznake na bijelo.

Na isti način postavlja se i boja svake ćelije posebno... Na primjer, ako trebate promijeniti boju ćelije 1.2 u plavu, tada unutar početne oznake atribut bgcolor = "boja_pozadine":

4. Kako postaviti veličinu širine i visine ćelija html tablice?

Dakle, da biste ručno postavili širinu i visinu ćelija, koristite atribute visine i širine. Mogu se postaviti za cijelu tablicu, za jedan red, za ćeliju (stupac). Visina i širina mogu se postaviti u pikselima ili u postocima. U našem slučaju ćemo postaviti širinu i visinu u pikselima za stupce (ćelije).

visina- atribut koji postavlja visinu ćelije

širina- atribut koji postavlja širinu ćelije

A sada s primjerom:

Sada ću objasniti zašto visinu ćelija postavljamo samo jednom po retku.

Ako u retku navedete veću visinu za bilo koju ćeliju nego za druge, tada će, unatoč tome, sve ćelije (stupci) vašeg retka postati jednake po visini najvećoj. A širinu svakog reda najbolje je postaviti zasebno!

Možete postaviti visinu i širinu za cijelu tablicu. U tom slučaju, sve ćelije (stupci) i retki će ravnomjerno podijeliti prostor koji im je dat, ako ne postavite ove parametre za njih osobno (kao postotak ukupne širine (visine) tablice ili piksela).

Također, vrlo često morate postaviti visinu i širinu. u postocima:

sadržaj ćelije

Ako širinu ćelije postavimo na 40 posto, kao u našem primjeru, to znači da nam je ostalo 60 posto za ostale ćelije, t.j. zbroj njihovih širina ne smije biti veći od 60 posto. Vrlo je jednostavno: ukupno imamo samo 100%. Smatramo: 100 - 40 = 60.

5. Kako poravnati tekst unutar html tablice?

Sada ćemo shvatiti kako poravnati tekst u našoj html tablici s lijeve, desne i središnje strane.

To se radi pomoću atributa:

poravnati = "lijevo"- poravnava tekst unutar html tablice s lijeve strane

poravnati = "centar"- poravnava tekst html tablice u sredini

poravnati = "desno"- poravnava tekst unutar html tablice udesno

Sukladno tome, atribut align također može poprimiti vrijednosti desno i lijevo. Poravnajte vrijednost kada se koristi s oznakom atribut align ne može prihvatiti.

Na primjer, html kod tablice čiji je tekst centriran izgleda ovako:

poravnati = "centar"> poravnati = "lijevo"> 1x1 poravnati = "centar">1.2 poravnati = "desno"> 1x3 poravnati = "lijevo">2.1 poravnati = "centar"> 2x2 poravnati = "desno">2.3

Pisanjem atributa poravnati = "centar" u otvaranju

, html tablicu smo poravnali sa središtem stranice preglednika.

Ovo je rezultat koji dobivate u pregledniku:

1x1	1.2	1x3
2.1	2x2	2.3

Pogledajmo sada primjer kako tekst unutar html tablice poravnati na vrh ili dno, odnosno kako osigurati da se sadržaj ćelije ne nalazi samo točno u njenoj sredini (kao što je zadano), ali i na vrhu ili dnu.

Okomito poravnanje određeno je atributom:

valign = "vrh"- sadržaj će biti pozicioniran na vrhu ćelije

valign = "sredina"- sadržaj će biti centriran u ćeliji

valign = "dno"- sadržaj će se nalaziti na dnu ćelije

Pogledajmo ove atribute koristeći naš primjer:

valign = "vrh"> 1x1 1.2 valign = "vrh"> 1x3 valign = "dno">2.1 2x2 valign = "dno">2.3

To je ono što dobivamo ako pogledamo rezultat rada atributa u pregledniku. uskladiti i valign:

1x1	1.2	1x3
2.1	2x2	2.3

6. Kako kombinirati ćelije i stupce html tablice?

U ovom dijelu našeg članka govorit ćemo o atributima kolspan i raspon redova.

kolspan- određuje broj stupaca na koje se ova ćelija odnosi

raspon redova- određuje broj redaka na koje se ova ćelija odnosi

Vrijednosti kolspan i raspon redova može uzeti vrijednost od 2 ili više, tj. ćelija se može razvući u dva ili više stupaca (redova).

Dakle, sada ćemo, koristeći primjer, rastegnuti ćeliju 1x1 u dva stupca (ćelije). Da bismo to učinili, koristit ćemo atribut colspan = "2" i dodijeliti ga ćeliji 1x1. Kod će izgledati ovako:

Kao što možete vidjeti, ćelija 1x1 proteže se na duljini dvije ćelije. Prema tome, njegova je duljina jednaka zbrojnoj duljini ove dvije ćelije (160 piksela). Nismo postavili atribut širine za ćeliju 1x1, ali ako bismo to odlučili, tada bismo postavili širinu jednaku 160 piksela. I također, imajte na umu da u našem primjeru nema ćelije 1x3, t.j. postoje samo dvije ćelije u prvom redu, zašto je - već smo o tome raspravljali - ćelija 1x1 jednaka dvije ćelije, zahvaljujući atributu colspan.

S atributima colspan i rowspan treba postupati vrlo pažljivo. Pogreška može uzrokovati da vaša stranica "ide".

Sada kada smo se pozabavili parametrom colspan, pozabavimo se parametrom raspona redaka. Ovdje je princip rada isti:

colspan = "2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Tako smo naučili kako kombinirati ćelije u retke i stupce html tablica.

7. Kako ukloniti, dodati ili promijeniti uvlake i kako postaviti obrub za html tablicu?

Dakle, ranije smo stvorili html tablicu, između čijih su ćelija jasno vidljive uvlake. Kako bi bili još bolje vidljivi, dodajmo obrub za našu tablicu. To se radi pomoću atributa:

border = "širina obruba u pikselima"- postavlja širinu okvira

bordercolor = "boja obruba"- postavlja boju okvira

Na primjer, napravimo našu html tablicu crnim obrubom širine 1 piksel.

Za ovo, oznaka

dodaj atribute:

Sada možemo jasno vidjeti padding između ćelija html tablice i padding od unutarnjih rubova ćelija do teksta. Stoga možemo upravljati ovim udubljenjima bez ikakvih problema. Za to su namijenjeni atributi:

razmak između ćelija = "širina paddinga u pikselima"- uvlačenje između ćelija

cellpadding = "širina paddinga u pikselima"- uvlačenje unutar ćelije (od ruba ćelije do teksta, slika, poveznica...)

Na primjer, uvucimo 10 piksela između ćelija i povećamo uvlačenje od ruba ćelije do teksta na 20 piksela. To se radi ovako:

cellpadding = "20"razmak između ćelija = "10"> 1.1 1.2 2.1 2.2

Ako pogledamo rezultat u pregledniku, možemo jasno vidjeti da je udaljenost između ćelija ( razmak ćelija) naše html tablice povećao se na 10 piksela, a udaljenost između teksta i unutarnjeg ruba ćelije povećala se za 20 piksela.

1.1		1.2
2.1	2.2

Ako trebate potpuno ukloniti udubljenje, jednostavno rečeno cellpadding = "0" i razmak ćelija = "0".

8. Kako umetnuti jednu html tablicu u drugu?

Dolazimo do završne faze proučavanja html tablica. Sada ćemo naučiti kako umetnuti jednu tablicu u drugu.

Na primjer, unutar ćelije 1.2 umetnut ćemo novu tablicu koja se sastoji od jednog retka i dva stupca. U unutarnjoj html tablici postavit ćemo crveni obrub od 2px i razmak između ćelija od 0px. Također, unutarnji stol ćemo postaviti na vrh ćelije.

To se radi vrlo jednostavno:

1.1 3.1 3.2 2.1 2.2

Evo što se dogodilo kao rezultat novih transformacija naše tablice (crvene ćelije - interna tablica smještena unutar velike tablice):

1.1		3.1 3.2
2.1	2.2

U ovoj fazi ćemo završiti ovaj članak. Mislim da se pokazalo uspješnim i nije teško razumjeti, a nadam se da više nećete imati problema s tablicama.

CSS specifikacija daje neograničene mogućnosti za dizajn tablice. Prema zadanim postavkama, ćelije tablice i tablice nemaju vidljive granice i pozadine, a ćelije unutar tablice nisu jedna uz drugu.

Širina ćelija tablice određena je širinom njihovog sadržaja, pa širina stupaca tablice može biti različita. Visina svih ćelija u nizu je ista i određena je visinom najviše ćelije.

Oblikovanje tablica

1. Granica obruba tablice

Tablica i ćelije unutar nje prema zadanim se postavkama prikazuju u pregledniku bez vidljivih granica. Granice tablice postavljeno svojstvom granice:

Tablica (border-collapse: kolaps; / * uklonite prazne prostore između ćelija * / obrub: 1px čvrsta siva; / * postavite vanjski rub od 1px sive za tablicu * /)

Obrube ćelije naslova svakog stupca postavljeni su za th element:

Th (rub: 1px čvrsta siva;)

Granice stanica tijela tablice postavljena su za td element:

Td (rub: 1px čvrsto siva;)

Širina obruba susjednih ćelija se ne udvostručuje, tako da možete postaviti granice za cijelu tablicu na sljedeći način:

Th, td (rub: 1px čvrsto siva;)

Vanjski rub tablice može se odabrati dajući mu povećanu širinu:

Tablica (rub: 3px čvrsto siva;)

Granice se mogu postaviti djelomično:

/ * postavite 3px sivi vanjski obrub za tablicu * / tablicu (obrub-vrh: 3px čvrsto siva;) / * postavite sivi obrub od 1px za ćeliju tijela tablice * / td (obrub-dno: 1px čvrsto siva;)

Više o granici možete pročitati.

2. Kako postaviti širinu i visinu stola

Zadano širina i visina stola određena je sadržajem njegovih stanica. Ako širina nije navedena, tada će biti jednaka širini najšireg retka (linije).

Širina tablice i stupca postaviti pomoću svojstva širine. Ako je tablica (širina: 100%;) navedena za tablicu, tada će širina tablice biti jednaka širini bloka spremnika u kojem se nalazi.

Širina tablice i stupaca obično je navedena u px ili%, na primjer:

Tablica (širina: 600px;) th (širina: 20%;) td: prvo dijete (širina: 30%;)

Visina stola nespreman. Visina redova tablicama se može manipulirati dodavanjem gornjih i donjih paddinga elementima i ... Ne preporučuje se fiksiranje visine pomoću svojstva visine.

Th, td (ispun: 10px 15px;)

3. Kako postaviti pozadinu stola

Zadano pozadina stola a stanice su prozirne. Ako stranica ili blok koji sadrži tablicu ima pozadinu, tada će svijetliti kroz tablicu. Ako je pozadina postavljena i za tablicu i za ćelije, tada će samo pozadina ćelija biti vidljiva na mjestima gdje se pozadina tablice i ćelije preklapaju. Pozadina za tablicu kao cjelinu i njene ćelije mogu biti:
ispuniti,
,
.

4. Stupci tablice

Model CSS tablice fokusiran je uglavnom na nizove (retke) formirane pomoću oznake

... U praksi postoje slučajevi kada trebate posebno oblikovanje stupaca, što je moguće na sljedeće načine:

koristeći oznaku

Možete postaviti pozadinu za bilo koji broj stupaca;

koristeći tablicu td: first-child, table td: last-child selektor, možete stilizirati prvi ili zadnji stupac tablice (isključujući prvu ćeliju zaglavlja tablice);

koristeći selektor tablice td: nth-child (pravilo odabira stupaca), možete stilizirati bilo koji stupac u tablici.

Možete pročitati više o CSS selektorima.

5. Kako dodati naslov u tablicu

Pomoću oznake možete dodati naslov tablici , a pomoću svojstva caption-side, može se postaviti ispred ili ispod stola. Svojstvo text-align koristi se za vodoravno poravnavanje teksta naslova. Naslijeđeno.

...

Tablica br.1

Društvo	Q1	Q2	Q3	Q4

natpis (na strani natpisa: dolje; poravnanje teksta: desno; padding: 10px 0; veličina fonta: 14px;) Riža. 2. Primjer prikaza zaglavlja ispod tablice

6. Kako ukloniti jaz između okvira ćelija

Prema zadanim postavkama, granice ćelija tablice su odvojene malim razmakom. Ako postavimo border-collapse: kolaps za tablicu, tada će se praznina ukloniti. Imovina je naslijeđena.

Sintaksa

Tablica (rub-kolaps: kolaps;)
Riža. 3. Primjer tablica sa stapajućim i podijeljenim granicama ćelija

7. Kako povećati razmak između granica stanica

Koristeći svojstvo razmaka obruba, možete promijeniti udaljenost između granica ćelija. Ovo svojstvo vrijedi za tablicu kao cjelinu. Naslijeđeno.

Sintaksa

Tablica (border-collapse: odvojeno; razmak obruba: 10px 20px;) tablica (border-collapse: odvojeno; razmak obruba: 10px;)
Riža. 4. Primjer tablica s povećanim razmacima između okvira ćelija

8. Kako sakriti prazne ćelije tablice

Svojstvo praznih ćelija skriva ili prikazuje prazne ćelije. Utječe samo na ćelije koje ne sadrže nikakav sadržaj. Ako je za ćeliju navedena pozadina, a za tablicu navedena je tablica (border-collapse: collapse;), tada ćelija neće biti skrivena. Naslijeđeno.

Društvo	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tablica (bord: 1px solid # 69c; border-collapse: odvojen; prazne ćelije: hide;) th, td (bord: 2px solid # 69c;) Riža. 5. Primjer skrivanja prazne ćelije tablice

9. Izgled izgleda tablice pomoću svojstva table-layout

Izgled rasporeda tablice određen je jednim od dva pristupa: fiksnim rasporedom ili automatskim izgledom. Izgled u ovom slučaju znači kako je širina tablice raspoređena između širine ćelija. Imovina se ne nasljeđuje.

Sintaksa

Tablica (izgled stola: fiksno;)

10. Najbolji rasporedi stolova

1. Horizontalni minimalizam

Horizontalne tablice su tablice u kojima se tekst čita horizontalno. Svaki entitet je zasebna linija. Ovakve tablice možete stilizirati u minimalističkom stilu postavljanjem obruba od dva piksela ispod naslova.

Zaposlenik	Plaća	Bonus	Nadglednik
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tablica (familija fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; pozadina: bijela; maksimalna širina: 70%; širina: 70%; obrub-kolaps: kolaps; tekst -align: lijevo;) th (font-weight: normal; boja: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (boja: # 669; padding: 9px 8px; prijelaz: .3s linear;) tr: lebdjeti td (boja: # 6699ff;)

Uz veliki broj redaka, ovaj dizajn tablica čini ih teškim za čitanje. Da biste riješili ovaj problem, možete dodati obrub od jednog piksela ispod svih td elemenata.

Td (bord-bottom: 1px solid #ccc; boja: # 669; padding: 9px 8px; prijelaz: .3s linear;) / * ostatak koda je kao u primjeru iznad * /

Dodavanje efekta: hover elementu tr čini tablice minimalističkog stila lakšim za čitanje. Kada zadržite pokazivač miša iznad ćelije, ostale ćelije istog retka su istovremeno istaknute, što pojednostavljuje proces praćenja informacija ako tablice imaju više stupaca.

Th (težina fonta: normalna; boja: # 039; padding: 10px 15px;) td (boja: # 669; border-top: 1px čvrsta # e8edff; padding: 10px 15px;) tr: lebdeći mišem td (pozadina: # e8edff ;)

2. Vertikalni minimalizam

Iako se takve tablice rijetko koriste, okomito orijentirane tablice korisne su za kategorizaciju ili usporedbu opisa objekata predstavljenih stupcem. Možete ih stilizirati u minimalističkom stilu dodavanjem razmaka koji odvaja stupce.

Th (težina fonta: normalna; obrub-dno: 2px čvrsta # 6678b1; rub-desna: 30px čvrsta #fff; obrub lijevo: 30px čvrsta #fff; boja: # 039; padding: 8px 2px;) td (border- desno: 30px solid #fff; obrub lijevo: 30px čvrst #fff; boja: # 669; padding: 12px 2px;)

3. Stil "kutije".

Najpouzdaniji stil za ukrašavanje stolova svih vrsta je takozvani stil "kutije". Dovoljno je odabrati dobru shemu boja, a zatim postaviti boju pozadine za sve ćelije. Ne zaboravite naglasiti razliku između linija postavljanjem granica kao razdjelnika.

Th (veličina fonta: 13px; težina fonta: normalna; pozadina: # b9c9fe; granica-vrh: 4px čvrsta #aabcfe; obrub-dno: 1px čvrsta #fff; boja: # 039; padding: 8px;) td (pozadina : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: lebde td (pozadina: #ccddff;)

Najteže je pronaći shemu boja koja će se skladno uklopiti s vašom web lokacijom. Ako je stranica puna grafike i dizajna, bit će vam prilično teško koristiti ovaj stil.

Tablica (familija fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; maksimalna širina: 70%; širina: 70%; poravnanje teksta: središte; obrub-kolaps: kolaps ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (veličina fonta: 13px; težina fonta: normalna; pozadina: # e8edff; border-right: 1px solid # 9baff1; border- lijevo: 1px solid # 9baff1; boja: # 039; padding: 8px;) td (pozadina: # e8edff; rub-desno: 1px solid #aabcfe; rub-lijevi: 1px čvrst #aabcfe; boja: # 669; padding: 8px ;)

4. Horizontalna zebra

Zebra stol izgleda prilično atraktivno i praktično. Komplementarna boja pozadine može poslužiti kao vizualni znak ljudima da čitaju tablicu.

Th (težina fonta: normalna; boja: # 039; padding: 10px 15px;) td (boja: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( pozadina: # e8edff;)

5. Novinski stil

Da biste postigli takozvani efekt novina, možete primijeniti obrube na elemente tablice i igrati se ćelijama iznutra. Lagani, minimalni novinski stil mogao bi izgledati ovako: igrajte se shemom boja, dodajte obrube, paddinge, različite pozadine i: efekt lebdenja pri prelasku iznad crte.

Tablica (obrub: 1px čvrsta # 69c;) th (težina fonta: normalna; boja: # 039; obrub dno: 1px isprekidana # 69c; padding: 12px 17px;) td (boja: # 669; padding: 7px 17px; ) tr: zadržite td (pozadina: #ccddff;)

Tablica (obrub: 1px čvrsta # 69c;) th (težina fonta: normalna; boja: # 039; padding: 10px;) td (boja: # 669; obrub vrh: 1px crtkana #fff; padding: 10px; pozadina: #ccddff;) tr: zadržite td (pozadina: # 99bcff;)

Tablica (obrub: 1px čvrsta # 6cf;) th (težina fonta: normalna; veličina fonta: 13px; boja: # 039; transformacija teksta: velika slova; obrub desno: 1px čvrsti # 0865c2; obrub vrh: 1px čvrst # 0865c2; obrub-lijevo: 1px čvrsta # 0865c2; obrub-dno: 1px čvrsta #fff; padding: 20px;) td (boja: # 669; rub-desno: 1px isprekidana # 6cf; padding: 10px 20px;)

6. Pozadina stola

Ako tražite brz i jedinstven način oblikovanja stola, odaberite atraktivnu sliku ili fotografiju povezanu s temom stola i postavite je kao pozadinu stola.

Png ") 98% 86% bez ponavljanja;) th (težina fonta: normalna; veličina fonta: 14px; boja: # 339; padding: 10px 12px; pozadina: bijela;) td (boja: # 669; obrub- vrh: 1px puna bijela; padding: 10px 12px; pozadina: rgba (51, 51, 153, .2); prijelaz: .3s;) tr: lebdi td (pozadina: rgba (51, 51, 153, .1); )

Dimenzije tablice, njezina visina i širina određuju se automatski ovisno o tome što ćelije sadrže unutar njih. Što se ćelije više popunjavaju, to je veća veličina tablice i obrnuto.

Međutim, CSS vam omogućuje promjenu veličine tablice u HTML-u, navodeći točne vrijednosti širine i visine koje su vam potrebne. Radi pravednosti, valja napomenuti da vam atributi tablice također omogućuju postavljanje željenih dimenzija. Međutim, za sada ćemo govoriti samo o CSS-u.

Treba naglasiti da svaka tablica ima svoju minimalnu širinu i minimalnu visinu, na koje utječe njezin sadržaj. Čak i ako postavite vrijednosti širine i visine još manje, ništa se neće dogoditi. Strane stola neće prekoračiti svoj minimum.

Da biste odredili širinu tablice, morate koristiti svojstvo CSS širina, a da biste postavili visinu, morate primijeniti svojstvo visina.

Na primjeru to izgleda ovako.

Tablica (širina: 500px; visina: 100px;)

Rezultat u pregledniku:

Potpuni kod:

Dimenzionirana tablica

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Vrijednosti širine i visine tablice mogu se odrediti kao apsolutna vrijednost (u pikselima), a relativna vrijednost - u postocima. Na primjer, 20px i 20% respektivno.

Ako koristite postotke za postavljanje dimenzija tablice, oni će se izračunati na temelju dimenzija nadređenog elementa. Ako govorimo o našem primjeru, onda govorimo o prozoru preglednika.

Postoji još jedno značenje - auto. A poseban je jer automatski, prema zadanim postavkama, izračunava širinu i visinu tablice. U praksi, navođenje ove vrijednosti izgleda ovako.

Širina: auto;

Visina: auto;

Želimo vam skrenuti pozornost na još jednu važnu točku. Visinu je bolje ne navesti u postocima, jer u pravilu u ovom slučaju neće raditi.

Određivanje veličina pojedinačnih ćelija i stupaca

Ako mislite da je preglednik pogrešno postavio širinu stupaca, počevši od sadržaja ćelija, onda imate pravo sami odrediti veličine ćelija i stupaca. A sada ćemo razgovarati o tome kako promijeniti veličinu ćelije u HTML tablici.

Promjena veličine ćelije vrši se korištenjem istih CSS svojstava kao i veličine tablice, naime: širina i visina.

Za dodavanje stilova ćelijama možete koristiti jednu od dvije opcije:

1. Dodijelite pojedinačne nazive klasa ćelijama. Izgledat će ovako: class = "cell-50px"

   I nakon toga, trebali biste primijeniti stilove za ove klase.

2. Pozovi atribut stil, unutar kojeg treba napisati potreban CSS-kod.

U praksi, druga opcija će izgledati ovako:

...

Međutim, želimo napomenuti da nije tako često potrebno mijenjati veličinu stanica pojedinačno. U pravilu se to radi u onim situacijama kada je potrebno postaviti određenu širinu stupaca tablice. U ovom slučaju problem je lakše riješiti. Vi samo trebate odrediti širinu ćelija u prvom retku.

Dimenzionirana tablica

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Rezultat u pregledniku:

Kako promijeniti veličinu fonta u tablici

Često postoji potreba za promjenom veličine teksta u tablici. Na primjer, u ćelijama zaglavlja. To se može učiniti pomoću CSS svojstva veličina fonta... Postavimo veličinu fonta za elemente :

Th (veličina fonta: 30px;)

Ovim je ova lekcija završena. Predlažem da dobro razmislite o svojoj zadaći. Proučite to tako pažljivo i nagađajte. Sve najbolje!

 

---

Čitati:
Numerološke tajne: kako saznati datum smrti Zvijezda Rusije štitila je sveto značenje staroslavenskog simbola Runa Hyera - glavno značenje i tumačenje Što znači ime Elizabeth, karakter i sudbina Tumačenje snova madame Hasse: tumačenje snova brojevima