Ako postavite širinu tablice kao atribut. Ponašanje praznih ćelija

stvara niz i oznaku :

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 određujete š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 je uvijek 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 - linija html tablice
- stupac (ćelija) html tablice.

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

Izrada takve html tablice vrlo je jednostavna. Prvo stavimo oznake same tablice unutar koje postavljamo potreban broj redaka (u našem primjeru 2 reda):

). 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 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, cijela stranica sastoji se od tablica: slike, tekstovi, poveznice, obrasci za registraciju - sve je postavljeno relativno jedno u odnosu na drugo pomoću html tablica (zapravo, cijela stranica se također nalazi u jednoj velikoj tablici). 2. Koje oznake imaju html tablice? Oznake, definirajući html tablicu napisani su ovako: Ali budući da znamo da se sve tablice sastoje od redaka i stupaca (ćelija), moramo i za njih postaviti oznake:

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

- stanica 1.1
- ćelija 1.2
- ćelija 1.3


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

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

3. Kako postaviti boju pozadine html tablica?

Sada shvatimo kako postaviti pozadinu tablice ili svake ćelije zasebno.

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

Na primjer, ako trebamo postaviti jednu boju za cijeli znak, onda to radimo ovako:

bgcolor="boja_pozadine">

- stanica 1.1
- ćelija 1.2
- ćelija 1.3


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

Na primjer, ako trebate napraviti žuti znak, tada pišemo:

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

Moramo postaviti širinu tablice, ali ponekad trebamo promijeniti širinu tablice. I moramo to shvatiti. Kako mogu promijeniti širinu tablice? Širina tablice se može mijenjati u pikselima ili postocima... Sada ćemo početi mijenjati širinu tablice u html-u! Zadnji put smo napravili tablicu širine 500 piksela, sa tri stupca i tri retka! (sjetite se atributa border="1 - koji je odgovoran za obrub) Ovdje je kod za ovu tablicu; Sada, da bismo razumjeli kako promijeniti širinu tablice ili stupca, promijenimo i dodajmo neke brojeve u naš kod table width="500" – promijenite u 599. Ova stranica je izgrađena na tablicama, a širina tekstualnog polja, tj. gdje se ove riječi nalaze je 600 piksela. Dobit ćemo: Neka širina stupca br. 2 bude 200 piksela: Neka širina kolone br. 3 bude 299 piksela: I dobivamo ovaj kod: Pogledajmo naš stol Sada promijenimo vrijednost atributa širine na polovicu = 50%. Gledamo našu tablicu koja iznosi 50%. To je sve što sam vam htio reći o tome kako promijeniti širinu tablice. Sada prijeđimo na visinu stola! obavještava preglednik da je tablica dovršena. Svaka tablica sastoji se 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 ćeliju. Razlikuje se od oznake	je da ćelija stvorena oznakom	je ćelija zaglavlja: njezin je sadržaj centriran, a ako je tekst, preglednik ga prikazuje podebljano. Sadržaj ćelije stvoren oznakom	standardno se nalazi na njegovoj lijevoj strani. 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 bijelu boju na tekst koji se nalazi unutar oznake.

Na potpuno isti način je navedeno boja svake ćelije posebno. Na primjer, ako želite 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, kako biste ručno postavili širinu i visinu ćelija, koristite atribute visine i širine. Mogu se postaviti za cijelu tablicu, za jedan redak ili za ćeliju (stupac). Visina i širina mogu se odrediti u pikselima ili postocima. U našem slučaju, postavit ćemo širinu i visinu u pikselima za stupce (ćelije).

visina- atribut koji postavlja visinu ćelije

širina- atribut koji određuje širinu ćelije

A sada za primjer:

Sada ću objasniti zašto visinu ćelije postavljamo samo jednom u svakom retku.

Ako u nizu za bilo koju ćeliju postavite visinu veću od ostalih, tada će, unatoč tome, sve ćelije (stupci) vašeg retka biti jednake po visini najvećoj. A širinu svakog reda najbolje je postaviti zasebno!

Možete postaviti visinu i širinu za cijeli stol. U tom će slučaju sve ćelije (stupci) i redovi ravnomjerno podijeliti prostor koji im je dodijeljen, ako im osobno ne postavite ove parametre (kao postotak ukupne širine (visine) tablice ili u pikselima).

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

sadržaj ćelije

Ako postavimo širinu ćelije na 40 posto, kao u našem primjeru, to znači da nam ostaje još 60 posto za preostale ćelije, tj. zbroj njihovih širina ne smije prelaziti 60 posto. Sve je vrlo jednostavno: ukupno imamo samo 100%. Brojimo: 100 – 40 = 60.

5. Kako poravnati tekst unutar html tablice?

Sada shvatimo kako poravnati tekst u našoj html tablici s lijeve, desne i srednje strane.

To se radi pomoću atributa:

poravnaj=”lijevo”- poravnava tekst unutar html tablice ulijevo

poravnaj=”centriraj”- poravnava tekst html tablice prema sredini

poravnaj=”desno”- poravnava tekst unutar html tablice udesno

Sukladno tome, atribut align također može uzeti vrijednosti desno i lijevo. Značenje opravdanja kada se koristi s oznakom atribut align ne može se prihvatiti.

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

align="center"> poravnaj="lijevo"> 1x1 align="center">1.2 poravnaj="desno"> 1x3 poravnaj="lijevo">2.1 align="center"> 2x2 poravnaj="desno">2.3

Registracijom atributa align="center" u otvoru

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

Ovo je rezultat koji ćete dobiti u pregledniku:

1x1	1.2	1x3
2.1	2x2	2.3

Sada pogledajmo primjer kako poravnati tekst unutar html tablice duž gornjeg ili donjeg ruba, odnosno kako možete osigurati da se sadržaj ćelije ne nalazi samo točno u sredini (kao što je standardno ), ali i na vrhu ili dnu.

Okomito poravnanje određeno je atributom:

valign="top"- sadržaj će se nalaziti na vrhu ćelije

valign="sredina"- sadržaj će se nalaziti u središtu ćelije

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

Pogledajmo ove atribute koristeći naš primjer:

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

Ovo dobivamo ako pogledamo rezultat atributa u pregledniku: uskladiti I valign:

1x1	1.2	1x3
2.1	2x2	2.3

6. Kako spojiti ćelije i stupce html tablice?

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

colspan- određuje broj stupaca koje određena ćelija pokriva

raspon redova- određuje broj redaka na koje se ova ćelija proteže

Vrijednosti colspan I raspon redova može imati vrijednost od 2 ili više, tj. ćelija se može protezati kroz dva ili više stupaca (redova).

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

Kao što vidimo, ćelija 1x1 proteže se preko dvije ćelije. Sukladno tome, njegova duljina jednaka je zbroju duljina ove dvije ćelije (160 piksela). Nismo naveli atribut širine za ćeliju 1x1, ali ako bismo to odlučili, postavili bismo širinu na 160 piksela. Također, imajte na umu da u našem primjeru ne postoji ćelija 1x3, tj. postoje samo dvije ćelije u prvom redu, zašto - o tome smo već raspravljali - ćelija 1x1 je jednaka dvjema ćelijama, zahvaljujući atributu colspan.

S atributima colspan i rowspan mora se rukovati vrlo pažljivo. Pogreška može uzrokovati pad vaše web-lokacije.

I sada kada razumijemo parametar colspan, pogledajmo parametar raspona redova. Princip rada je 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 okvir za html tablicu?

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

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

bordercolor="boja obruba"- postavlja boju okvira

Recimo, na primjer, dajmo našoj html tablici crni okvir širok 1 piksel.

Za ovu oznaku

dodati atribute:

Sada jasno vidimo uvlake između ćelija html tablice i uvlake od unutarnjih rubova ćelija prema tekstu. Dakle, možemo bez problema upravljati ovim udubljenjima. Atributi su za ovu svrhu:

cellspacing="širina prostora u pikselima"- prostor između ćelija

cellpadding="širina ispune u pikselima"- uvlačenje unutar ćelije (od ruba ćelije do teksta, slike, poveznice...)

Na primjer, napravimo uvlaku između ćelija od 10 piksela i povećajmo uvlaku od ruba ćelije do teksta na 20 piksela. To se radi ovako:

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

Ako pogledamo rezultat u pregledniku, jasno vidimo da je udaljenost između ćelija ( razmak stanica) 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 uvlake, jednostavno stavite cellpadding="0" I razmak ćelija="0".

8. Kako umetnuti jednu html tablicu u drugu?

Približavamo se završnoj fazi proučavanja html tablica. Sada ćemo naučiti kako umetnuti jednu tablicu u drugu.

Koristeći primjer, unutar ćelije 1.2 umetnut ćemo novu tablicu koja se sastoji od jednog retka i dva stupca. U internoj html tablici postavit ćemo crveni obrub širine 2 piksela i udaljenosti između ćelija od 0 piksela. Također ćemo staviti internu tablicu na vrh ćelije.

To se radi vrlo jednostavno:

1.1 3.1 3.2 2.1 2.2

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

1.1		3.1 3.2
2.1	2.2

Na ovom mjestu ćemo završiti ovaj članak. Mislim da se pokazalo uspješnim i nije teškim za razumijevanje i nadam se da više nećete imati problema s tablicama.

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

Širina ćelija tablice određena je širinom njihovog sadržaja, tako da širina stupaca tablice može varirati. Visina svih ćelija u nizu je ista i određena je visinom najviše ćelije.

Oblikovanje tablica

1. Granice tablice

Prema zadanim postavkama, tablica i ćelije unutar nje prikazuju se u pregledniku bez vidljivih granica. Granice tablice određeni su svojstvom granice:

Tablica ( border-collapse: kolaps; /*ukloni prazne prostore između ćelija*/ granica: 1px jednobojna siva; /*postavite vanjsku granicu tablice na sivu boju debljine 1px*/ )

Granice ćelija zaglavlja svaki stupac je specificiran za th element:

Th (obrub: 1px puno siv;)

Granice ćelija tijela tablice navedena su za td element:

Td (obrub: 1px puno siv;)

Debljina obruba susjednih ćelija se ne udvostručuje, tako da obrube cijele tablice možete postaviti na sljedeći način:

Th, td (obrub: 1px puno siv;)

Možete istaknuti vanjsku granicu tablice tako da joj povećate širinu:

Tablica (obrub: 3 px puno siv;)

Granice se mogu postaviti djelomično:

/* postavi sivi vanjski obrub debljine 3 px za tablicu */ table (border-top: 3px jednobojno sivo; ) /* postavi sivi obrub debljine 1px za ćeliju tijela tablice */ td (border-bottom: 1px jednobojno sivo ;)

Više o graničnom posjedu možete pročitati.

2. Kako postaviti širinu i visinu stola

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

Širina tablice i stupca postavlja se korištenjem svojstva width. Ako je tablica (width: 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 nije specificirano. Visina reda tablicama se može manipulirati dodavanjem gornjih i donjih ispuna elementima I . Fiksiranje visine pomoću svojstva height se ne preporučuje.

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

3. Kako postaviti pozadinu stola

Zadano pozadina stola a stanice su prozirne. Ako stranica ili blok koji sadrži tablicu ima pozadinu, ona će se prikazati kroz tablicu. Ako je pozadina navedena i za tablicu i za ćelije, tada će na mjestima gdje se pozadina tablice i ćelija preklapaju biti vidljiva samo pozadina ćelija. Pozadina za tablicu kao cjelinu i njezine ćelije može biti:
punjenje,
,
.

4. Stupci tablice

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

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

pomoću oznake

Možete postaviti pozadinu za bilo koji broj stupaca;

koristeći selektor table td:first-child , table td:last-child možete postaviti stilove za prvi ili zadnji stupac tablice (osim za prvu ćeliju zaglavlja tablice);

Koristeći selektor tablice td:nth-child (pravilo odabira stupaca), možete postaviti stilove za bilo koje stupce tablice.

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

5. Kako dodati naslov tablice

Tablici možete dodati naslov pomoću oznake , a korištenjem svojstva caption-side može se postaviti ispred ili ispod tablice. Za vodoravno poravnavanje teksta naslova upotrijebite svojstvo text-align. Naslijeđeno.

...

Tablica br. 1

Društvo	P1	Q2	Q3	Q4

naslov (strana naslova: dno; poravnanje teksta: desno; ispuna: 10px 0; veličina fonta: 14px; ) Riža. 2. Primjer prikaza zaglavlja ispod tablice

6. Kako ukloniti prostor između okvira ćelija

Prema zadanim postavkama, okviri ćelija tablice odvojeni su malim razmakom. Ako postavite border-collapse: collapse za tablicu, razmak će biti uklonjen. Imovina je naslijeđena.

Sintaksa

Tablica (border-collapse: collapse;)
Riža. 3. Primjer tablica sa spojnim i odvojenim okvirima ćelija

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

Pomoću svojstva border-spacing možete promijeniti udaljenost između okvira ćelija. Ovo se svojstvo odnosi na tablicu u cjelini. Naslijeđeno.

Sintaksa

Tablica (border-collapse: odvojeno; border-spacing: 10px 20px;) tablica (border-collapse: odvojeno; border-spacing: 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 ćelija postavljena na pozadinu, a tablica na tablicu (border-collapse: collapse;) , tada ćelija neće biti skrivena. Naslijeđeno.

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

tablica ( obrub: 1px puni #69c; border-collapse: odvojeno; prazne ćelije: sakrij; ) th, td (obrub: 2px puni #69c;) Riža. 5. Primjer skrivanja prazne ćelije tablice

9. Izgled tablice pomoću svojstva table-layout

Raspored tabličnog rasporeda određen je jednim od dva pristupa: fiksnim rasporedom ili automatskim izgledom. U ovom slučaju, raspored se odnosi na to kako je širina tablice raspoređena među širinama ćelija. Imovina se ne nasljeđuje.

Sintaksa

Tablica (izgled tablice: fiksno;)

10. Najbolji rasporedi stolova

1. Horizontalni minimalizam

Horizontalne tablice su tablice u kojima se tekst čita vodoravno. Svaki entitet je zaseban red. Ovakvim tablicama možete dati minimalistički izgled postavljanjem obruba od dva piksela ispod zaglavlja.

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

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

Kada postoji veliki broj redaka, ovakav dizajn tablice otežava njihovo čitanje. Da biste riješili ovaj problem, možete dodati granicu od jednog piksela ispod svih td elemenata.

Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; prijelaz: .3s linearno; )/*ostatak koda je kao u gornjem primjeru*/

Dodavanje efekta :hover elementu tr olakšat će čitanje tablica dizajniranih u minimalističkom stilu. Kada pokazivačem miša prijeđete preko ćelije, preostale ćelije u istom retku su istovremeno istaknute, što olakšava praćenje informacija ako tablice imaju više stupaca.

Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td (boja: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (background: #e8edff ;)

2. Vertikalni minimalizam

Iako se takve tablice rijetko koriste, vertikalno orijentirane tablice korisne su za kategorizaciju ili usporedbu opisa objekata predstavljenih stupcem. Možete ih dizajnirati u minimalističkom stilu dodavanjem prostora za odvajanje stupaca.

Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- desno: 30px puni #fff; rub-lijevo: 30px puni #fff; boja: #669; ispuna: 12px 2px; )

3. Kutijasti stil

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

Th (veličina fonta: 13px; težina fonta: normalno; pozadina: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; boja: #039; padding: 8px; ) td ( pozadina : #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px full transparent; padding: 8px; ) tr:hover td (background: #ccddff;)

Najteže je pronaći shemu boja koja će skladno odgovarati vašoj web stranici. Ako je web stranica zahtjevna za grafiku i dizajn, tada će vam biti prilično teško koristiti ovaj stil.

Tablica (obitelj-fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; maks. širina: 70%; širina: 70%; poravnanje teksta: središte; sažimanje granice: sažimanje ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th (font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- lijevo: 1px puni #9baff1; boja: #039; padding: 8px; ) td ( pozadina: #e8edff; border-desno: 1px solid #aabcfe; border-left: 1px solid #aabcfe; boja: #669; padding: 8px ;)

4. Horizontalna zebra

Zebra stol izgleda prilično atraktivno i udobno. Dodatna boja pozadine može poslužiti kao vizualni znak ljudima prilikom čitanja tablice.

Th ( font-weight: normal; color: #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 s ćelijama unutar. Lagani, minimalistički novinski stil mogao bi izgledati ovako: poigrajte se shemom boja, dodajte obrube, podstavu, različite pozadine i efekt lebdenja kada lebdite iznad crte.

Tablica (border: 1px solid #69c;) th (font-weight: normal; color: #039; border-bottom: 1px crtkano #69c; padding: 12px 17px; ) td (boja: #669; padding: 7px 17px; ) tr:hover td (pozadina: #ccddff;)

Tablica (border: 1px puni #69c;) th (font-weight: normal; boja: #039; padding: 10px; ) td (boja: #669; border-top: 1px crtkano #fff; padding: 10px; pozadina: #ccddff; ) tr:hover td (pozadina: #99bcff;)

Tablica (border: 1px solid #6cf;) th (font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-desno: 1px solid #0865c2; border-top: 1px solid #0865c2; rub-lijevo: 1px puni #0865c2; border-bottom: 1px puni #fff; padding: 20px; ) td (boja: #669; border-desno: 1px isprekidano #6cf; padding: 10px 20px; )

6. Pozadina stola

Tražite li brz i jedinstven način dizajna stola, odaberite atraktivnu sliku ili fotografiju koja se odnosi na temu stola i postavite je kao pozadinu stola.

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

Dimenzije tablice, njena visina i širina, određuju se automatski ovisno o tome što ćelije sadrže u sebi. Što je više sadržaja u ćelijama, to je veća veličina tablice i obrnuto.

Međutim, značajke CSS-a omogućuju vam promjenu veličine tablice u HTML-u navođenjem točne širine i visine koje trebate. Da budemo pošteni, treba napomenuti da atributi tablice također omogućuju postavljanje željenih dimenzija. Međutim, za sada ćemo govoriti samo o CSS-u.

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

Da biste odredili širinu tablice, morate koristiti CSS svojstvo širina, a za postavljanje visine potrebno je koristiti svojstvo visina.

Na primjeru to izgleda ovako.

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

Rezultat u pregledniku:

Puni kod:

Tablica sa zadanim veličinama

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

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

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

Postoji još jedno značenje - auto. A poseban je jer se uz njegovu pomoć širina i visina tablice izračunavaju automatski, standardno. U praksi određivanje ove vrijednosti izgleda ovako.

Širina: auto;

Visina: auto;

Željeli bismo vam skrenuti pozornost na još jednu važnu točku. Bolje je ne označavati visinu kao postotak, jer u pravilu u ovom slučaju neće raditi.

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

Ako mislite da preglednik nije pravilno postavio širinu stupaca na temelju sadržaja ćelija, tada imate pravo sami odrediti veličine ćelija i stupaca. A sada ćemo govoriti o tome kako promijeniti veličinu ćelije u HTML tablici.

Promjena veličine ćelija vrši se pomoću istih CSS svojstava kao i veličine tablice, naime: širina I visina.

Da biste ćelijama dodali stilove, možete koristiti jednu od dvije opcije:

1. Dajte ćelijama imena pojedinačnih klasa. Izgledat će ovako: class="cell-50px"

   A nakon toga trebali biste primijeniti stilove za ove klase.

2. Omogući atribut stil, unutar kojeg upišite potrebni CSS kod.

U praksi će druga opcija izgledati ovako:

...

Međutim, želimo napomenuti da nije potrebno često mijenjati pojedinačne veličine ćelija. U pravilu se to radi u situacijama kada je potrebno postaviti određenu širinu za stupce tablice. U ovom slučaju problem se lakše rješava. Samo trebate odrediti širinu ćelija u prvom redu.

Tablica sa zadanim veličinama

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; )

Ovo zaključuje ovu lekciju. Predlažem da dobro razmislite o svojoj domaćoj zadaći. Samo ga pažljivo proučite i razmislite o tome. Svako dobro svima!

 

---

Čitati:
Kakav je sukob između Tibeta i Kine? Bibliografija Selidba u Egipat Ezoterični simboli i znakovi Novosti i analitički portal "vrijeme elektronike" Tko upropaštava japanske elektroničke tvrtke Indijski horoskop kompatibilnosti prema datumu rođenja online Indijski jyotish horoskop prema datumu rođenja