CSS: dylunio bwrdd. enghreifftiau o gofrestru

Gwneud tablau gyda CSS - y wers yn ddiddorol ac yn gyfrifol. Agwedd at y busnes hwn angen gymwys, gyda gwybodaeth am yr holl arddulliau posibl. Yn ogystal, mae angen i feddu ymdeimlad o harddwch er mwyn peidio â dychryn oddi ar eu hymwelwyr creadigrwydd.

Gall y tablau drawsnewid bron popeth. dyluniad hardd yn cynnwys y defnydd o ffiniau dablau CSS dylunio, cefndir bwrdd, cefndir cell, mae'r bwlch rhyngddynt a mwy. Ystyriwch y mwyaf sylfaenol.

ffin tabl

CSS dylunio arddull tabl bob amser yn cynnwys gêm gyda border (ffrâm). Nid yw pob un tablau diofyn yn cyfuchliniau ffrâm. Hynny yw, mae yn hafal i 0 picsel. Ond gall hyn gael ei gywiro gan y ffin eiddo.

Gallwch nodi y ffrâm allanol ar gyfer y bwrdd cyfan:

tabl {border: 3px solid du; }

Diolch i'r llinell hon o gwbl y tablau ar y safle sy'n defnyddio dull hwn yw ffrâm ddu. Noder bod y ffin yn unig ar yr ymylon, ond nid y tu mewn i'r tabl. Ar gyfer llinellau cell a ffrâm nodir fel arall.

th, td {border: du solid 3px;}

Mae trwch a lliw, gallwch nodi unrhyw. Cadwch mewn cof nad yw'r ffiniau yn cael eu dyblu wrth splicing celloedd.

Mae'r gair yn dynodi cofrestriad parhaus solet. Gallwch bennu gwerthoedd eraill.

mae'n cael ei ddefnyddio amlaf ffrâm solet, gan ei fod yn edrych yn fwy deniadol ac nid yw'n tynnu sylw oddi wrth y prif gynnwys y safle.

Gall eiddo y ffin yn cael ei nodi hefyd ar y bwrdd. Gall y ffin ond yn cael ei osod ar gyfer y top, gwaelod, chwith neu i'r ochr dde. Oherwydd mewn rhai achosion, nid yw'n opsiwn ymarferol gyda'r ffrâm ar gyfer y bwrdd cyfan ar unwaith.

tabl {border-top: 1px solid coch; }

Felly, gallwch osod y ffrâm ar gyfer frig y tabl yn unig. Yn yr un modd at unrhyw un arall, yn hytrach na dim ond ysgrifennu top: i'r dde, chwith neu waelod.

pennawd tabl

Gellir Tabl pennawd yn cael ei nodi gan ddefnyddio'r tag . Gall hyn tag yn y CSS i gofrestru llawer o eiddo ar gyfer mireinio. Mae'r dyluniad tabl CSS yn dda oherwydd ei bod yn bosibl i symud yr elfennau y ffordd yr ydych ei eisiau.

Mae'r teitl yn cael ei arddangos yn yr un ffordd fel safon mewn llyfrau (megis "Tabl 1").

Gallwch nodi lleoliad y pennawd ochr teitl ac eiddo (uchaf neu isaf). Alinio y chwith neu i'r dde yn cael ei ddiffinio gan yr eiddo testun-alinio.

tablau cefndir

Gall Cefndir y tabl fod yn unrhyw liw neu batrwm. Lliw yn gosod eiddo cefndir-lliw. Mae enwau y tai yn gwbl gyson â defnyddiau wrth siarad. Mae'n hwyluso storio nifer o weithiau.

Gall y lliw yn cael ei nodi fel enw, a gwahanol encodings. Yn ogystal, gallwch nodi y canlynol:

• Dryloyw - Dryloyw.
• Etifeddu - lliw yr un fath ag un elfen rhiant.
• Cychwynnol - diofyn.

Gall Opsiwn gyda thryloywder yn cael ei ddefnyddio yn yr achosion hynny lle mae'r holl dablau yn y testun yn y ffeil CSS yn cael eu gwneud mewn un lliw, ond yn yr achos hwn, nid oes angen.

Yn ogystal, efallai y bydd y cefndir fod yn ddelwedd. I wneud hyn, yn yr arddull a ragnodir eiddo cefndir-ddelwedd. Mae'r llwybr yn fel hyn:

url ( 'URL')

Efallai y bydd y llwybr at y ffeil fod naill ai'n berthynas neu absoliwt.

Gellir llenwi mwy cymhleth yn cael ei wneud gyda graddiant:

• llinol-graddiant ();
• rheiddiol-graddiant ();
• ailadrodd-llinol-graddiant () ac ailadrodd-rheiddiol-graddiant () - graddiant dro ar ôl tro.

cell cefndir

Yn ogystal â chefndir yn gyffredinol, gallwch nodi cefndir streipiog mewn colofnau neu resi. I gofrestru'r eiddo yn cael ei ddefnyddio yn aml iawn, oherwydd bod y gwahanu gweledol y llinellau yn haws i'w ddarllen gwybodaeth.

Yn ychwanegol at y alternation, a gallwch nodi nifer y colofn neu res penodol. Er enghraifft fel hyn:

• tr: nfed-plentyn (hyd yn oed) {...} - nodwch interlaced;
• tr: nfed-plant (1) {...} - arwydd o briodweddau rhes penodol;
• TD: nfed-plentyn (hyd yn oed) {...} - arwydd o ail colofnau;
• TD: nfed-plant (1) {...} - arwydd o briodweddau colofn penodol.

Heblaw y gall dilyniant a rhifau yn cael eu penodedig - y gyntaf (td: yn gyntaf-blentyn) neu ddiwethaf (td: olaf plentyn).

Mae'r bwlch rhwng celloedd

Yn CSS, dylunio tabl yn caniatáu i chi gael gwared ar y gofod rhwng celloedd. Yn ddiofyn y maent. Er enghraifft, os ydych yn gosod y ffrâm yn y tabl heb osod y pellter rhwng y ffiniau, bydd yn cael ei yma y canlyniad hwn.

Cytuno, nid yw'n edrych yn neis iawn ac nid yw'n gyfleus i ddarllen. Bydd defnyddwyr yn cael crychdonnau yn y llygaid oherwydd hyn. Tynnwch bylchau hyn yn gallu bod trwy ysgrifennu dim ond llinell o'r fath yn yr arddull tabl:

border-cwymp: cwymp

Ond mae hefyd yn digwydd bod y pellter, ar y groes, dylid ei gynyddu. Ar ben hynny, gall maint y bylchau yn cael ei nodi fel rhwng colofnau a rhwng y llinellau. I ddangos bod gwerth (yn lle cwympo):

border-cwymp: ar wahân

Ond bydd camau o'r fath yn nodi ei bod yn angenrheidiol i wahanu'r celloedd. Gan ei bod eu cyfran, nododd eiddo ychwanegol:

border-gofod: 20px.

Os ydych am bennu pellter wahanol rhwng y rhesi a cholofnau, mae'n dangos dau beth:

border-gofod: 10px20px.

Mae'r gwahaniaeth yn y porwyr

Cadwch mewn cof y gall byrddau dylunio yn yr CSS yn edrych yn wahanol, yn dibynnu ar y porwr. Yn enwedig yn ddrwg yn wir gyda fersiynau hŷn, nad yw arloesi mewn CSS yn cael ei gefnogi.

Mae'r uchod yn enghraifft o drwch ffrâm i werthoedd digidol.

Er enghraifft hon, trwch y fframiau ar gyfer y cysonion.

arddulliau y ffin hefyd yn gwahaniaethu'n fawr.

Felly, mae'r datblygiad bob amser yn gweld y canlyniad mewn gwahanol borwyr.

Yn CSS tablau dylunio a argymhellir i wirio y math o borwr. Yn arbennig o broblem fawr a ddefnyddir i fod i ddefnyddwyr gyda fersiynau hŷn o Internet Explorer.

Gall datblygwyr ddatblygedig iawn, yn dibynnu ar y porwr er mwyn cysylltu hollol wahanol ffeiliau CSS. A rhywun yn gwneud gwiriad ym mhob un neu ryw arddull arbennig (dosbarth).

Mae'r rhan fwyaf o broblemau yn codi o'r cysgodion.

CSS: Tabl Fformat Enghreifftiau

Gellir cofrestru fod yn amrywiol yn eithaf. Mae'r cyfan yn dibynnu ar y safle cyfan a'i ddyluniad. Dylai pob gael eu cyfuno a lliwiau variegated. Hefyd mae'n gwneud rôl a blas gwych datblygwr. Ymdeimlad o harddwch i gyd yn wahanol.

Rydym yn rhoi rhai enghreifftiau o'r gwahanol dablau. Mae'r ffigur uchod yn dangos y defnydd o wyneb i chwarae gyda lliw cefndir a border.

Bydd llawer yn enghraifft ddiddorol o ddylunio daclus prydferth na fydd yn torri'r defnyddwyr llygad. Mae'r ymgorfforiad yn briodol mewn bron unrhyw sefyllfa.

Gall y ymylon yn cael eu gwneud crwn. Mae'n edrych yn eithaf neis.

casgliad

Fel y gwelwch, ar gyfer y ymddangosiad y tablau yn CSS, mae llawer o offer. Mae pob paramedr hefyd yn llawer iawn o ddewisiadau werth. Os ydych yn ei ddefnyddio i gyd ar unwaith, gallwch greu campweithiau. Yn enwedig os ydych yn gwneud dylunio addasol ar gyfer yr holl borwyr.

Y prif beth yn y cynllun - peidiwch â gorwneud hi gydag effeithiau. Dylai popeth gael ei wneud yn gymedrol. Ar y dechrau, roedd y cynllun yn hoffi i arbrofi a defnyddio eu holl wybodaeth ar unwaith. O ganlyniad y tabl yn eiddo oversaturated. Ceisiwch osgoi gwallau hyn.

Ar ben hynny, efallai y bydd rhai paramedrau ymyrryd â'i gilydd. Er enghraifft, nid oes angen i nodi lliw cefndir y tabl, tra os oes yn dal i osod delwedd cefndir, a fydd yn gorgyffwrdd y lliw penodol.