CSS: disinn tabella. eżempji ta 'reġistrazzjoni

Nagħmlu tabelli CSS - ta 'lezzjoni interessanti u responsabbli. Approċċ għal dan in-negozju jeħtieġ li b'mod kompetenti, bl-għarfien mill-istili kollha possibbli. Barra minn hekk, huwa meħtieġ li jkollu sens ta 'sbuħija sabiex ma mbezza off viżitaturi kreattività tagħhom.

It-tabelli jistgħu jittrasformaw kważi kollox. beautiful disinn tinvolvi l-użu ta 'konfini tabelli CSS disinn, isfond mejda, l-isfond taċ-ċelloli, id-distakk bejniethom u aktar. Ikkunsidra l-aktar bażika.

fruntiera tabella

CSS disinn stil tabella dejjem tinvolvi logħba bi fruntiera (qafas). It-tabelli kollha inadempjenza mhumiex kontorni qafas. Jiġifieri, huwa ugwali għal 0 pixels. Iżda dan jista 'jiġi korrett bl-fruntiera proprjetà.

Tista 'tispeċifika l-qafas ta' barra għall-tabella sħiħa:

tabella {transkonfinali: 3px solidu iswed; }

Grazzi għal din il-linja fil-tabelli kollha fuq is-sit li juża dan l-istil huwa qafas iswed. Innota li l-fruntiera biss fuq it-truf, iżda mhux ġewwa l-tabella. Għal linji ta 'ċelluli u l-qafas speċifikat mod ieħor.

th, td {fruntiera: 3px Solidu iswed;}

Il-ħxuna u l-kulur, inti tista 'tispeċifika kwalunkwe. Wieħed iżomm f'moħħu li l-konfini ma rdoppja meta tagħqid ċelluli.

Il-kelma tindika reġistrazzjoni kontinwa solidu. Tista 'tispeċifika valuri oħra.

huwa l-aktar komunement użati frejm solidu, kif jidher aktar attraenti u ma jtellifx l-attenzjoni mill-kontenut prinċipali tas-sit.

proprjetà transkonfinali jistgħu jiġu speċifikati wkoll fuq il-bord. Il-konfini jistgħu jiġu stabbiliti biss għall-fuq, minn isfel, xellug jew lemin. Minħabba li f'xi każijiet mhuwiex għażla fattibbli mal-qafas għall-tabella sħiħa f'daqqa.

tabella {transkonfinali ta 'fuq: 1px solida aħmar; }

Allura inti tista 'tistabbilixxi l-qafas għall-quċċata tal-mejda biss. Bl-istess mod lil xi partijiet oħra, minflok tikteb biss aqwa: lemin, xellug jew tal-qiegħ.

header tabella

header tabella jista 'jiġi speċifikat bl-użu tag . Dan tag jistgħu jkunu fil-CSS li tirreġistra ħafna proprjetajiet għall-irfinar. Id-disinn tabella CSS hija tajba għaliex huwa possibbli li jimmanuvra l-elementi l-mod trid.

Dan it-titolu hija murija bl-istess mod bħala standard fil-kotba (bħal "Tabella 1").

Tista 'tispeċifika l-post tat-titolu u l-proprjetà caption-ġenb (fuq jew isfel). Allinjament ix-xellug jew dritt huwa definit mill-proprjetà test allinjament.

tabelli isfond

Sfond tat-tabella jista 'jkun kwalunkwe kulur jew mudell. Kulur tistabbilixxi proprjetà sfond bil-kulur. L-ismijiet tal-proprjetajiet li huma kompletament konsistenti ma 'użi fl-diskors. Hija tiffaċilita ħażna ħafna drabi.

Il-kulur jistgħu jiġu speċifikati bħala l-isem, u encodings differenti. Barra minn hekk, inti tista 'tispeċifika dan li ġej:

• Trasparenti - Trasparenti.
• Jirtu - kulur huwa l-istess bħal dak ta 'l-element ġenitur.
• Inizjali - kontumaċja.

Għażla bi trasparenza jistgħu jintużaw f'dawk il-każijiet fejn il-tabelli fit-test fil-fajl CSS huma magħmula fil-kulur wieħed, iżda f'dan il-każ m'hemmx bżonn.

Barra minn hekk, l-isfond jista 'jkun immaġini. Biex tagħmel dan, fl-istil preskritt proprjetà isfond image. Il-passaġġ huwa bħal dan:

url ( "URL")

Il-passaġġ għall-fajl jista 'jkun jew qarib jew assoluta.

imla aktar ikkumplikat jista 'jsir bil-gradjent:

• lineari-gradjent ();
• radjali-gradjent ();
• -Tirrepeti lineari-xaqliba () u jirrepeti-radjali-xaqliba () - gradjent ripetuta.

ċellula isfond

Minbarra l-isfond b'mod ġenerali, inti tista 'tispeċifika sfond strixxi fil-kolonni jew ringieli. Għar-reġistrazzjoni tal-proprjetà hija użata ħafna drabi, minħabba s-separazzjoni viżwali tal-linji aktar faċli biex jinqara informazzjoni.

Minbarra l-alternazzjoni, u inti tista 'tispeċifika in-numru ta' kolonna jew ringiela partikolari. Per eżempju bħal dan:

• tr: nth-tfal (anke) {...} - tispeċifika minsuġa;
• tr: nth-tfal (1) {...} - indikazzjoni tal-proprjetajiet ta 'ringiela partikolari;
• td: nth-tfal (anke) {...} - indikazzjoni ta 'kolonni jalterna;
• td: nth-tfal (1) {...} - indikazzjoni tal-proprjetajiet ta 'kolonna partikolari.

Minbarra sekwenza u n-numri jistgħu jiġu speċifikati - l-ewwel (td:-ewwel tarbija) jew l-aħħar (td: l-aħħar għat-tfal).

Id-distakk bejn iċ-ċelloli

Fil CSS disinn tabella jippermettilek li tneħħi l-ispazji bejn iċ-ċelluli. Permezz ta 'default huma. Per eżempju, jekk inti jistabbilixxu l-qagħda fit-tabella mingħajr ma jistabbilixxu d-distanza bejn il-konfini, se jkun hawn dan ir-riżultat.

Jaqblu, jidher mhux sbieħ ħafna u mhuwiex konvenjenti biex jinqara. Utenti se jkollhom anċillari fl-għajnejn minħabba dan. Neħħi dawn in-nuqqasijiet jistgħu jiġu billi tikteb biss tali linja fl-istil tabella:

fruntiera-kollass: kollass

Imma dan jiġri wkoll li d-distanza, għall-kuntrarju, għandu jiżdied. Barra minn hekk, id-daqs tal-lakuni jistgħu jiġu speċifikati bejn kolonni u bejn il-linji. Biex tindika li valur (minflok kollass):

fruntiera-kollass: separata

Imma din l-azzjoni se jindikaw li huwa neċessarju biex jiġu separati l-ċelluli. Kif kien sehemhom, indikat proprjetà addizzjonali:

fruntiera-ispazjar: 20px.

Jekk inti tixtieq li tispeċifika distanza differenti bejn l-ringieli kolonni, hija tindika żewġ affarijiet:

fruntiera-ispazjar: 10px20px.

Id-differenza fil-browsers

Wieħed iżomm f'moħħu li fil-CSS tabelli disinn tista 'tfittex differenti, jiddependi fuq il-browser. Speċjalment ħażina huwa l-każ mal-verżjonijiet anzjani, li innovazzjonijiet CSS ma hija sostnuta.

Dan t'hawn fuq huwa eżempju ta 'ħxuna qafas għall-valuri diġitali.

Għal dan l-eżempju, il-ħxuna tal-kwadri għall-kostanti.

stili transkonfinali jvarjaw ukoll ħafna.

Għalhekk, l-iżvilupp dejjem tara r-riżultat fil-browsers differenti.

Fil CSS tabelli disinn rakkomandat li tiċċekkja l-tip tal-browser. Partikolarment problema kbira użati biex ikunu għall-utenti bi verżjonijiet anzjani ta 'l-Internet Explorer.

iżviluppaturi avvanzati ħafna jistgħu, jiddependi fuq il-browser li jgħaqqdu fajls CSS kompletament differenti. U xi ħadd jagħmel verifika f'kull jew xi stil partikolari (klassi).

Ħafna mill-problemi jinqalgħu mill-dellijiet.

CSS: Eżempji Tabella Format

Reġistrazzjoni tista 'tiġi pjuttost varjata. Dan kollu jiddependi fuq is-sit kollu u d-disinn tagħha. Kollha għandhom jingħaqdu u jiġu kuluri varjegat. Wkoll jagħmel rwol u togħma kbira iżviluppatur. Sens ta 'sbuħija hija kollha differenti.

Aħna tagħti xi eżempji tat-tabelli differenti. Il-figura ta 'hawn fuq turi l-użu ta' tilt u jilagħbu bil-kulur fl-isfond u l-fruntieri.

Ħafna se jkun eżempju interessanti ta 'disinn pulita sbieħ li mhux se tnaqqas l-utenti għajnejn. Dan inkarnazzjoni huwa xieraq fi kważi kull sitwazzjoni.

It-truf jistgħu jsiru fit-tond. Huwa jistenna pretty sbieħ.

konklużjoni

Kif tistgħu taraw, għad-dehra tat-tabelli fil CSS hemm ħafna għodod. Kull parametru huwa wkoll ammont kbir ta 'għażliet ta' valur. Jekk tuża dan kollu f'daqqa, inti tista 'toħloq kapolavuri. Speċjalment jekk inti tagħmel disinn adattivi għall-browsers.

Il-ħaġa prinċipali fid-disinn - ma overdo dan b'effetti. Kollox għandu jsir fil-moderazzjoni. Għall-ewwel, it-tqassim simili għall-esperimentazzjoni u jużaw l-għarfien kollu tagħhom immedjatament. Bħala riżultat tat-tabella huma proprjetajiet oversaturated. Jippruvaw jevitaw dawn l-iżbalji.

Barra minn hekk, xi parametri jistgħu jinterferixxu ma 'xulxin. Per eżempju, m'hemmx bżonn li jiġi speċifikat il-kulur fl-isfond tat-tabella, filwaqt jekk għad hemm stabbilit immaġni isfond, li se jikkoinċidu l-kulur speċifikat.