CSS: tafel ontwerp. voorbeelde van registrasie

Maak tafels met CSS - van les interessant en verantwoordelik. Benadering tot hierdie sake moet bekwaam, met kennis van al die moontlike style. Daarbenewens is dit nodig om 'n gevoel van skoonheid in orde nie af te skrik hul kreatiwiteit besoekers besit.

Die tafels kan byna alles te omskep. Pragtige ontwerp behels die gebruik van CSS tafels ontwerp grense, tafel agtergrond, sel agtergrond, die gaping tussen hulle en nog baie meer. Dink aan die mees basiese.

tafel grens

CSS tafel styl ontwerp behels altyd 'n spel met 'n grens (raam). Alle standaard tafels is nie van kontoere raam. Dit wil sê, dit is gelyk aan 0 pixels. Maar dit kan reggestel word deur die eiendom grens.

Jy kan die buitenste raam vir die hele tafel spesifiseer:

tafel {grens: 3px soliede swart; }

Danksy hierdie lyn op al die tafels op die terrein wat hierdie styl gebruik is swart raam. Let daarop dat slegs die grens op die kante, maar nie binne die tafel. Vir sellyne en raam anders vermeld.

ste, td {grens: 3px soliede swart;}

Die dikte en kleur, kan jy enige spesifiseer. Hou in gedagte dat die grense nie verdubbel word wanneer splitsing selle.

Die woord dui op 'n stewige deurlopende registrasie. Jy kan ander waardes spesifiseer.

dit is die mees algemeen gebruik soliede raam, as dit lyk meer aantreklik en nie die aandag aflei van die inhoud van die webtuiste.

grens eiendom kan ook gespesifiseer word op die bord. Die grens kan slegs ingestel word vir die bo, onder, links of regs. Want in sommige gevalle is dit nie 'n haalbare opsie met die raam vir die hele tafel in 'n keer.

tafel {grens-top: 1px solid rooi; }

Sodat jy kan die raam vir die top van net die tabel. Net soos enige ander partye, in plaas van net bo skryf: regs, links of onderkant.

tafel kop

Tafel kop kan gespesifiseer word met behulp van die tag . Hierdie merker kan wees in die CSS om 'n baie eiendom te fine-tuning registreer. Die CSS tafel ontwerp is goed, want dit moontlik is om die elemente te maneuver die manier waarop jy wil.

Hierdie titel is vertoon in die dieselfde manier as 'n standaard in boeke (soos "Table 1").

Jy kan die ligging van die titel en eiendom titel-kant (bo of onder) spesifiseer. Aanpassing van die linker-of die regterkant word gedefinieer deur die eiendom text-align.

agtergrond tafels

Agtergrond van die tafel kan enige kleur of patroon wees. Kleur stel 'n eiendom agtergrond-kleur. Die name van die eienskappe ten volle in ooreenstemming met gebruike in spraak. Dit fasiliteer baie keer stoor.

Die kleur kan gespesifiseer word as die naam, en verskillende enkoderings. Daarbenewens, kan jy die volgende spesifiseer:

• Deursigtige - deursigtig.
• Erf - kleur is dieselfde as dié van die ouer element.
• Aanvanklike - verstek.

Opsie met deursigtigheid gebruik kan word in daardie gevalle waar al die tafels in die teks in die CSS-lêer is gemaak in een kleur, maar in hierdie geval is daar geen behoefte.

Daarbenewens kan die agtergrond 'n beeld wees. Om dit te doen, in die styl voorgeskryf agtergrond-beeld eiendom. Die pad is soos volg:

url ( 'URL')

Die pad na die lêer kan óf relatiewe of absolute wees.

Meer ingewikkeld vul kan gedoen word met 'n helling:

• lineêre-helling ();
• radiale-helling ();
• herhaal-lineêre-helling () en herhaal-radiale-helling () - helling herhaal.

agtergrond sel

In bykomend tot 'n agtergrond in die algemeen, kan jy 'n gestreepte agtergrond in kolomme of rye spesifiseer. Vir registrasie van die eiendom is baie dikwels gebruik, omdat die visuele skeiding van die lyne makliker om inligting te lees.

In bykomend tot die afwisseling, en jy kan die getal van 'n spesifieke kolom of ry spesifiseer. Byvoorbeeld soos volg:

• tr: nde-kind (selfs) {...} - spesifiseer interlaced;
• tr: nde-kind (1) {...} - aanduiding van die eienskappe van 'n bepaalde ry;
• td: nde-kind (selfs) {...} - 'n aanduiding van afwisselende kolomme;
• td: nde-kind (1) {...} - 'n aanduiding van die eienskappe van 'n bepaalde kolom.

Behalwe volgorde en getalle kan gespesifiseer word - die eerste (td: eerste-kind) of laaste (td: laaste-kind).

Die gaping tussen die selle

In CSS, tafel ontwerp kan jy die ruimtes tussen die selle te verwyder. By verstek is hulle. Byvoorbeeld, as jy die raam in die tabel uiteengesit sonder die opstel van die afstand tussen die grense, dit sal hier gevolg word.

Stem saam, dit lyk nie baie mooi en dit is nie maklik om te lees. Gebruikers sal rimpeleffek in die oë as gevolg van hierdie te hê. Verwyder hierdie gapings kan wees deur te skryf net so 'n lyn in die tabel styl:

grens-ineenstorting: ineenstorting

Maar dit gebeur ook dat die afstand nie, inteendeel, verhoog moet word. Daarbenewens kan die grootte van die gapings gespesifiseer as tussen kolomme en tussen die lyne. Om aan te dui dat 'n waarde (in plaas ineenstort):

grens-ineenstorting: aparte

Maar so 'n aksie sal aandui dat dit nodig is om die selle te skei. As dit was hul aandeel, aangedui bykomende eiendom:

grens-spasiëring: 20px.

As jy wil 'n ander afstand tussen die rye en kolomme te spesifiseer, dui dit op twee dinge:

grens-spasiëring: 10px20px.

Die verskil in die blaaier

Hou in gedagte dat in die CSS ontwerp tafels verskillende mag lyk, na gelang van die leser. Veral sleg is die geval met ouer weergawes, wat innovasies in CSS nie ondersteun word.

Bogenoemde is 'n voorbeeld van 'n raam diktes om digitale waardes.

Vir hierdie voorbeeld, die dikte van die rame vir die konstantes.

grens style verskil ook baie.

Daarom is die ontwikkeling sien altyd die gevolg in verskillende blaaiers.

In CSS ontwerp tafels aanbeveel om die tipe leser te gaan. Veral groot probleem wat gebruik word om te wees vir gebruikers met ouer weergawes van Internet Explorer.

Baie gevorderde ontwikkelaars kan, afhangende van die leser om heeltemal ander CSS lêers te verbind. En iemand maak 'n tjek in elk of 'n paar spesifieke styl (klas).

Die meeste probleme ontstaan as gevolg van die skadu.

CSS: tabelformaat Voorbeelde

Registrasie kan nogal gewysig word. Dit hang alles af van die hele terrein en sy ontwerp. Alle moet gekombineer en bont kleure. Ook dit maak 'n groot rol en geur ontwikkelaar. Gevoel van skoonheid is al die verskillende.

Ons gee 'n paar voorbeelde van die verskillende tafels. Die figuur hierbo toon die gebruik van kantel en speel met die agtergrond kleur en grens.

Baie sal interessant voorbeeld van 'n pragtige netjiese ontwerp wat nie die oog gebruikers sal sny nie. Hierdie verpersoonliking is van toepassing in bykans enige situasie.

Die rand kan afgeronde gemaak. Dit lyk mooi mooi.

gevolgtrekking

Soos jy kan sien, vir die voorkoms van die tafels in CSS daar is baie instrumente. Elke parameter is ook 'n groot hoeveelheid van die waarde opsies. As jy dit gebruik almal op een slag, kan jy meesterstukke te skep. Veral as jy doen adaptive ontwerp vir alle blaaiers.

Die belangrikste ding in die ontwerp - oordoen dit nie met effekte. Alles moet gedoen word in moderering. Op die eerste, die uitleg wil om te eksperimenteer en onmiddellik gebruik al hul kennis. As gevolg van die tafel is oorversadigde eienskappe. Probeer om hierdie foute te vermy.

Daarbenewens kan 'n paar parameters inmeng met mekaar. Byvoorbeeld, daar is geen rede om te spesifiseer die agtergrond kleur van die tafel, terwyl as daar is nog beeld agtergrond, wat die gespesifiseerde kleur sal oorvleuel stel.