CSS: dizajn tryezë. shembuj të regjistrimit

Marrja tavolina me CSS - e mësimit interesante dhe të përgjegjshëm. Qasja në këtë biznes duhet për kompetencë, me njohuri të gjitha stilet e mundshme. Përveç kësaj, është e nevojshme të ketë një ndjenjë të bukurisë në mënyrë që të mos trembin off vizitorët e tyre të krijimtarisë.

Tabelat mund të transformojë pothuajse çdo gjë. dizajn të bukur përfshin përdorimin e kufijve CSS tavolina të projektimit, sfond tavolinë, sfond qelizë, hendeku midis tyre dhe më shumë. Konsideroni më themelore.

kufiri Tabela

CSS style table projektimit përfshin gjithmonë një lojë me një kufi (kornizë). Të gjitha tabelat e parazgjedhur nuk janë konturet frame. Kjo është, ajo është e barabartë me 0 pixels. Por kjo mund të korrigjohet në kufi të pronës.

Ju mund të specifikoni kornizë e jashtme për të gjithë tabelës:

Tabela {border: 3px solid black; }

Në sajë të kësaj linje në të gjitha tabelat në vend që përdor këtë stil është kornizë të zezë. Vini re se vetëm kufiri në skajet, por jo brenda tryezë. Për linjat qelizore dhe kornizë është specifikuar ndryshe.

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

Trashësia dhe ngjyra, ju mund të specifikoni ndonjë. Mbani në mend se kufijtë nuk janë dyfishuar kur splicing qelizat.

Fjala tregon një regjistrim të ngurta të vazhdueshëm. Ju mund të specifikoni vlera të tjera.

ajo është më e përdorur zakonisht kornizë solide, pasi ajo duket më tërheqës dhe nuk shkëpusin vëmendjen nga përmbajtja kryesore e faqes.

Prona kufitar mund të specifikohet edhe në bord. Kufiri mund të vendosen vetëm për sipër, poshtë, majtas ose anën e djathtë. Për shkak se në disa raste kjo nuk është një alternativë e mundshme me kornizë për të gjithë tabelën e në të njëjtën kohë.

table {border-top: 1px solid të kuqe; }

Kështu që ju mund të vendosni kornizë për krye të tabelës vetëm. Në mënyrë të ngjashme për çdo palë të tjera, në vend të shkruani vetëm të lartë: djathtas, majtas ose në fund.

header tabela

Tabela header mund të përcaktohet duke përdorur tag . Kjo tag mund të jetë në CSS për të regjistruar një shumë të pronave për gjobë-tuning. Dizajni Tabela CSS është e mirë për shkak se ajo është e mundur për të manovruar elementet e mënyrën që ju dëshironi.

Ky titull është shfaqur në të njëjtën mënyrë si një standard në librat (të tilla si "Tabela 1").

Ju mund të specifikoni vendndodhjen e titullit dhe të pronës caption-krah (krye ose në fund). Përafrimin e majtë apo të djathtë është përcaktuar nga ana e pronës text-align.

tavolina background

Historiku i tabelës mund të jetë çdo ngjyrë apo model. Color vendos një background-ngjyra. Emrat e pronave në përputhje të plotë me përdorime në fjalim. Kjo lehtëson ruajtjen shumë herë.

Ngjyra mund të specifikohet si emri, dhe encodings ndryshme. Përveç kësaj, ju mund të specifikoni në vijim:

• Transparent - transparente.
• Trashëgojnë - ngjyra është e njëjtë me atë të elementit mëmë.
• Fillestar - default.

Opsioni me transparencë mund të përdoret në ato raste ku të gjitha tabelat në tekstin në CSS dosjen janë bërë në një ngjyrë, por në këtë rast nuk ka nevojë.

Përveç kësaj, sfond mund të jetë një imazh. Për ta bërë këtë, në stilin e përshkruar pronën background-image. Rruga është si kjo:

url ( 'URL')

Rruga për file mund të jetë ose relative apo absolute.

Më e komplikuar mbushur mund të bëhet me një gradient:

• linear-gradient ();
• radial-gradient ();
• përsëritur-lineare-gradient () dhe përsëritur-radiale-gradient () - gradient përsëritet.

qelizë background

Përveç një sfond në përgjithësi, ju mund të specifikoni një sfond shirita në shtylla ose rreshta. Për regjistrimin e pronës është përdorur shumë shpesh, sepse ndarja vizual i linjave më të lehtë për të lexuar informacionin.

Përveç ndërrimin, dhe ju mund të specifikoni numrin e një kolonë të veçantë apo rresht. Për shembull si kjo:

• tr: n-fëmijë (edhe) {...} - specifikoni gërshetohet;
• TR: n-fëmijë (1) {...} - tregues i vetitë e një rradhë të caktuar;
• TD: n-fëmijë (edhe) {...} - një tregues i alternuara kolona;
• TD: n-fëmijë (1) {...} - nje tregues i vetitë e një kolonë të veçantë.

Përveç rend dhe numrat mund të specifikohen - i pari (TD: i pari-fëmijë) ose kaluar (TD: fundit-fëmijë).

Hendeku në mes të qelizave

Në CSS, Dizajn table ju lejon të hiqni hapësirat midis qelizave. By default ata janë. Për shembull, nëse keni vendosur kornizë në tabelë, pa vendosjen distancën midis kufijve, kjo do të jetë këtu ky rezultat.

Dakord, kjo nuk duket shumë e bukur dhe nuk është i përshtatshëm për të lexuar. Përdoruesit do të kenë gurgullimë në sytë për shkak të kësaj. Hiq këto boshllëqe mund të jetë duke shkruar vetëm një linjë të tillë në stilin tryezë:

Kufiri-kolaps: kolapsi

Por ajo gjithashtu ndodh që distanca, në të kundërtën, duhet të rritet. Për më tepër, madhësia e boshllëqet mund të specifikohet si në mes të kolonave dhe në mes të linjave. Për të treguar se një vlerë (në vend të rrëzohet):

Kufiri-kolaps: ndara

Por, një veprim i tillë do të tregojë se është e nevojshme për të ndarë qelizat. Siç ishte pjesa e tyre, tregohet pronën shtesë:

Kufiri-ndarje: 20px.

Nëse ju doni të specifikoni një distancë të ndryshëm në mes të rreshtave dhe kolonave, kjo tregon dy gjëra:

Kufiri-ndarje: 10px20px.

Dallimi në shfletues

Mbani në mend se në CSS tavolina projektimit mund të duken të ndryshme, në varësi të shfletuesit. Veçanërisht e keqe është rasti me versionet më të vjetra, që risitë në CSS nuk është i mbështetur.

Sa më sipër është një shembull i trashësi kornizë të vlerave dixhitale.

Për këtë shembull, trashësia e korniza për konstantet.

Stilet e kufirit të ndryshojnë në masë të madhe.

Prandaj, zhvillimi gjithmonë të shihni rezultatin në shfletues të ndryshme.

Në CSS tavolina të projektimit e rekomanduar për të kontrolluar llojin e shfletuesit. Veçanërisht problem i madh përdoret për të jetë për përdoruesit me versionet më të vjetra të Internet Explorer.

zhvilluesit shumë të avancuara mund të, në varësi të shfletuesit për të lidhur fotografi krejtësisht të ndryshme CSS. Dhe dikush bën një kontroll në çdo apo ndonjë stil të veçantë (klasë).

Shumica e problemeve lindin nga hijet.

CSS: Shembuj Tabela Format

Regjistrimi mund të jetë e ndryshme mjaft. E gjitha varet nga të gjithë vend dhe hartimin e saj. Të gjithë duhet të kombinohen dhe ngjyra të larmishme. Gjithashtu ai bën një rol dhe shije zhvilluesi i madh. Sense e bukurisë është e të gjithë të ndryshëm.

Ne u japim disa shembuj të tabelave të ndryshme. Shifra e mësipërme tregon përdorimin e anim dhe të luajë me ngjyrën e sfondit dhe kufirit.

Shumë do të jetë shembull interesant i dizajn të bukur zoti se nuk do të shkurtojë përdoruesit sy. Ky mishërim është e përshtatshme në pothuajse çdo situatë.

Skajet mund të bëhen harmonishëm. Ajo duket shumë e bukur.

përfundim

Siç mund ta shikoni, për paraqitjen e tabelave në CSS ka shumë mjete. Çdo parametër është gjithashtu një sasi të madhe të opsioneve me vlerë. Në qoftë se ju përdorni të gjitha në të njëjtën kohë, ju mund të krijojë kryevepra. Sidomos në qoftë se ju bëni dizajn adaptive për të gjithë shfletuesit.

Gjëja kryesore në hartimin - nuk e teproj me efekte. Çdo gjë duhet të bëhet në moderim. Në fillim, layout pëlqen të eksperimentojnë dhe të përdorin të gjitha njohuritë e tyre menjëherë. Si rezultat i tabelës janë prona oversaturated. Përpiquni të shmangni këto gabime.

Për më tepër, disa parametra mund të ndërhyjnë me njëri-tjetrin. Për shembull, nuk ka nevojë të përcaktojë ngjyrën e sfondit të tabelës, ndërsa në qoftë se nuk është vendosur ende imazh sfond, e cila do të përputhen me ngjyrën e specifikuar.