CSS: Ipinapakita ng table na disenyo. mga halimbawa ng pagpaparehistro

Ang pagsasagawa ng table na may CSS - ng araling kawili-wili at responsable. Diskarte sa negosyo na ito kailangan upang competently, na may kaalaman sa lahat ng posibleng mga estilo. Bilang karagdagan, ito ay kinakailangan upang angkinin ang isang pakiramdam ng beauty para hindi upang takutin off ang kanilang pagiging malikhain bisita.

Ang mga talahanayan ay maaaring ibahin ang anyo ang halos lahat ng bagay. Magandang disenyo ay nagsasangkot ng paggamit ng CSS mga talahanayan disenyo hangganan, table background, cell background, ang puwang sa pagitan ng mga ito at higit pa. Isaalang-alang ang pinaka-basic.

border ng talahanayan

CSS talahanayan style na disenyo palaging nagsasangkot ng isang laro na may isang hangganan (frame). Lahat ng default talahanayan ay hindi contours frame. Iyon ay, ito ay katumbas ng 0 pixels. Ngunit ito ay maaaring naitama sa pamamagitan ng hangganan ng ari-arian.

Maaari mong tukuyin ang mga panlabas na frame para sa buong table:

table {border: 3px solid black; }

Salamat sa linya na ito sa lahat ng mga table sa mga site na gumagamit ng mga ito estilo ay itim na frame. Tandaan na ang hangganan lamang sa mga gilid, ngunit hindi sa loob ng table. Para sa mga linya ng cell at frame tinukoy kung hindi man.

th, td {border: 3px solid black;}

Ang kapal at kulay, maaari mong tukuyin ang anumang. Isaisip na ang mga hangganan ay hindi nadoble kapag splicing cells.

Ang salitang nagsasaad ng isang matatag na tuloy-tuloy na pagpaparehistro. Maaari mong tukuyin ang iba pang mga halaga.

ito ay pinaka-karaniwang ginagamit solid frame, pati na mukha itong mas kaakit-akit at hindi makagulo ng pansin mula sa pangunahing nilalaman ng site.

hangganan ng ari-arian ay maaaring tinukoy din sa board. boundary ay maaari lamang i-set para sa itaas, ibaba, kaliwa o kanang bahagi. Dahil sa ilang mga kaso ito ay hindi isang magagawa opsyon na may mga frame para sa buong mesa sabay-sabay.

table {border-top: 1px solid na pula; }

Kaya maaari mong i-set ang frame para sa mga tuktok ng talahanayan lamang. Katulad nito sa anumang iba pang partido, sa halip na lamang itaas ay isulat mo: karapatan, kaliwa o ibaba.

header ng talahanayan

Table header ay maaaring tinukoy gamit ang mga tag . Ang tag na ito ay maaaring maging sa CSS upang magrehistro ng isang pulutong ng mga katangian para sa fine-tuning. Ang CSS disenyo talahanayan ay mabuti dahil ito ay posible upang mapaglalangan ang mga elemento sa paraang nais mo.

Ang pamagat na ito ay ipinapakita sa parehong paraan tulad ng isang pamantayan sa mga aklat (tulad ng "Table 1").

Maaari mong tukuyin ang lokasyon ng mga pamagat at ari-arian caption-side (itaas o ibaba). Pagpapantay sa kaliwa o kanan ay natutukoy ng mga ari-arian text-align.

talahanayan background

Background ng talahanayan ay maaaring maging anumang kulay o pattern. Kulay ay nagtatakda ng isang ari-arian background-kulay. Ang mga pangalan ng mga ari-arian ganap na pare-pareho sa mga gamit sa pananalita. Ito facilitates pag-iimbak ng maraming beses.

Ang kulay ay maaaring tinukoy bilang ang pangalan, at iba't ibang mga pag-encode. Bilang karagdagan, maaari mong tukuyin ang mga sumusunod:

• Transparent - Transparent.
• Manahin - kulay ay ang parehong bilang na ng elemento ng magulang.
• Initial - default.

Option may transparency ay maaaring magamit sa mga kaso kung saan ang lahat ng mga talahanayan sa ang teksto sa CSS file ay ginawa sa isang kulay, ngunit sa kasong ito hindi na kailangan.

Sa karagdagan, ang background ay maaaring maging isang imahe. Upang gawin ito, sa estilo inireseta property background-image. Ang path na ay tulad nito:

url ( 'URL')

Ang path sa file ay maaaring maging alinman sa kamag-anak o absolute.

Higit pang mga komplikadong fill ay maaaring gawin na may gradient:

• linear-gradient ();
• radial-gradient ();
• pag-uulit-linear-gradient () at pag-uulit-radial-gradient () - gradient ng paulit-ulit.

background cell

Bilang karagdagan sa isang background sa pangkalahatan, maaari mong tukuyin ang isang may mga guhit na background sa mga haligi o mga hilera. Para sa pagpaparehistro ng ari-arian ay ginagamit napakadalas, dahil ang visual na paghihiwalay ng mga linya mas madaling basahin impormasyon.

Bilang karagdagan sa mga alternation, at maaari mong tukuyin ang bilang ng isang partikular na hanay o hilera. Halimbawa tulad nito:

• tr: nth-anak (kahit) {...} - tukuyin interlaced;
• tr: nth-anak (1) {...} - indikasyon ng ang mga katangian ng isang partikular na hanay;
• td: nth-anak (kahit) {...} - isang pahiwatig ng alternating mga haligi;
• td: nth-anak (1) {...} - isang pahiwatig ng ang mga katangian ng isang partikular na hanay.

Bukod sa pagkakasunod-sunod at mga numero ay maaaring tinukoy - ang unang (td: una-anak) o huling (td: huling-anak).

Ang agwat sa pagitan ng mga selula

Sa CSS, table na disenyo ay nagbibigay-daan sa iyo upang alisin ang puwang sa pagitan ng mga cell. Sa pamamagitan ng default ang mga ito. Halimbawa, kung itinakda mo ang frame sa table na walang-set ang distansya sa pagitan ng mga hangganan, ito ay magiging dito sa resultang ito.

Sumang-ayon, mukhang hindi masyadong maganda at ito ay hindi maginhawa upang basahin. Magkakaroon ang mga user ripple sa mga mata dahil dito. Alisin ang mga gaps ay maaaring maging sa pamamagitan ng pagsusulat lamang tulad ng isang linya sa ang estilo ng talahanayan:

border-pagbagsak: pagbagsak

Ngunit ito rin ang mangyayari na ang distansya, sa laban, ay dapat na nadagdagan. Bukod dito, ang laki ng mga gaps ay maaaring tinukoy bilang sa pagitan haligi at sa pagitan ng mga linya. Upang ipahiwatig na ang halaga (sa halip tiklupin):

border-pagbagsak: hiwalay na

Ngunit tulad aksyon ay nagpapahiwatig na ito ay kinakailangan upang paghiwalayin ang mga cell. Bilang ito ay ang kanilang share, na ipinapahiwatig ng karagdagang ari-arian:

border-spacing: 20px.

Kung nais mong tukuyin ang isang iba't ibang mga distansya sa pagitan ng mga hilera at mga hanay, ito ay nagpapahiwatig ng dalawang bagay:

border-spacing: 10px20px.

Ang pagkakaiba sa bilang ng mga browser

Isaisip na sa CSS disenyo talahanayan ay maaaring tumingin naiiba, depende sa browser. Lalo na masamang ay ang kaso sa mga mas lumang mga bersyon, na mga makabagong-likha sa CSS ay hindi suportado.

Ang itaas ay isang halimbawa ng frame thicknesses sa digital na mga halaga.

Para sa halimbawang ito, ang kapal ng mga frame para sa mga constants.

estilo ng border din naiiba malaki.

Samakatuwid, ang pag-unlad palaging makita ang mga resulta sa iba't ibang mga browser.

Sa CSS disenyo talahanayan inirerekomenda upang suriin ang uri ng browser. Lalo na malaking problema ginamit upang maging sa mga gumagamit na may mas lumang bersyon ng Internet Explorer.

Napaka-advanced na mga developer ay maaaring, depende sa browser upang kumonekta ganap na naiibang mga file CSS. At ang isang tao ay gumagawa ng isang tseke sa bawat o ilang partikular na estilo (klase).

Karamihan sa mga problema lumabas dahil sa ang mga anino.

CSS: Table Format Mga halimbawa

Registration ay maaaring lubos na iba-iba. Lahat ng ito ay depende sa ang buong site at disenyo nito. Ang lahat ay dapat na pinagsama at sari-saring kulay. Ito rin ay gumagawa ng isang mahusay na papel at lasa nag-develop. Kahulugan ng kagandahan ay ang lahat ng iba't ibang.

Bigyan kami ng ilang mga halimbawa ng mga iba't-ibang mga talahanayan. figure sa itaas ay nagpapakita ng paggamit ng ikiling at i-play na may mga kulay ng background at hangganan.

Maraming ay magiging kawili-wiling halimbawa ng mga magagandang kapong baka disenyo na hindi i-cut ang mga user ay eye. sagisag na ito ay angkop sa halos anumang sitwasyon.

Ang mga gilid ay maaaring gawin bilugan. Ito asta pretty nice.

konklusyon

Tulad ng iyong nakikita, para sa ang hitsura ng mga talahanayan sa CSS maraming mga kasangkapan. Ang bawat parameter ay din ng isang malaking halaga ng mga pagpipilian na halaga. Kung gumagamit ka ng lahat ng ito sabay-sabay, maaari kang lumikha ng masterpieces. Lalo na kung gagawin mo agpang disenyo para sa lahat ng mga browser.

Ang pangunahing bagay sa disenyo - huwag lumampas ang luto ito epekto. Lahat ng bagay ay dapat gawin sa pagmo-moderate. Sa una, ang layout na gusto mag-eksperimento at gamitin ang lahat ng kanilang kaalaman kaagad. Bilang isang resulta ng talahanayan ay oversaturated properties. Subukan upang maiwasan ang mga error na ito.

Bukod dito, ang ilang mga parameter ay maaaring makagambala sa bawat isa. Halimbawa, hindi na kailangan upang tukuyin ang kulay ng background ng talahanayan, habang kung mayroong pa rin ang set ng larawan sa background, na kung saan ay nago-overlap sa tinukoy na kulay.