CSS: Taflan hönnun. dæmi um skráningu

Gerð töflur með CSS - af kennslustund áhugavert og ábyrgð. Aðkoma að þessum viðskiptum þarf að competently, með þekkingu á öllum mögulegum gerðum. Þar að auki, það er nauðsynlegt að eiga tilfinningu fyrir fegurð í því skyni að hræða burt sköpun gestir þeirra.

Töflurnar geta umbreyta næstum allt. Falleg hönnun felur í sér notkun CSS borðum mörk hönnun, borð bakgrunni, klefi bakgrunni, bilið milli þeirra og fleira. Íhuga the undirstöðu.

töfluramma

CSS borð stíl hönnun felur alltaf leik með landamæri (ramma). Allar sjálfgefnar töflur eru ekki útlínur ramma. Það er, það er jafn 0 punkta. En þetta er hægt að leiðrétta með eign landamærunum.

Þú getur tilgreint ytri ramma fyrir allt borðið:

Tafla {landamæri: 3 px solid svart; }

Þökk sé þessari línu á öllum borðum á staðnum sem notar þennan stíl er svartur rammi. Athugið að aðeins landamæri á brúnir, en ekki inni í töflunni. Fyrir frumulínum og ramma tilgreint annað.

th, TD {landamæri: 3 px solid svart;}

Þykkt og lit, hægt að tilgreina hvaða. Hafðu í huga að mörkin eru ekki tvöfaldast við þættaðir frumur.

Orðið táknar traustan samfellda skráningu. Þú getur tilgreint önnur gildi.

það er oftast notaður solid ramma, eins og það lítur meira aðlaðandi og ekki afvegaleiða athyglina frá aðal innihald af the staður.

Eign landamæri getur verið skilgreindur einnig á borðinu. Mörkin Aðeins er hægt að stilla fyrir efst, neðst, til vinstri eða hægri hlið. Vegna þess að í sumum tilvikum er það ekki fýsilegur kostur með ramma fyrir allt borðið í einu.

Í töflu {border-efstu: 1px solid rautt; }

Svo er hægt að stilla ramma fyrir ofan töfluna aðeins. Á sama hátt að öðrum aðila, í stað þess bara að efst rita hægri, vinstri eða neðst.

tafla haus

Tafla haus getur verið skilgreindur með því að nota skipunin . Þetta merki getur verið í CSS til að skrá mikið af eignum til fínstillingu. The CSS borð hönnun er gott vegna þess að það er hægt að maneuver þeim þáttum eins og þú vilt.

Þessi titill birtist á sama hátt og staðall í bókum (eins og "töflu 1").

Þú getur tilgreint staðsetningu á titlinum og eignir yfirskrift hlið (efst eða neðst). Aðlaga vinstri eða hægri er skilgreindur af hótelinu text-align.

bakgrunnur töflur

Bakgrunnur þess að í töflunni getur verið hvaða lit eða mynstur. Litur setur eign background-litur. Nöfn eiginleika í fullu samræmi við notkun í ræðu. Það auðveldar að geyma mörgum sinnum.

Liturinn getur verið skilgreindur sem nafn, og mismunandi encodings. Að auki er hægt að tilgreina eftirfarandi:

• Gegnsætt - Gegnsætt.
• Erfa - litur er það sama og að foreldri frumefni.
• Byrjunar - sjálfgefið.

Valkostur með gagnsæi er hægt að nota í þeim tilvikum þar sem öll borðin í texta í CSS skrá eru gerðar í einum lit, en í þessu tilfelli að það er engin þörf.

Að auki, the bakgrunnur getur verið mynd. Til að gera þetta, í stíl mælt background-mynd hótelinu. Slóðin er svona:

url ( 'URL')

Slóðin að skránni má annaðhvort ættingi eða alger.

Flóknara fylla er hægt að gera með stigli:

• línuleg-gradient ();
• Radial-gradient ();
• endurtaka-línuleg-stigul () og endurtaka ferlið-geislalæga-gradient () - stigull endurtekin.

bakgrunnur klefi

Á meðal þess sem bakgrunn almennt, getur þú tilgreint röndóttur bakgrunnur í dálka eða raðir. Fyrir skráningu eignarinnar er notað mjög oft, vegna þess að sjón aðskilnað línum auðveldara að lesa upplýsingar.

Í viðbót við víxl, og er hægt að tilgreina fjölda tiltekins dálki eða línu. Til dæmis eins og þetta:

• tr: n-ta-barn (jafnvel) {...} - tilgreina flétta;
• tr: n-ta-barn (1) {...} - vísbending af þeim eiginleikum tiltekins röð;
• TD: n-ta-barn (jafnvel) {...} - upplýsingar um skiptis dálka;
• TD: n-ta-barn (1) {...} - upplýsingar af þeim eiginleikum tiltekins dálki.

Að auki röð og tölur geta verið tilgreind - fyrsta (TD: fyrsta barn) eða síðasta (td: síðustu barn).

Bilið á milli frumna

Í CSS, borð hönnun gerir þér kleift að fjarlægja bil á milli frumna. Sjálfgefið að þeir eru. Til dæmis, ef þú setur ramma í töflunni án þess að setja fjarlægð á milli marka, verður það að vera hér þetta niðurstaðan.

Sammála, það lítur ekki mjög gott og það er ekki þægilegt að lesa. Notendur munu hafa gára í augum vegna þessa. Fjarlægja þessar eyður má með því að skrifa bara svona línu í töflunni stíl:

border-fall: fall

En það gerist líka að fjarlægðin, þvert á móti, ætti að auka. Þar að auki, the stærð af the eyður getur verið skilgreindur sem milli dálka og á milli línanna. Að gefa til kynna að gildi (í stað hrynja):

border-fall: Sérstakur

En slík aðgerð mun gefa til kynna að það sé nauðsynlegt að aðskilja frumur. Eins og það var hlutdeild þeirra, kynna fleiri eignir:

border-bil: 20px.

Ef þú vilt að tilgreina mismunandi fjarlægð milli raða og dálka, táknar það tvennt:

border-bil: 10px20px.

Munurinn á vöfrum

Hafðu í huga að í CSS hönnun töflur má líta mismunandi, allt eftir því vafranum. Sérstaklega slæmt er málið með eldri útgáfur, sem nýjungar í CSS er ekki studd.

Hér að ofan er dæmi um ramma þykktum til stafræna gildum.

Í þessu dæmi, þykkt efni í öllum glugganum fyrir fastar.

stíll landamæri mismunandi einnig mjög.

Þess vegna hefur þróun sjá alltaf niðurstöðuna í mismunandi vöfrum.

Í CSS hönnun töflur mælt með því að athuga hvaða vafra. Sérstaklega stórt vandamál er notað til að vera að notendur með eldri útgáfur af Internet Explorer.

Mjög háþróaður verktaki getur, eftir því vafranum til að tengja alveg mismunandi CSS skrár. Og einhver gerir ávísun í hverjum eða einhverja ákveðna stíl (class).

Flest vandamál koma upp úr skugganum.

CSS: Tafla Format Examples

Skráning geta verið mjög mismunandi. Það veltur allt á alla síðuna og hönnun. Allir ættu að sameina og Variegated litum. Einnig gerir það miklu hlutverki og bragð verktaki. Sense af fegurð er allt öðruvísi.

Við gefum nokkur dæmi af hinum ýmsu borðum. Myndin hér að ofan sýnir notkun halla og leika með bakgrunnslitnum og landamæri.

Margir verður áhugavert dæmi um fallega snyrtilegur hönnun sem mun ekki skera augað notendum. Þessi útfærsla er viðeigandi í næstum hvaða aðstæðum.

Brúnir hægt að gera ávöl. Það lítur nokkuð gott.

niðurstaða

Eins og þú geta sjá, fyrir útliti taflnanna í CSS það eru mörg verkfæri. Hver breytu er einnig a gríðarstór magn af gildi valkostur. Ef þú notar það allt í einu, getur þú búið til meistaraverk. Sérstaklega ef þú aðlagandi hönnun fyrir öllum vöfrum.

The aðalæð hlutur í hönnun - ekki ofleika það með áhrifum. Allt ætti að vera í hófi. Í fyrsta lagi er skipulag að gera tilraunir og nota alla þekkingu sína strax. Sem afleiðing af töflunni eru oversaturated eignir. Reyndu að forðast þessar villur.

Þar að auki, sum breytur geta truflað hvort annað. Til dæmis, það er engin þörf á að tilgreina bakgrunnslitinn á borðið, en ef það er enn stillt bakgrunnsmynd sem skarast tilgreint litinn.