CSS: tabelûntwerp. foarbylden fan registraasje

Making tabellen mei CSS - fan les nijsgjirrich en ferantwurdlik. Oanpak fan dizze saken moatte competently, mei kennis fan alle mooglike stilen. Dêrneist is it nedich om te besitte in gefoel fan skientme om net te bang meitsje út harren kreativiteit besikers.

De tafels kinne omfoarmje hast alles. Moaie design giet it om it brûken fan CSS tabellen design grinzen, tafel eftergrûn, sel eftergrûn, de kleau tusken har en mear. Tink oan de meast basale.

tabel grins

CSS tafel style design altyd giet it om in spultsje mei in grins (frame). Alle standert Tables binne gjin kontoeren frame. Dat is, it is lyk oan 0 pixels. Mar dit kin wurde korrizjearre troch it eigendom grins.

Jo kinne opjaan de bûtenste frame foar it hiele tafel:

tabel {grins: 3px solid swart; }

Mei tank oan dit line op alle tafels op de webside dy't brûkt dizze styl is swarte frame. Tink derom dat de grins allinnich op de rânen, mar net binnen de tafel. Foar sel linen en frame oantsjutte oars.

th, td {grins: 3px solid swart;}

De dikte en kleur, kinne jo oanjaan hokker. Hâld yn gedachten dat de grinzen binne net ferdûbele doe't splicing sellen.

It wurd denotes in solide trochrinnende registraasje. Jo kinne oantsjutte oare wearden.

wurdt it meast brûkt bêst frame, sa't it liket oantrekliker en net ôfliede omtinken fan 'e wichtichste ynhâld fan de side.

grins property spesifisearre wurde ek op it boerd. De grins kin allinnich ynsteld wurde foar de boppekant, ûnderkant, links of rjochts kant. Omdat yn guon gefallen is it net in helber opsje mei it frame foar de hiele tafel yn ien kear.

table {border-top: 1px solid read; }

Sa kinne jo ynstelle it frame foar de top fan 'e tafel allinne. Sa ek mei alle oare partijen, ynstee fan krekt boppe Write-: rjochts, lofts, of boaiem.

tabel header

Tabel header spesifisearre wurde mei help fan de tag . Dizze tag kin wêze yn de CSS te registrearjen in soad eigenskippen foar goede-tuning. De CSS tabelûntwerp is goed omdat it mooglik is om himsels de eleminten de wei dy't jo wolle.

Dizze titel wurdt werjûn op deselde wize as standert yn boeken (lykas "tabel 1").

Jo kinne opjaan de lokaasje fan 'e titel en eigendom caption-side (boppe of ûnderkant). Aligning de linker of rjochter wurdt definearre troch it eigendom text-align.

eftergrûn tables

Eftergrûn fan 'e tafel kin wêze eltse kleur of patroan. Kleur bepaalt in wenning eftergrûn-kleuren. De nammen fan 'e eigenskippen folslein oerienstimming mei brûkt yn spraak. It fasilitearret it opslaan protte kearen.

De kleur kin oantsjutte as de namme, en ferskillende Wetter yn Weststellingwerf. Dêrneist kinne jo oanjaan it folgjende:

• Transparante - transparant.
• Erven - kleur is itselde as dat fan de âlder elemint.
• Initieel - standert.

Opsje mei transparânsje kin brûkt wurde yn dy gefallen dêr't alle tafels yn 'e tekst yn de CSS triem wurde makke yn ien kleur, mar yn dit gefal is der gjin ferlet.

Boppedat, de eftergrûn kin in byld. Om dit te dwaan, yn 'e styl foarskreaun background-image eigendom. It paad is like this:

url ( 'URL')

It paad nei de triem kin wêze itsij relative of absolute.

Mear yngewikkelde fill kin dien wurde mei in kleur ferin:

• lineêr-gradient ();
• radiale-gradient ();
• repeating-rjochtlinige-gradient () en repeating-radiaal-gradient () - gradient werhelle.

eftergrûn sel

Njonken in eftergrûn yn it algemien, kinne jo in streekbûnte eftergrûn yn kolommen of rigen. Foar registraasje fan it pân wurdt brûkt hiel faak, omdat de byldzjende ôfskieding fan 'e rigels makliker te lêzen ynformaasje.

Njonken de alternation, en kinne jo oanjaan it oantal fan in bepaald kolom of rige. Bygelyks like this:

• tr: Nth-child (noch) {...} - oantsjutte Interlaced;
• tr: Nth-child (1) {...} - yndikaasje fan de eigenskippen fan in bepaalde rige;
• td: Nth-child (noch) {...} - in yndikaasje fan ôfwikseljende kolommen;
• td: Nth-child (1) {...} - in yndikaasje fan de eigenskippen fan in bepaald kollum.

Neist folchoarder en getallen kinne oantsjutte - de earste (td: earst-child) of last (td: last-bern).

It gat tusken de sellen

Yn CSS, tabelûntwerp kinne jo fuortsmite de romtes tusken sellen. Standert se binne. Bygelyks, as jo ynstelle it frame yn de tabel sûnder it ynstellen fan de ôfstân tusken de grinzen, dan sil hjir dit resultaat.

Iens, it liket net sa lekker en it is net handich om te lêzen. Brûkers sille hawwe Famke Fan Myn Dreamen yn 'e eagen, om reden fen dizze. Smyt dizze lakunes kin wêze troch it skriuwen krekt sa'n line yn de tabel styl:

border-collapse: collapse

Mar it bart ek dat de ôfstân, krekt oarsom, moatte wurde ferhege. Boppedat, de omfang fan de gatten kinne oantsjutte as tusken pylders en tusken de rigels. Om oan te jaan dat in wearde (ynstee ynstoarte):

border-collapse: apart

Mar sa'n aksje sil derop wize dat it needsaaklik is om te skieden fan de sellen. Sa't it wie harren oandiel, oanjûn ekstra eigendom:

border-spacing: 20px.

As jo wolle opjaan in oare ôfstân tusken de rigen en kolommen, it jout twa dingen:

border-spacing: 10px20px.

It ferskil yn de browsers

Hâld foar eagen dat yn de CSS design tabellen kin sjogge oars, ôfhinklik fan 'e browser. Benammen bad is it gefal mei âldere ferzjes, dat ynnovaasjes yn CSS wurdt net stipe.

It boppesteande is in foarbyld fan frame dikten oan digitale wearden.

Foar dit foarbyld, de dikte fan 'e ramten foar de konstanten.

grins styles ek ferskille sterk.

Dêrom, de ûntwikkeling altyd sjogge it resultaat yn ferskillende browsers.

Yn CSS design tabellen oanrikkemandearre om te kontrolearjen it type fan 'e browser. Benammen grut probleem foarhinne oan brûkers mei âldere ferzjes fan Internet Explorer.

Hiel avansearre ûntwikkelers kinne, ôfhinklik fan 'e browser te ferbinen hiel oare CSS triemmen. En immen makket in sjek yn eltse of wat bysûndere styl (klasse).

De measte problemen ûntsteane út de skaden.

CSS: Table Format Foarbylden

Registraasje kin hiel fariearre. It alles hinget ôf fan de hiele side en syn ûntwerp. Alle moatte wurde kombinearre en bûnte kleuren. Ek it makket in grutte rol en smaak developer. Sense of skientme is alles oars.

Wy jouwe in pear foarbylden fan de ferskate tafels. De figuer hjirboppe toant it brûken fan tilt en boartsje mei de eftergrûnkleur en grins.

In soad sil nijsgjirrich foarbyld fan moaie neat design, dat sil net snije it each brûkers. Dizze útfiering is passend yn hast eltse situaasje.

De rânen kinne wurde makke ôfrûne. It sjocht der frij aardich.

konklúzje

Sa't jo sjen kinne, foar it ferskinen fan de tafels yn CSS binne der in protte ark. Elts parameter is ek in grutte bedrach fan value opsjes. As jo brûke it op slach, kinne jo oanmeitsje topstikken. Benammen as jo dwaan adaptieve ûntwerp foar alle browsers.

It wichtichste ding yn de ûntwerp - net overdo it mei effekten. Alles moat dien wurde met mate. Earst, de opmaak graach te eksperimintearjen en brûke al harren kennis fuortendaliks. As gefolch fan 'e tafel steane oversaturated eigenskippen. Besykje foar te kommen dizze fouten.

Boppedat, guon parameters kinne it funksjonearjen dêrfan by inoar. Bygelyks, der is gjin needsaak om te spesifisearjen de eftergrûnkleur fan 'e tafel, wylst as der wurdt noch set eftergrûnôfbylding, dat sil oerlaapje de oantsjutte kleur.