Vіdstan mіzh stovpchikami në tabelat e CSS.

Mirembrema. Tabela, si element, ka veçoritë e veta, pasi fryn fort її në formën e blloqeve të pasura më të mëdha. Sot, dua t'ju tregoj për ato, si të shkruani në css midis tabelave të mesme.

V_dminnosti z modeli i bllokut

Kërcim për të vënë në mes të blloqeve, tingëlloni vicorist zvnishnі stupi, por mos punoni me ato të mesmet. Hapat e brendshëm të mesit mund të shkruhen, por boshti i jashtëm nuk mund të shkruhet.

E gjithë puna nuk është e madhe, vetëm boshti pas mbylljes në mes në tavolinat e roztashovaniya nuk përshtatej një me një, por me hapa të vegjël, sikur të mos kishe nevojë të nisje. Si mund t'i pastroj ato?

Fuqia e ndarjes kufitare

Fuqia vjen në shpëtim, pasi në css është e zakonshme për të dhënat tabelare - hapësira kufitare. Siç mund ta kuptoni emrin, ai do të tregojë hapësirën e lirë (në hap) në mes të lëkurës.

Një pikë e rëndësishme: vendosni hapësirën kufitare për të gjitha tabelat. Ky bosht është si ky:

tabela (
hapësira kufitare: 0;
}

Si rregull, ne rregullojmë midis qendrave dhe tani era e keqe shtypet fort një me një. Natyrisht, në pikat mund të bëni një pyetje, pasi do të jetë e nevojshme.

Është e mundur, pak në mënyrë të paqartë, çfarë fuqie është vendosur për përzgjedhësin e tavolinës, por është një specialitet i tillë i tavolinave, thjesht duhet ta mbani mend. Fuqia nuk do të funksionojë, kështu që për tabelat vendosni gjithashtu kufi-kollaps: kolaps. Në një gjendje të tillë, hapat e mesit merren automatikisht nga hapat e mesëm dhe nuk ka nevojë për ndarje kufitare.

Një mënyrë e vjetër për të vendosur pikat e thirrjes në mes

Më herët për këdo përpara tag

U shtua atributi i hapësirës së qelizave, i cili u përdor për të përcaktuar hyrjen, por sot një metodë e tillë nuk rekomandohet të përdoret. Kodi Tse zasmіchu dhe nuk përputhet me standardet aktuale të zhvillimit të uebit.

Pikërisht në atë që mund të shihni deri në me një vështrim të zjarrtë elementi, dhe html është absolutisht i papërshtatshëm për tієї drejtë. Standardet përcaktojnë se çfarë është përgjegjëse për css-në kryesore.

Ashtu si një bachite, në css mund të rregulloni midis tavolinave të mesme, ose mund t'i vlerësoni ato për fuqi shtesë ndarje kufitare. Të gjitha për sot. Nëse ju pëlqen tema e faqes në internet, ju lutemi abonohuni për t'u informuar për materialet e reja në faqen e internetit.

Baba, ne të kemi dhuruar vetëm dії, Yakі ju mund të zdіysnyuvati z midis tavolinave. Dhe tani tabela duket shumë më estetikisht e këndshme. Megjithatë, disa nga ato të mesme janë të mbërthyer drejtpërdrejt në kufij. Tse mund të korrigjohet lehtësisht, mjafton vetëm të ecësh në mes tabelat HTML. Dhe pastaj teksti në mes të kornizës, në mes, do të jetë më i lexueshëm.

Për ta përpunuar atë në komisariat, fitoni më pas atributin mbushja e qelizave për etiketë

. Sidoqoftë, versioni i tretë, më i shkurtër: css.

Në një gjendje të tillë mendore, hapat kërkohen për fuqi shtesë mbushje. Nuk është e rëndësishme për mua të të ndihmoj të hysh atje, sipas nevojës, te bisha, djathtas, nga poshtë, apo mëngjarash, vikorist, me sa duket, një nga këto autoritete: mbushje e sipërme, mbushje djathtas, mbushje-fundі mbushje-majtas.

Ju mund të pyesni, vetë piksel është fajtor për hyrjen. Le të synojmë prapanicën, në të cilën bëhemi hyrja e poshtme 20 piksele, dhe të gjithë të tjerët do të jenë 10 . të tilla css- kodi do të duket si ky:

td (mbushje: 10 px; mbushje-fund: 20 px;)

Dhe kodi i stilit të ri në këtë fazë:

Tabela (kufiri: i ngurtë 1 px blu; kufiri-kollapsi: kolaps;) td (kufiri: i ngurtë 1 px blu; mbushja: 10 px; mbushje-fund: 20 px;)

Rezultati në shfletues:

Ecni midis qendrave

Si rregull, tabelat zavdannya, povyazanі zі svrennyam, ju mund të virishiti, vikoristovuyuuchi për këtë etiketa, atribute dhe autoritet, yakі ju lejojnë të krijoni korniza, në mes, dhe gjithashtu të vendosni vetë sfondin e ngjyrave të atyre të mesit.

Regjistrimet në tabela nuk janë vetëm në mes të mesit. Erë e keqe mund të jetë gjithashtu e pranishme dhe mes vetë atyre të mesme.

Іsnuє dvі mundësia zrobiti vіdstupi mizh seredkami:

1. me variant atribut hapësira e qelizave për etiketë

.

nga fitoret css-Dominimi ndarje kufitare.

Kërkon mbështetje, çfarë ndarje kufitare të përshkruhet për tabelën në tërësi, në atë orë si fuqi mbushje të përshkruhen pa ndërprerje për mesataren.

Le të shohim një shembull:

Tabela (kufiri: i ngurtë 1 px blu; kolapsi i kufirit: i ndarë; hapësira kufitare: 5 px;) td (kufiri: i ngurtë 1 px blu; mbushje: 10 px; mbushje-fund: 20 px;)

І për zbritjen e rezultatit:

Le të vazhdojmë menjëherë, se nuk keni nevojë të kërkoni ndihmë, prandaj ngrihuni për ndihmë border-collapse: shembje. Mosha me vikoristanny tsієї optsії mesme "shkopin" një me një.

Dhe kështu erë e keqe ishte okremo një lloj i një, tjetër vikoristovuvat kufiri-kolapsi: i ndarë. Është e rëndësishme të kuptohet se çfarë vlerën e dhënëє znachennyam për zamovchuvannyam. І zastosovuєtsya vetëm për të treguar personalisht se si shkelet detyra. Nëse mund ta shohim këtë rresht, atëherë rezultati duket si i njëjti numër i atyre të fshehura në mes të kursimeve.

Në vetvete, tabelat duken si "të këqija", para kësaj, shfletuesit në mënyrën e tyre pasqyrojnë karakteristikat e tabelave, zocrema, korniza. Në të njëjtën kohë, këto nedolіki mund të korrigjohen lehtësisht duke përshpejtuar stilet mіtsyu. Kur kjo të bëhet, tabelat zgjerohen, gjë që ju lejon të futni tabelat në dizajnin e faqes dhe të shfaqni më qartë të dhënat e tabelës.

Sfondi me ngjyra në mes

Ngjyra e sfondit të të gjithë elementëve në tabelë vendoset në të njëjtën kohë përmes fuqisë së sfondit, pasi vendoset në përzgjedhësin TABLE. Në të njëjtën kohë, mbani mend rregullat e stileve vikoristannya, zokrema, rënie në fuqinë e elementeve. Edhe pse fuqia e sfondit nuk ulet, për sfondin e mesëm, pas bllokimit përdoret transparente, pra transparenca, kështu që efekti i mbushjes së sfondit do të shfaqet në mes. Nëse vendosni ngjyrën për përzgjedhësin TD ose TH në të njëjtën kohë nga TABLE, atëherë kjo ngjyrë do të vendoset në sfondin e dhomës (Shembulli 2.3).

Shembulli 2.3. Ngjyrë e sfondit

Tema 1	Tema 2
seredok 3	seredok 4

V këtë prapanicë hiqni ngjyrën blu në sfondin e mesit (etiketë ) I kuq në krye (etiketë ). Kjo për faktin se nuk është caktuar stili për përzgjedhësin TH, të cilit i "shkëlqen" sfondi i babait, në këtë rast, i përzgjedhësit TABLE. Dhe ngjyra për përzgjedhësin TD është e dukshme, boshti i mesit i është "mbushur" me një ngjyrë blu.

Rezultati i kësaj dëshmie të prapanicës në Fig. 2.4.

Mal. 2.4. Ndryshoni sfondin e ngjyrave

Fushat në mes të mesit

Fusha quhet në mes të skajit në vend të kordonit të mesit dhe її. Unaza për tsієї meti zastosovuєtsya atribut cellpadding etiketë

. Vіn përcakton vlerën e fushës në piksel nga anët e majta të mesit. Lejohet të ndryshohet fuqia e stilit të mbushjes, duke e shtrirë atë në përzgjedhësin TD, siç tregohet në Shtojcën 2.4.

Shembulli 2.4. Fushat në tabela

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Tema 1	Tema 2
seredok 3	seredok 4

Në këtë aplikacion, për grupim shtesë, zgjedhësi i fushës instalohet gjatë natës për përzgjedhësin TD dhe TH. Rezultati i prapanicës së indikacioneve në fig. 2.5.

Mal. 2.5. Fushat në mes

Nëse fuqia e stilit të mbushjes është vendosur për elementët e tabelës, atëherë ajo do të zbatohet në atributin cellpadding të etiketës

të injorohen.

Vіdstan mіzh mesi

Për të ndryshuar distancën midis meseve, vendoset atributi i hapësirës së qelizave të etiketës

. Pasi të keni derdhur në këtë atribut, është mirë të mbani mend kur kordonët janë fitimtarë, por në mes, ose kur mesi është i mbushur me ngjyrë, e cila shihet në afidet anash. Si një zëvendësim për hapësirën e qelizave, fuqia stilistike e hapësirës kufitare bëhet stilistike dhe vendoset midis kordoneve në mes. Një kuptim vendoset menjëherë, vertikalisht dhe horizontalisht midis kordoneve në mes. Nëse ka dy kuptime për autoritetin, atëherë i pari është horizontal (atëherë është i zemëruar dhe i djathtë në mes), dhe tjetri është vertikal (lart dhe poshtë).

Fuqia e ndarjes së kufijve është vetëm paksa e ndryshme sepse zgjedhësi TABLE nuk është vendosur të ketë fuqinë e kolapsit të kufirit nga vlerat e kolapsit (Shembulli 2.5).

Shembulli 2.5. Qëndroni midis kordoneve të mesit

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Rafaeli	4	11
Mikelanxhelo	24	9
Donatello	2	13

Rezultati i kësaj dëshmie të prapanicës në Fig. 2.6.

Mal. 2.6. Pamje tavoline me hapësira të ndryshme kufitare

shfletuesi Internet Explorer deri në dhe duke përfshirë këtë version, ai nuk e mbështet fuqinë e ndarjes kufitare, kështu që në cilin shfletues për tabela do të ngrijë vlerën e detyrave të hapësirës së qelizave për mbyllje (tingulli duket se është 2 px).

Kur shtoni kolapsin e kufirit në përzgjedhësin TABLE me vlerat e kolapsit, atributi i hapësirës së qelizave shpërfillet dhe vlera e ndarjes së kufijve vendoset në zero.

Kufijtë dhe kornizat

Për mbylljen e kordonit në tabelë, nuk ka mbrapa dhe її i shtohet atributit shtesë të etiketës kufitare

. Shfletuesit në një mënyrë tjetër shfaqin një kordon të tillë, kështu që është më mirë të mos shfaqni atributin përpara, por të vendosni pikturën e kordonit në stile. Le të hedhim një vështrim në dy metoda, pa stile të mesme po'yazanih zі.

cellpacing atribut wiki

Duket si atributi i hapësirës së qelizave të etiketës

vendos në mes të tavolinave. Nëse zgjidhen ngjyra të ndryshme për sfondin e tabelave dhe ato të mesme, atëherë midis vijave të mesme ka ngjyra të ndryshme, ngjyrat e tyre ndryshojnë në varësi të ngjyrës së tabelës dhe ngjyrat e tjera janë vlerat e hapësirës së qelizave. atribut në pixel. Në rastin e personit të theksuar, ka më shumë aplikim 2.3 të të njëjtit efekt të indikacioneve, nuk do ta përsëris këtë yoga.

Me respekt, nuk ka asnjë mënyrë të njohur për të krijuar mes, copat e verës mund të rrethohen nga sfera e zastosuvannya. Kështu që ju mund të hiqni vetëm një rrjetë me një ngjyrë, dhe jo vertikalisht ose vija horizontale në vendet e nevojshme.

staza e kufirit të pushtetit

Fuqia stilistike e kufirit vendos menjëherë ngjyrën e kordonit, stilin dhe shoqërinë e elementit. Atje, ku është e nevojshme të krijohen vija kufitare në anët e ndryshme, është më mirë të fitosh pokhіdnі - kufiri-majtas, kufiri-djathtas, kufiri-lart dhe kufiri-poshtë, në mënyrë që të jesh në pushtet, në të djathtë, te bisha dhe më poshtë.

Duke vendosur fuqinë e kufirit në përzgjedhësin TABLE, ne shtojmë një kufi rreth tabelës në tërësi, dhe para përzgjedhësit TD ose TH - një kufi rreth qendrës (Shembulli 2.6).

Shembulli 2.6. Shtimi i një kornize të varur

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Tema 1	Tema 2
seredok 3	seredok 4

Në këtë prapanicë, ka një kornizë sublime me ngjyrë të zezë pranë vetë tavolinës dhe një kornizë të fortë me ngjyrë të bardhë pranë qendrës së lëkurës. Rezultati i prapanicës së indikacioneve në fig. 2.7.

Mal. 2.7. Kordoni pranë tavolinave dhe mesve

Zbuloni respektin që në botën e konvergjencës vendosen vijat e mesme. Erërat dalin sërish për atributin rahunok di të etiketës hapësire të qelizave

. Nëse dua ta shtoj këtë atribut në kod, ai nuk shfaqet askund, shfletuesi do ta përdorë atë për kyçje. si të pyesni , Që është hequr jo nga nën-vera, por nga linja të vetme, por nga një nën-kompani. Për të ndryshuar specifikën e caktuar, autoriteti i stilimit vendoset në kolapsin e kufirit nga vlerat e kolapsit, pasi i shtohet përzgjedhësit TABLE (Shembulli 2.7).

Shembulli 2.7. Krijimi i një kornize të vetme

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Tema 1	Tema 2
seredok 3	seredok 4

Në këtë prapanicë krijohet një vijë e fortë e ngjyrës së gjelbër mes mesit dhe të zezës në tavolinë. Të gjithë kordonët në mes të tavolinave mund të jenë të njëjta tovshchina. Rezultati i prapanicës së indikacioneve në fig. 2.8.

Mal. 2.8. Kordoni pranë tavolinës

Virivnyuvannya vmistu komіrok

Për tekstin zamovchuvannyam në tabelat komіrtsі virіvnyuєtsya në skajin e majtë. Vynyatkom z th rregull є etiketë , Vіn vyznaє shkon, në një mënyrë vyvіvnyuvannya vіdbuvaєtsya në qendër. Për të ndryshuar mënyrën se si vendoset fuqia stilistike e rreshtimit të tekstit (shembulli 2.8).

Shembulli 2.8. Shikimi horizontal i dhomës në dhomë

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Tema 1	e mesme 1	seredok 2
Tema 2	seredok 3	seredok 4

Në këtë aplikacion ka një etiketë renditur në anën e majtë, dhe në vend të etiketës - ne qender. Rezultati i prapanicës së leximeve është më poshtë (Fig. 2.9).

Mal. 2.9. Shikimi i tekstit në mes

Shtrirja është vertikale në mes, dhe gjithmonë shikon në qendër, gjë që nuk është e qartë. Mos e mbështillni me dorë, sidomos për tavolina, në disa vende dhomat ndahen sipas lartësisë. Në një pozicion të tillë, shtrirja vendoset përgjatë skajit të sipërm të mesit për fuqi shtesë të shtrirjes vertikale, siç tregohet në shtojcën 2.9.

Shembulli 2.9. Duke parë së bashku një dhomë vertikalisht

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Tema 1	Tema 2
e mesme 1	seredok 2

Lartësia e kokës është vendosur në këtë aplikacion si 40 piksele dhe shtrirja e tekstit shfaqet përgjatë skajit të poshtëm. Rezultati i prapanicës së indikacioneve në fig. 2.10.

Mal. 2.10. Shikimi i tekstit në mes

mes bosh

Shfletuesit ende tregojnë mesin, mesi nuk thotë asgjë. "Asgjë" në këtë rast do të thotë që në mes të viçkës nuk kanë shtuar asnjë të vogël, apo tekst, për më tepër, nuk e kam futur në rozrahunok. Natyrisht, speciet ndahen vetëm në të njëjtën mënyrë, pasi midis tyre vendoset një kufi. Kur vikoristanny korniza e padukshme, lloj i mesit, i pavarur nga kjo, є në to scho-nebud chi, zbіgaєtsya.

Shfletuesit e vjetër nuk shfaqnin sfondin me ngjyra të qelizave boshe , Prandaj, në atë rast, nëse është e nevojshme të lihet mesi pa vend, por për të treguar ngjyrën në sfond, mesi i mesit shtohet në mes të mesit pa shtuar një grusht (). U përpoqa të mos ecja gjatë gjithë kohës, veçanërisht nëse është e nevojshme të vendoset lartësia e dhomës në 1-2 piksel, përmes së cilës një gjerësi më e gjerë hiqet nga hapja me një piksel të të vegjëlve. Në të vërtetë, një i vogël i tillë mund të përshtatet sipas gjykimit tuaj, por nuk shfaqet në faqen e internetit.

Për fat të mirë, epoka e të vegjëlve me një piksel dhe të gjitha llojet e trëndafilave në bazë të tyre ka kaluar. Shfletuesit funksionojnë saktë me tabela dhe pa prani në vend të atyre të mesëm.

Për të kontrolluar pamjen e qelizave boshe, përdoret fuqia e qelizave boshe, me vlerën hide, kufiri dhe sfondi në qelizat boshe nuk shfaqen. Nëse të gjitha meset janë bosh në një rresht, atëherë rreshti merret si i tërë. Mesi merret bosh në ulje-ngritjet e ardhshme:

• nuk ka simbole;
• në komіrtsі ka vetëm një zhvendosje të rreshtit, simbolit të tabelimit ose të humbura;
• vlera e dukshmërisë është caktuar si e fshehur.

Shtimi i një kampioni që nuk bie në sy merret aq i dukshëm sa është, në mënyrë që mesi të mos jetë më bosh (prapa 2.10).

Shembulli 2.10. mes bosh

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Rafaeli		11
Mikelanxhelo	24
Donatello		13

Pamja e tabelës në shfletuesin Safari të indikacioneve në fig. 2.11a. E njëjta tabelë në shfletuesin IE7 është paraqitur në Fig. 2.11b.

a. Për shfletuesit Safari, Firefox, Opera, IE8, IE9

b. Për shfletuesin IE7

Mal. 2.11. Pamje e tabelës me qendra boshe

Specifikimi CSS ju jep lirinë për të hartuar tabela. Pas bravës, tavolina dhe elementët e tavolinës nuk kanë kordonë dhe sfond të dukshëm, ndërsa qendra në mes të tavolinës nuk i përshtatet një me një.

Gjerësia e qendrës së tabelës përcaktohet nga gjerësia e tabelës, kështu që gjerësia e kolonave të tabelës mund të jetë e ndryshme. Lartësia e të gjitha mesve në seri është e njëjtë dhe përcaktohet nga lartësia e mesit më të lartë.

formatimi i tabelës

1. Kufiri ndërmjet tabelave

Tabela dhe ato të mesme në mes të saj janë dhënë në një mënyrë të ngjashme me shfletuesin pa kordona të dukshëm. mes tavolinave caktoni fuqinë e kufirit:

Tabela (kufi-kolaps: kolaps; / * hapësirat boshe midis meseve janë hequr * / kufiri: 1px gri e ngurtë; / * vendosur për tavolina me një kordon të vjetër 1px me ngjyrë gri tovshchina * /)

Midis mesit të kokës thurja e lëkurës është vendosur për elementin e th:

Th (kufiri: 1px gri e fortë;)

mes mesit Trupat e tabelës janë vendosur për elementin td:

Td (kufiri: 1px gri e fortë;)

Numri i kornizave të procesverbaleve gjyqësore nuk zvogëlohet, kështu që mund të vendosni një kordon për të gjitha tabelat në mënyrën e mëposhtme:

Th, td (kufiri: 1px gri e fortë;)

Ju mund ta shihni kordonin e vjetër të tabelës duke vendosur gjerësinë e tij më të madhe:

Tabela (kufiri: 3px gri e fortë;)

Shpesh mund të pyesni kufirin:

/ 1px * / td (kufiri-poshtë: 1px gri e fortë;)

Mund të lexoni më shumë për fuqinë e kufirit.

2. Si të vendosni gjerësinë dhe lartësinë e tabelës

Për zamovchuvannyam gjerësia dhe lartësia e tavolinës vynachaetsya në myst її seredkіv. Nëse gjerësia nuk është vendosur, atëherë ajo do të jetë e barabartë me gjerësinë e rreshtit (rreshtit) më të gjerë.

Gjerësia e tabelës dhe kolonës vendosur për gjerësi shtesë të fuqisë. Nëse tabela vendoset në tabelë (gjerësia: 100%;), atëherë gjerësia e tabelës do të jetë e barabartë me gjerësinë e bllokut të kontejnerit në të cilin është vendosur.

Vendosni gjerësinë e tabelave dhe kolonave në px ose %, për shembull:

Tabela (gjerësia: 600 px;) th (gjerësia: 20%;) td: fëmija i parë (gjerësia: 30%;)

Lartësia e tryezës mos vendosni. lartësia e rreshtave tabelat mund të manipulohen duke shtuar mbushje të sipërme dhe të poshtme tek elementët і . Nuk rekomandohet fiksimi i lartësisë për fuqi shtesë.

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

3. Si të vendosni sfondin e tabelës

Për zamovchuvannyam sfond tavoline dhe seredkіv prozory. Si një anë ose një bllok që pastron tryezën, lani sfondin, më pas dritaret do të shkëlqejnë përmes tryezës. Nëse sfondi i detyrave dhe për tabelat dhe për ato të mesme, atëherë në fushat e mbivendosjes, sfondi i tabelave dhe ato të mesme do të jenë të dukshme vetëm sfondi i atyre të mesit. Si sfond për tabelën në tërësi dhe її seredkіv mund të veprojë:
mbushje,
,
.

4. Kolonat e tabelës

Modeli i tabelës CSS është i fokusuar kryesisht në rreshtat (rreshtat) që janë formuar pas etiketës së ndihmës

. Në praktikë, ka luhatje, nëse është i nevojshëm formatimi i veçantë i kolonave, pasi është e mundur në mënyra fyese:

etiketa për ndihmë

Ju mund të vendosni sfondin për çdo numër postimesh;

prapa ndihmës së tabelës td: fëmija i parë, tabela td: përzgjedhësi i fëmijës së fundit, mund të vendosni stile për kolonën e parë ose të mbetur të tabelës (pas rreshtit të parë në mes të kokës së tabelës);

prapa ndihmës së tabelës td: përzgjedhës i fëmijës së ntë (rregulli për zgjedhjen e kolonave), mund të vendosni stile për çdo kolonë tabele.

Mund të lexoni më shumë rreth përzgjedhësve CSS.

5. Si të shtoni një titull tabele

Ju mund të shtoni një titull në tabelë për ndihmën e etiketës , Dhe për fuqi shtesë, yoga në anën e mbishkrimit mund të vendoset përpara tavolinës ose nën të. Për shtrirjen horizontale, teksti i titullit vendoset në rreshtimin e tekstit. Rënia.

...

Tabela nr. 1

Kompania	Q1	Q2	Q3	Q4

titulli (në anën e titullit: fundi; rreshtimi i tekstit: djathtas; mbushja: 10 px 0; madhësia e shkronjave: 14 px;) Mal. 2. Një shembull i titullit nën tabelë

6. Si të rregulloni hapësirën midis kornizave të mesit

Korniza në mes të tavolinave pas ndarjeve mbyllëse me një hendek të vogël. Po kështu, vendosni kufirin-kollaps: kolapsi për tabelat, atëherë hendeku do të shembet. Fuqia bie.

sintaksë

Tabela (kufi-collapse: kolaps;)
Mal. 3. Tavolina prapanicash

7. Si të rritet hapësira ndërmjet kornizave të mesit

Për fuqinë shtesë të hapësirës kufitare, mund të ndryshoni ndërmjet kornizave të mesme. Duke pasur parasysh fuqinë zastosovuetsya në tryezë si një e tërë. Rënia.

sintaksë

Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 pikselë 20 pikselë;) Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 px;)
Mal. 4. Tavolinë prapanicë me hapësira më të mëdha ndërmjet kornizave të mesit

8. Si të kapni tavolinat bosh

Fuqia e qelizave boshe ose do të tregojë qeliza boshe. Dіє tіlki në seredki, yakі mos mіstyat përmbajtjen be-yakoy. Nëse ka një sfond për kutinë e detyrave dhe tabela (border-collapse: collapse;) është vendosur për tabelën, atëherë butoni do të bashkëngjitet. Rënia.

Kompania	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabela (kufiri: 1 px solid #69c; kolapsi i kufirit: veçohet; qelizat boshe: fsheh;) th, td (kufiri: 2 px solid #69c;) Mal. 5. Prapa ngjitur në qendrën e zbrazët të tavolinës

9. Paraqitja e paraqitjes së tabelës për fuqi shtesë të paraqitjes së tabelës

Paraqitja e paraqitjes së tabelës përcaktohet nga një nga dy qasjet: rregullimi i paraqitjes ose paraqitjes automatike. Sipas rregullimit në këtë mënyrë, është e mundur të ndryshoni gjerësinë e tabelës midis gjerësisë së atyre të mesme. Fuqia nuk bie.

sintaksë

Tabela (paraqitja e tabelës: fikse;)

10. Paraqitjet më të mira të tavolinës

1. Minimalizëm horizontal

Tabelat horizontale - të gjitha tabelat, teksti në të cilin lexohet horizontalisht. Lëkura e ditës është një rresht okremy. Ju mund të dizajnoni tabela të ngjashme në një stil minimalist duke vendosur një kordon me dy piksel nën titullin e 1-të.

punonjës	Paga	Bonus	Mbikëqyrësi
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Eni
Joyce Ming	$200	$35	Andi
James A. Pentel	$175	$25	Eni

tabela (familja e shkronjave: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14 px; sfondi: i bardhë; gjerësia maksimale: 70%; gjerësia: 70%; kolapsi i kufirit: kolaps; teksti -radhis: majtas;) th (pesha e shkronjave: normale; ngjyra: #039; kufiri-fund: 2px solid #6678b1; mbushje: 10px 8px;) td (ngjyra: #669; mbushja: 9px 8px; tranzicioni: .3 s lineare;) tr: hover td (ngjyra: #6699ff;)

në numër i madh një rresht i një dizajni të tillë tabele e bën të lehtë leximin. Për të zgjidhur problemin, mund të shtoni një kordon me një piksel me elementë td.

Td (kufiri-fund: 1px solid #cccc; ngjyra: #669; mbushje: 9px 8px; tranzicioni: 0,3s linear;)

Shtimi i efektit: rri pezull për elementin tr për ta bërë më të lehtë leximin e tabelës, të dizajnuar në një stil minimalist. Kur rri pezull kursorin e mausit në mes, mesi të tjera dhe të njëjtat rreshta shihen në të njëjtën kohë, gjë që do të thjeshtojë procesin e shtimit të informacionit, sikur tabelat të mund të shihnin një spërkatje të kolonave.

th (pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px 15 px;) td (ngjyra: #669; kufiri në krye: 1 px solid #e8edff; mbushja: 10 px 15 px;) tr: hover td (sfondi: #e8edff ;)

2. Minimalizëm vertikal

Pavarësisht nga ato që janë të ngjashme me tabelat citohen rrallë, por jo më pak, tabelat janë të orientuara vertikalisht për kategorizim ose të ngjashme me përshkrimin e objekteve të paraqitura nga kolona. Mund t'i dekoroni në një stil minimalist, duke shtuar hapësira për të zgjeruar kolonat.

th(pesha e shkronjave: normale; kufiri-fund: 2px solid #6678b1; kufiri-djathtas: 30px solid #fff; kufiri-majtas: 30px solid #fff; ngjyra: #039; mbushja: 8px 2px;) td(kufiri- djathtas: 30 px solid #fff; kufiri-majtas: 30 px solid #fff; ngjyra: #669; mbushje: 12 px 2px;)

3. Stili “Boxed”.

Stili më i mirë për dizajnimin e tavolinave të të gjitha llojeve, i ashtuquajturi stil "box". Dosit pіdіbrati mirë skema e ngjyrave, Dhe më pas vendosni ngjyrën e sfondit për të gjitha mesin. Mos harroni të përforconi sediljen midis rreshtave, pasi të keni instaluar kordonin si shpërndarës.

th(madhësia e shkronjave: 13 px; pesha e shkronjave: normale; sfondi: #b9c9fe; kufiri i sipërm: 4 px solid #aabcfe; kufiri i poshtëm: 1 px solid #fff; ngjyra: #039; mbushja: 8 px;) td (sfondi : #e8edff; kufiri-fund: 1px solid #fff; ngjyra: #669; kufiri-lart: 1px transparent; mbushja: 8px;) tr: hover td (sfondi: #ccddff;)

Më i përshtatshëm - të njihni atë gamë ngjyrash, në mënyrë që të përputheni në mënyrë harmonike me faqen tuaj. Si një faqe me interes në grafikë dhe dizajn, do t'ju duhet të theksoni stilin tuaj.

Tabela (familja e shkronjave: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14 px; gjerësia maksimale: 70%; gjerësia: 70%; rreshtimi i tekstit: në qendër; kolapsi i kufirit: kolapsi ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1;) th (madhësia e shkronjave: 13px; pesha e shkronjave: normale; sfondi: #e8edff; kufiri-djathtas: 1px solid #9baff1; kufiri- majtas: 1px solid #9baff1; ngjyra: #039; mbushje: 8px;) td(sfondi: #e8edff; kufiri-djathtas: 1px solid #aabcfe; kufiri-majtas: 1px solid #aabcfe; ngjyra: #669; mbushja: 8px ;)

4. Zebra horizontale

Tabela zebra duket e këndshme dhe e dobishme. Ngjyrat shtesë për sfondin mund të shërbejnë si një e dhënë vizuale për njerëzit kur lexojnë tabela.

th (pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px 15 px;) td (ngjyra: #669; kufiri në krye: 1 px solid #e8edff; mbushja: 10 px 15 px;) tr: nth-child(2n) ( sfond: #e8edff;)

5. Stili i gazetës

Për të arritur të ashtuquajturin efekt gazete, mund të vendosni një kordon për elementët e tavolinave dhe të luani me ato të mesit në mes. Stili i lehtë dhe minimalist i gazetës mund të duket kështu: luani me skemën e ngjyrave, shtoni kordon, hapa, sfonde të ndryshme dhe efekt: rri pezull kur rri pezull mbi rresht.

Tabela (kufiri: 1px solid #69c;) th (pesha e shkronjave: normale; ngjyra: #039; kufiri-poshtë: 1px me pika #69c; mbushja: 12px 17px;) td (ngjyra: #669; mbushja: 7px 17px; ) tr: rri pezull td (sfondi: #ccddff;)

Tabela (kufiri: 1px solid #69c;) th (pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px;) td (ngjyra: #669; kufiri-lart: 1px me pika #fff; mbushja: 10 px; sfondi: #ccddff;) tr: rri pezull td (sfondi: #99bcff;)

Tabela (kufiri: 1px solid #6cf;) th (pesha e shkronjave: normale; madhësia e shkronjave: 13px; ngjyra: #039; transformimi i tekstit: shkronja të mëdha; kufiri djathtas: 1px solid #0865c2; kufiri-lart: 1px solid #0865c2; kufiri-majtas: 1px solid #0865c2; kufiri-poshtë: 1px solid #fff; mbushja: 20px;) td (ngjyra: #669; kufiri-djathtas: 1px me pika #6cf; mbushja: 10px 20px;)

6. Sfondi i tabelës

Nëse jeni duke kërkuar për një mënyrë unike dhe unike të projektimit të tabelave, zgjidhni një imazh ose foto të përshtatshme, siç qëndrojnë në ato tabela dhe vendosini ato si sfond të tabelave.

Png ") 98% 86% pa përsëritje;) th (pesha e shkronjave: normale; madhësia e shkronjave: 14 px; ngjyra: #339; mbushja: 10 px 12 px; sfondi: i bardhë;) td (ngjyra: #669; kufiri- sipër: 1px e bardhë e fortë; mbushje: 10px 12px; sfond: rgba(51, 51, 153, .2); tranzicioni: .3s;) tr: hover td(sfondi: rgba(51, 51, 153, .1); )