CSS: la dezajno de tabloj. Ekzemploj de dezajno

Farante tabulojn uzante CSS estas interesa kaj grava aktiveco. Alproksimiĝo al ĉi tiu afero devas esti kompetente, kun scio pri ĉiuj ebloj de stiloj. Krome vi bezonas senti belecon, por ne timigi vizitantojn kun via kreemo.

En tabloj vi povas transformi preskaŭ ĉion. La bela dezajno de la tabloj de CSS signifas uzi la dezajnon de limoj, la fono de la tablo, la fono de ĉeloj, la interspaco inter ili kaj multe pli. Ni konsideru la plej bazan.

Tabulo limo

La CSS stilo de la dezajno ĉiam signifas ludi kun limo. Ĉiuj tabloj ne estas limigitaj defaŭlte. Tio estas, ĝi estas 0 rastrumeroj. Sed ĉi tio povas esti riparita uzante la landlima propraĵo.

Vi povas specifi eksterajn limojn por la tuta tablo:

Tabulo {limo: 3px solida nigra; }

Danke al ĉi tiu linio, ĉiuj tabloj en la retejo, kie ĉi tiu stilo estas uzata, havos nigran limon. Notu, ke la limo estas nur ĉe la randoj, sed ne ene de la tablo. Por ĉeloj kaj vicoj, la kadro estas specifita malsame.

Th, td {limo: 3px solida nigra;}

Vi povas specifi ajnan dikecon kaj koloron. Memoru, ke limoj ne duobligas, kiam alfiksantaj ĉeloj.

La vorto solida signifas solida dezajno. Vi povas specifi aliajn valorojn.

Plej ofte, la solida kadro estas uzata, ĉar ĝi aspektas pli alloga kaj ne deturnas atenton de la ĉefa enhavo de la retejo.

La landlima propraĵo ankaŭ povas esti specifita laŭ la direktoj. La rando povas esti aro nur por la supro, malsupro, maldekstre aŭ dekstra flanko. Pro tio ke en iuj kazoj la elekto kun kadro por la tuta tablo ne taŭgas.

Tablo {limo-supro: 1px solida ruĝa; }

Do vi povas agordi la kadron nur por la supro de la tablo. Simile, por iuj aliaj partioj, simple anstataŭ supre skribi: dekstre, maldekstre aŭ malsupre.

Tabelo titolo

La titolo de la tablo povas esti specifita per la etikedo <ĉapitolo>. En ĉi tiu etikedo, vi povas skribi en CSS multajn posedaĵojn por pli bonfine. En CSS, la dezajno de tabloj estas bona ĉar vi povas movi elementojn kiel vi volas.

Ĉi tiu kaplinio montras same kiel ĝi estas norma en libroj (ekzemple "Tabelo 1").

Vi povas ankaŭ specifi la lokon de ĉi tiu kaplinio kun la subskribo-posedaĵo (supro aŭ malsupre). La maldekstra aŭ dekstra alineo estas specifita per la tekst-aligna propraĵo.

Tabelo fono

La fono de la tablo povas esti ajna koloro aŭ ŝablono. La koloro estas fiksita per la fonkolora propraĵo. La nomoj de proprietoj plene respondas al tiuj uzataj parolantoj. Ĉi tio faciligas enmemorigi multajn fojojn.

La koloro povas esti specifita laŭ nomo kaj per diversaj kodoj. Krome, vi povas specifi la jenajn:

• Travidebla - la travidebleco de la elemento.
• Heredaĵo - la koloro estas la sama kiel la gepatra elemento.
• Komenca estas la defaŭlta valoro.

Varianto kun travidebleco povas esti uzata en tiuj kazoj kiam ĉiuj tabloj en la teksto en la CSS-dosiero estas faritaj en unu koloro, sed en ĉi tiu kazo ne ekzistas tia bezono.

Krome, la fono povas esti bildo. Por fari tion, la stilo preskribas la fonon-bildon. La vojo indikas kiel ĉi tiu:

Url ('URL')

La vojo al la dosiero povas esti aŭ relativa aŭ absoluta.

Pli kompleksa plenigo povas esti farita per gradiento:

• Lineara-gradiento ();
• Radial-gradiento ();
• Ripeto-lineara-gradiento () kaj ripetanta-radial-gradiente () - ripetante la gradienton.

Ĉelo fono

Aldone al la fono en la aro, vi povas specifi alternan fonon en kolumnoj aŭ vicoj. Por registriĝo, ĉi tiu propraĵo estas tre ofte uzita, ĉar la vida disigo de linioj faciligas legi informon.

Krom interkapti, vi povas specifi la nombron de specifa kolumno aŭ vico. Ekzemple, kiel ĉi tio:

• Tr: nth-child (even) {...} - specifu la alternon de linioj;
• Tr: nth-child (1) {...} - specifas la posedaĵon de aparta linio;
• Td: nth-child (even) {...} - indiko de la interkaptado de kolumnoj;
• Td: nth-child (1) {...} - specifas la posedaĵon de aparta kolumno.

Aldone al la interleksado kaj nombroj, vi povas specifi la unua (td: unua-infano) aŭ la lasta (td: last-child).

Spacado inter ĉeloj

En CSS, la dezajno de tabloj permesas al vi forigi la malplenojn inter ĉeloj. Defaŭlte, ili estas. Ekzemple, se vi specifas kadron en tablo sen fiksi la distancon inter la limoj, tiam ĉi tiu estas la rezulto.

Konsentu, ĝi ne aspektas tre bela kaj ne konvena por legado. Uzantoj estos en la okulo ruffle pro tio. Vi povas forigi ĉi tiujn breĉojn skribante jenajn laŭ la stilo de la tablo:

Limo-kolapso: kolapso

Sed ĝi ankaŭ okazas, ke la distanco bezonas pliiĝi. Kaj la grandeco de intervaloj povas esti specifita inter inter kolumnoj kaj inter linioj. Por fari tion, specifu la sekvan valoron (anstataŭ kolapsi):

Limo-kolapso: apartaj

Sed ĉi tiu ago indikos, ke vi bezonas apartigi ĉelojn. Kiel disigi ilin, estas indikita per plia propraĵo:

Limo-interspaco: 20px.

Se vi volas specifi malsaman distancon inter vicoj kaj kolumnoj, tiam du valoroj estas specifitaj:

Limo-interspaco: 10px20px.

Diferenco en retumiloj

Memoru, ke en CSS, la aspekto de tabloj eble aspektas malsama, depende de la retumilo. La situacio estas speciale malbona kun pli malnovaj versioj, kiujn novigoj en CSS ne subtenas.

Supre estas ekzemplo de la dikeco de la kadro por ciferecaj valoroj.

Jen ekzemplo de la dikeco de la kadro por konstantaj.

Kadraj stiloj ankaŭ estas tre malsamaj.

Sekve, kiam evoluigado, ĉiam rigardu la rezulton al malsamaj retumiloj.

En CSS, ĝi rekomendas fari tablonan desegnon per kontrolado de la tipo de retumilo. La plej granda problemo estis kun uzantoj kun pli malnovaj versioj de Interreto Esploristo.

Tre progresintaj programistoj povas konekti tute malsamajn CSS-dosierojn laŭ la retumilo. Kaj iu faras ĉekojn en ĉiu aŭ iu aparta stilo (klaso).

Plej multaj problemoj ŝprucas kun ombroj.

CSS: la dezajno de tabloj, ekzemploj

La dezajno povas esti tre diversa. Ĉio dependas de la retejo ĝenerale kaj ĝia dezajno. Ĉio devas esti kombinita kaj ne kolora. Same, la gusto de la programisto ankaŭ ludas gravan rolon. La sento de beleco estas malsama por ĉiuj.

Ni donas ekzemplojn de malsamaj tabloj. La figuro supre montras la uzon de la kapo kaj la ludo kun la fono kaj limoj de koloro.

Multaj interesiĝos pri ekzemplo de bela neta dezajno, kiu ne tranĉos okulojn al la uzantoj. Ĉi tiu opcio taŭgas en preskaŭ ajna situacio.

Eroj povas esti rondigitaj. Ĝi aspektas bele bela.

Konkludo

Kiel vi povas vidi, por krei la aspekton de tabloj en CSS ekzistas granda nombro da iloj. Ĉiu parametro ankaŭ havas grandegan nombron de variantoj de valoroj. Se vi uzas ĉion ĉi tuj, vi povas krei ĉefverkojn. Precipe se vi faras adapta dezajno por ĉiuj retumiloj.

La ĉefa afero en registriĝo ne devas overdo ĝin per efikoj. Ĉio devas esti farita laŭ modereco. Unue, aranĝaj projektistoj ŝatas eksperimenti kaj uzi sian tutan scion samtempe. Kiel rezulto, la tabloj estas supersaturate propraĵoj. Provu eviti ĉi tiujn erarojn.

Plie, iuj parametroj povas malhelpi unu la alian. Ekzemple, ne necesas specifi la fonkoloro de la tablo, dum se daŭre starigis fono bildo, kiu koincidas la precizigita koloro.