CSS: mahai diseinua. matrikula adibide

ikasgai interesgarria eta arduratsua - CSS taulak egitea. Enpresa hau Approach behar dituzte, ahalik eta estilo guztietako ezagutza. Horrez gain, beharrezkoa da, edertasunaren zentzu bat edukitzeko agindua ez off beldurtu sormena bisitariak ere.

Mahaiak ia dena eraldatu daiteke. Beautiful diseinua CSS taulak diseinu mugak, mahai hondo, zelula hondo, horiek eta gehiago arteko aldea erabilera dakar. Demagun oinarrizkoenak ere.

mahai mugan

CSS taula style diseinua beti joko bat dakar ertza (fotograma) batera. taulak lehenetsi guztiak ez dira ingurumari markoa. Hau da, 0 pixel berdina da. Baina hori ezin jabetza mugatik zuzendu daiteke.

mahai osoarentzat kanpoko markoa zehaztu dezakezu:

mahai {mugatik: 3px solidoa beltza; }

Estilo hori erabiltzen duen gunean mahai guztiak lerro horri esker beltz markoa da. Kontuan mugatik bakarrik ertzetan, baina ez mahai barruan dagoela. zelula-lerroak eta egitura zehaztu.

garren, td {mugatik: 3px beltza ona;}

lodiera eta kolorea, edozein jar dezakezu. Gogoan mugak ez daude bikoiztu denean zelula splicing.

Hitza etengabeko erregistroa sendo bat adierazten du. beste balio zehatz dezakezu.

da gehien erabiltzen den markoa sendoa, itxura erakargarriagoa eta ez du arreta galaraz gunearen edukira batetik.

haraindiko jabetza ere zehaztu ahal izango dira taula gainean. muga baino ezin goian, behean ezarri, ezkerreko edo eskuineko aldean. Zeren eta, kasu batzuetan, ez da mahai osoan markoaren aldi berean aukera bideragarria.

mahai {mugatik-top: 1 px solidoa gorria; }

Beraz mahai bakarra goialdean markoa ezar dezakezu. Era berean, beste edozein alderdi, ordez goian idatzi: eskuinera, ezkerrera edo behean.

mahai goiburua

Table header zehaztu daiteke etiketa erabiliz. Etiketa honen fintzeko propietate asko erregistratu CSS ere izan daiteke. CSS taula diseinu ona da, posible da elementu maniobra modu nahi duzun delako.

Titulu hori liburu estandar bat modu berean bistaratuko da (adibidez, "1. taula").

du izenburua eta jabetza-oina aldeko (goian edo behean) kokalekua zehatz dezakezu. ezkerreko lerrokatzea edo eskubidea da jabetza testu-lerrokatzea definitzen.

hondo-taulak

mahaiaren Aurrekariak edozein kolore edo eredu izan daiteke. Kolore jabetza background-color bat ezartzen du. guztiz hitzaldian erabilerak koherentea propietate izenak. hainbat aldiz gordetzeko errazten du.

Kolorea egon izena, eta kodeketak ezberdinak bezala zehaztu daiteke. Horrez gain, honako hauek zehaztu dezakezu:

• Gardena - gardena.
• Heredatu - kolore guraso elementu hori bera da.
• Hasierako - lehenetsia.

gardentasunez Aukera kasuetan CSS fitxategian testuan mahai guztiak kolore bat egiten dira erabil daiteke, baina kasu honetan ez da beharrezkoa da.

Horrez gain, atzealdean irudi bat izan daitezke. Horretarako, estilo agindutako hondo-irudi jabetza dira. Bidea hau bezalakoa da:

URL ( 'URL')

fitxategira bidea bai erlatiboa edo absolutua egon daitezke.

Zailagoa bete beharreko gradiente batekin egin daiteke:

• lineal-gradientea ();
• radial-gradientea ();
• errepikatuz-lineala-gradientea () eta errepikatzea-radial-gradientea () - gradient errepikatzen.

hondo zelula

orokorrean atzeko gain, marra zutabeak edo errenkadak atzealde bat jar dezakezu. higiezinaren matrikula egiteko erabiltzen da, oso maiz, ikus-lerroen errazagoa bereizketa informazioa irakurri delako.

txandakatzen gain, eta zutabe edo ilara jakin baten kopurua zehaztu dezakezu. Hau bezalako Adibidez:

• tr: n-ume (are) {...} - zehaztu gurutzelarkatutako;
• tr: n-alaben (1) {...} - ilara jakin baten ezaugarriak zantzurik;
• td: n-ume (are) {...} - zutabeak txandakatuz zantzurik bat;
• td: n-alaben (1) {...} - zutabe jakin baten propietate neurria adierazten du.

Gainera sekuentzia eta zenbakiak zehaztu daiteke - lehen (td: lehen seme-alaba) edo azken (td: azken-haur).

zelula arteko aldea

CSS gain, mahai diseinu ahalbidetzen zelula arteko espazioak kentzeko duzu. Berez diren. Adibidez, taula honetan markoaren zehazten baduzu mugak arteko distantzia ezarri gabe, hemen izango da emaitza hau.

Ados, ez da itxura oso polita eta ez da komeni irakurtzeko. Erabiltzaileak begiak horregatik ere Ganbara izango dute. Kendu hutsuneak horiek besterik hala nola mahai estiloan lerro bat idatziz izan daiteke:

mugatik-kolapso: kolapso

Baina gertatzen da ere distantzia hori, aitzitik, handitu behar dira. Gainera, hutsuneak tamaina izango zutabeen artean eta lerro artean bezala zehaztu daiteke. adierazteko balio batera (ordez kolapso):

mugatik-kolapso: bereizi

Baina, hala nola ekintza beharrezkoa dela zelulak bereizteko agertuko da. Beren share zen bezala, adierazitako jabetza osagarriak:

mugatik-tartea: 20px.

errenkada eta zutabe artean ezberdinak distantzia bat zehaztu nahi baduzu, bi gauza asko esan du:

mugatik-tartea: 10px20px.

nabigatzaile aldea

Gogoan CSS diseinu taulak beste itxura bat, nabigatzailearen arabera izan. Bereziki txarra bertsio zaharragoak kasua da, CSS berrikuntzak hori ez da onartzen.

Aurrekoez markoa balioak digitalera lodierak adibidea da.

Adibide honetan, konstanteak marko lodiera.

ertz-estilo ere guztiz desberdinak dira.

Beraz, garapen beti ikusi nabigatzaile desberdinetan emaitza.

CSS diseinu taulak gomendatzen nabigatzaile mota egiaztatzeko. Bereziki erabilitako arazo handi Internet Explorer bertsio zaharragoak dituzten erabiltzaileek nahi izan.

developers oso aurreratuak daitezke, nabigatzailearen arabera CSS fitxategiak erabat ezberdinak konektatzeko. Eta norbaitek bakoitzeko txeke bat edo batzuk estilo berezia (klase) egiten du.

Gehienek arazoak itzalak sortzen.

CSS: Table Formatu Adibideak

Izen-ematea nahiko askotakoak izan daitezke. Guztiak araberakoa on the gune osoan eta bere diseinua. Guztiak konbinatu behar eta variegated koloreak. Era handia rol eta zapore sustatzailearen bat egiten du. edertasunaren zentzu guztietan desberdina da.

hainbat taulak adibide batzuk emango ditugu. Goiko irudian okertu erabilera erakusten du, eta atzeko kolorea eta mugatik jolasteko.

Asko diseinu txukun eder hori ez da izango moztu begi erabiltzaile adibide interesgarria izango da. Isla honetan ia edozein egoera egokia da.

ertzetan egin ahal izango da biribildu. Nahiko polita dirudi.

ondorio

Ikusten duzun bezala, taulak itxura CSS egiteko ez tresna asko daude. parametro bakoitzak balio aukera-kopuru handi bat ere. hori guztia erabiltzen baduzu aldi berean, maisulanak sor dezakezu. Batez ere egiten baduzu diseinu moldatzaile nabigatzaile guztientzat.

diseinua gauza nagusia - ez overdo efektuak. Dena neurriz egin behar da. Hasiera batean, diseinua gustatzen esperimentatu eta berehala beren ezagutza guztiak erabili. mahai baten ondorioz oversaturated propietate dira. Saiatu akats hauek saihesteko.

Gainera, zenbait parametro elkarri eragin dezakete. Adibidez, ez dago zehaztu beharrik atzeko kolorea mahaiaren, ez dago oraindik atzeko irudia, bertan zehaztutako kolorea gainjarri egingo ezarrita badago bitartean.