CSS: Lentelė dizainas. pavyzdžiai registravimo

Priėmimo stalai su CSS - pamokų įdomus ir atsakingas. Požiūris į šį verslą reikia kvalifikuotai, su žiniomis apie visų galimų stilių. Be to, būtina turėti grožio jausmą, kad nebūtų atbaidyti savo kūrybiškumą lankytojų.

Lentelėse gali paversti beveik viską. Gražus dizainas apima CSS lentelių dizaino ribas, stalo fone, ląstelių fone, tarp jų ir daugiau tarpo naudoti. Apsvarstykite svarbiausio.

lentelės kraštinės

CSS stalo stilius dizainas visada apima žaidimą su sienos (rėmas). Visi numatytieji lentelės nėra kontūrai rėmas. Tai yra, jis yra lygus 0 taškų. Bet tai galima ištaisyti nekilnojamojo turto sienos.

Galite nurodyti išorinį rėmą už visą lentelę:

lentelėje {sienos: 3PX juodos; }

Dėka šios linijos visuose apie svetainę, kuri naudoja šį stilių lentelėmis yra juoda rėmo. Atkreipkite dėmesį, kad tik sienų kraštų, bet ne viduje stalo. Dėl ląstelių linijų ir rėmo nenurodyta kitaip.

-oji, TD {sienos: 3PX juodos;}

Storis ir spalva, galite nurodyti, bet. Turėkite omenyje, kad ribos yra ne dvigubai, kai sandūrų ląsteles.

Žodis reiškia tvirtą nuolatinę registraciją. Galite nurodyti kitas vertybes.

jis dažniausiai naudojamas tvirtą rėmą, kaip ji atrodo patrauklesnė ir neturi atitraukti dėmesio nuo pagrindinio turinio svetainėje.

sienos nuosavybė gali būti nurodyta taip pat ant lentos. Kontūro galima nustatyti tik viršuje, apačioje, kairėje ar dešinėje pusėje. Nes kai kuriais atvejais tai nėra įmanoma variantas su visam stalo rėmo vienu metu.

lentelėje {sienos-top: 1px solid raudona; }

Taigi galite nustatyti už tik lentelės viršuje rėmo. Panašiai kaip ir kitų šalių, o ne tik viršų rašo: dešinėn, kairėn arba apačioje.

lentelėje antraštė

antraštė lentelė gali būti detalizuojamos naudojant žymę . Ši žyma gali būti CSS registruoti savybių koregavimo daug. CSS stalo dizainas yra gerai, nes tai galima manevruoti elementus taip, kaip norite.

Šis pavadinimas rodomas tuo pačiu būdu, kaip standartą, knygų (pavyzdžiui, "1 lentelės").

Galite nurodyti pavadinimą ir turto antraštę pusėje (viršuje arba apačioje) vietą. Lygiavimas į kairę arba į dešinę yra apibrėžta turto text-align.

fono stalai

Fono lentelės gali būti bet kokios spalvos ar modelio. Spalva nustato objekto background-color. Iš savybės visiškai atitinka naudojimo kalboje pavadinimai. Jis palengvina saugoti daug kartų.

Spalva gali būti nurodytas kaip pavadinimas, ir skirtingų koduočių. Be to, galite nurodyti taip:

• Skaidri - skaidrus.
• Paveldėti - spalva yra tokia pati, kaip patronuojančios elementas.
• Pradinis - numatytoji.

Variantas su skaidrumo gali būti naudojama tais atvejais, kai visi į CSS failą tekstą stalai yra pagaminti iš vienos spalvos, tačiau šiuo atveju nėra reikalo.

Be to, fonas gali būti paveikslėlis. Norėdami tai padaryti, į stiliaus nustatyta background-image turtą. Kelias yra panašus į šį:

URL ( 'url')

Kelias iki failo, gali būti arba giminaitis ar absoliutus.

Daugiau sudėtinga užpildyti galima padaryti su nuolydžiu:

• linijinis-gradientas ();
• radialinė-gradientas ();
• pakartojant-linijinį-gradientą () ir kartojimo-radialinis-gradientą () - gradientas pakartotas.

fonas ląstelių

Be apskritai fone, galite nurodyti, dryžuotas fonas stulpelių ar eilučių. Įregistruoti nuosavybės naudojamas labai dažnai, nes vaizdo atskyrimas linijų lengviau skaityti informaciją.

Be kaitos, ir jūs galite nurodyti tam tikro stulpelio ar eilutės numerį. Pavyzdžiui, kaip šis:

• TR: n-ojo vaiko (net) {...} - nurodykite persipina;
• tr: n-ojo vaikas (1) {...} - nurodomos tam tikros eilės savybių;
• td: n-ojo vaikas (net) {...} - apie kintamosios stulpelius nuoroda;
• td: n-ojo vaikas (1) {...} - iš tam tikro stulpelio savybių nuoroda.

Be to seka ir numeriai gali būti nurodyta - pirmas (TD: pirmas vaikas) arba paskutinės (TD: paskutinės vaikas).

Tarpas tarp ląstelių

CSS, stalo konstrukcija leidžia pašalinti tarpus tarp ląstelių. Pagal nutylėjimą jie yra. Pavyzdžiui, jei jūs nustatote į stalo rėmas nenustatę atstumą tarp ribų, jis bus čia tai rezultatas.

Sutikite, atrodo nėra labai gražus ir tai nėra patogu skaityti. Vartotojai turės ripple į akis, nes tai. Pašalinti šias spragas, gali būti raštu tik tokį liniją stalo stilius:

sienos griūties: sutraukti

Tačiau ji taip pat atsitinka, kad atstumas, priešingai, turėtų būti padidinta. Be to, spragas dydis gali būti nurodyta kaip tarp kolonų ir tarp eilučių. Norėdami nurodyti, kad tai yra, vertės (o ne žlugti):

sienos griūties: atskiras

Tačiau tokie veiksmai bus nurodyta, kad būtina atskirti ląsteles. Kaip tai buvo jų dalis, nurodyta papildomą turtą:

sienų tarpai: 20px.

Jei norite nurodyti kitą atstumą tarp eilučių ir stulpelių, tai reiškia du dalykus:

sienų tarpai: 10px20px.

Skirtumas tarp naršyklių

Turėkite omenyje, kad CSS dizainas stalai gali skirtis, priklausomai nuo naršyklės. Ypač blogai yra su senesnės versijos, kad naujovės CSS nepalaikoma.

Aukščiau minimas atvejis yra karkasinių storių skaitmeninių dydžių pavyzdys.

Šiame pavyzdyje, iš už konstantų rėmų storis.

pasienio stilius taip pat labai skiriasi.

Todėl plėtra visada matyti skirtingų naršyklių rezultatą.

CSS dizainas stalai rekomenduojama patikrinti naršyklės tipą. Ypač didelė problema būdavo vartotojams su senesnės versijos "Internet Explorer".

Labai pažangios kūrėjai gali, priklausomai nuo naršyklės prisijungti visiškai skirtingus CSS failus. Ir nors daro čekį kiekvienoje arba kai konkretus stilius (klasė).

Dauguma problemų kyla iš šešėlių.

CSS: lentelės forma pavyzdžiai

Registracija gali būti gana įvairios. Viskas priklauso nuo visos svetainės ir jos dizainą. Viskas turėtų būti derinama ir margas spalvas. Taip pat ji daro didelį vaidmenį ir skonio kūrėjas. Jausmas grožis yra visi skirtingi.

Mes pateikti keletą įvairių lentelių pavyzdžius. Paveikslėlyje pavaizduotos Tentiniai naudotis ir žaisti su fono spalva ir sienos.

Daugelis bus įdomus pavyzdys gražus tvarkingas dizaino, kad bus neišpjauti akių vartotojams. Šis įgyvendinimo variantas yra tinkamas beveik bet padėties.

Kraštai gali būti padarytos suapvalintos. Tai atrodo gana gražus.

išvada

Kaip matote, už stalų išvaizdą CSS yra daug įrankių. Kiekvienas parametras taip pat yra didžiulis vertės variantų. Jei jūs jį naudoti visą iš karto, galite sukurti šedevrai. Ypač jei tai prisitaikanti dizainą visose naršyklėse.

Svarbiausia projektavimo - nepersistenkite su efektais. Viskas turi būti daroma saikingai. Pradžioje išdėstymas patinka eksperimentuoti ir iš karto naudoti visas savo žinias. Kaip lentelės rezultatas yra persotinta savybės. Stenkitės vengti šių klaidų.

Be to, kai kurie parametrai gali trukdyti viena kitai. Pavyzdžiui, nereikia nurodyti fono spalvą lentelės, o jei vis dar yra nustatyti fono paveikslėlį, kuris sutaps nurodytą spalvą.