CSS: desain tabel. Conto desain

Nggawe tabel nggunakake CSS minangka kegiatan sing menarik lan wigati. Pendekatan iki kudu dibutuhake cekap, kanthi kawruh babagan kabeh kemungkinan gaya. Kajaba iku, sampeyan kudu duwe rasa kaendahan, supaya ora nglokro pengunjung karo kreativitas sampeyan.

Ing tabel sampeyan bisa ngowahi meh kabeh. Desain sing apik saka tabel CSS tegese nggunakake desain wates, latar mburi meja, latar mburi sel, jurang antarane lan luwih akeh. Ayo ngerteni sing paling dhasar.

Bates meja

Gaya CSS desain tegese tegese muter karo wates. Kabeh tabel ora diwatesi kanthi standar. Sing, iku 0 piksel. Nanging iki bisa diatasi kanthi nggunakake wewatesan.

Sampeyan bisa nemtokake wates njaba kanggo kabeh tabel:

Tabel {border: 3px solid black; }

Thanks kanggo baris iki, kabeh tabel ing situs ing ngendi gaya iki digunakake bakal duwe wates ireng. Elinga yen watesan mung ing pinggir, nanging ora ana ing meja. Kanggo sel lan baris, pigura ditemtokake kanthi beda.

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

Sampeyan bisa nemtokake kekandelan lan werna apa wae. Elinga yen wates ora dilebokake nalika docking.

Tembung padhet tegese desain sing padhet. Sampeyan bisa nemtokake nilai-nilai liyane.

Paling asring, pigura sing solid digunakake, amarga katon luwih menarik lan ora ngalihake perhatian saka isi utama situs.

Sifat wates uga bisa ditemokake ing arah kasebut. Batas bisa disetel mung kanggo ndhuwur, ngisor, kiwa, utawa tengen. Awit ing sawetara kasus opsi karo pigura kanggo kabeh tabel ora pas langsung.

Tabel {border-top: 1px solid red; }

Supaya sampeyan bisa ngeset pigura mung kanggo ndhuwur meja. Kajaba iku, kanggo pihak liya, mung tinimbang nulis paling dhuwur: tengen, kiwa utawa ngisor.

Judhul meja

Judul tabel bisa kasebut nganggo tag . Ing tag iki, sampeyan bisa nulis ing CSS akeh properti kanggo nggoleki luwih apik. Ing CSS, desain tabel apik amarga sampeyan bisa maneuver unsur sing dikarepake.

Header iki ditampilake kanthi cara sing padha karo standar ing buku (contone "Tabel 1").

Sampeyan uga bisa nemtokake lokasi header iki kanthi properti caption-side (ndhuwur utawa ngisor). Alignment kiwa utawa tengen ditemtokake dening properti obyek teks.

Latar meja

Latar mburi meja bisa wae werna utawa pola. Werna disetel dening sifat latar mburi. Jeneng-jeneng kasebut kanthi bener cocog karo sing digunakake ing wicara. Iki nggawe luwih gampang ngapalake akeh.

Werna kasebut bisa ditemtokake kanthi jeneng lan dening encodings sing beda. Kajaba iku, sampeyan bisa nemtokake iki:

• Transparan - transparan unsur kasebut.
• Inherit - werna padha karo unsur induk.
• Wiwitane yaiku nilai default.

Varian karo transparan bisa digunakake ing kasus kasebut nalika kabeh tabel ing teks ing file CSS digawe kanthi werna, nanging ing kasus iki ora perlu.

Kajaba iku, latar mburi bisa dadi gambar. Kanggo nindakake iki, gaya bakal nggambarake gambar latar mburi. Path dituduhake kaya iki:

Url ('URL')

Path kanggo file bisa uga relatif utawa mutlak.

Komplek sing luwih rumit bisa dilakoni kanthi gradien:

• Linear-gradient ();
• Radial-gradient ();
• Ganti-linear-gradient () lan pengulangan-radial-gradient () - mbaleni gradient.

Latar mburi ponsel

Sakliyane latar mburi sakabehe, sampeyan bisa nemtokake latar mburi sing diganti ing kolom utawa baris. Kanggo ndhaftar, properti iki kerep banget digunakake, amarga pemisahan garis visual luwih gampang maca informasi.

Saliyane interlacing, sampeyan bisa nemtokake nomer kolom tartamtu utawa baris. Contone, kaya iki:

• Tr: nth-child (even) {...} - nemtokake alternasi garis;
• Tr: nth-child (1) {...} - nemtokake properti saka senar tartamtu;
• Td: nth-child (even) {...} - indikasi alternation of columns;
• Td: nth-child (1) {...} - nemtokake properti kolom tartamtu.

Saliyane interleaving lan nomer, sampeyan bisa nemtokake sing pisanan (td: first-child) utawa pungkasan (td: last-child).

Spasi ing antarane sel

Ing CSS, rancangan tabel ngidini sampeyan mbusak kesenjangan antarane sel. Secara default, padha. Contone, yen sampeyan ngeset pigura ing meja tanpa nyetel jarak antarane wates, banjur ana asil sing kaya mengkono.

Setuju, ora katon apik banget lan ora trep kanggo maca. Pangguna bakal dadi ruffle mata amarga iki. Sampeyan bisa mbusak kesenjangan iki kanthi nulis ing ngisor iki ing gaya tabel:

Border-collapse: runtuh

Nanging uga mengkono, jarak kasebut, ing salawas-lawase, kudu tambah. Lan ukuran interval bisa ditemtokake loro antarane kolom, lan antarane garis. Kanggo nindakake iki, nemtokake nilai kasebut (tinimbang ambruk):

Bates-runtuh: kapisah

Nanging tumindak iki bakal nuduhake yen sampeyan kudu misahake sel. Cara misahake, dituduhake dening properti tambahan:

Wates watesan: 20px.

Yen sampeyan pengin nemtokake jarak sing beda antarane baris lan kolom, banjur rong nilai kasebut:

Wates watesan: 10px20px.

Prabédan ing browser

Elinga yen ing CSS, tampilan tabel bisa katon beda-beda, gumantung ing browser. Kahanan iku luwih apik tinimbang versi lawas, sing inovasi ing CSS ora ndhukung.

Ndhuwur minangka conto pigura kanggo pigura digital.

Punika conto kekandelan pigura kanggo konstanta.

Gaya pigura uga beda banget.

Mulane, nalika ngembang, tansah katon ing asil ing browser beda.

Ing CSS, dianjurake kanggo nggawe desain tabel kanthi mriksa jinis browser. Masalah sing paling gedhe yaiku nganggo panganggo sing nganggo versi Internet Explorer sing lawas.

Pengembang paling canggih bisa nyambung file CSS sing beda-beda gumantung ing browser. Lan wong ora ngetrapake saben utawa sawetara gaya tartamtu (kelas).

Paling masalah ditemokake karo bayangan.

CSS: desain tabel, conto

Desain bisa uga beda-beda. Iku kabeh gumantung ing situs umum lan desain. Kabeh kudu dikombinasi lan ora warni. Uga, rasa pangembang uga nduweni peran gedhe. Rasa kaendahan beda kanggo saben wong.

Kita menehi conto tabel beda. Angka ing ndhuwur nuduhake nggunakake ngiringake lan game karo latar mburi lan wates warna.

Akeh bakal kasengsem karo conto desain apik sing ora bakal ngetokaké mata marang panganggo. Pilihan iki cocog ing meh wae kahanan.

Edges bisa dibunderaké. Iku katon ayu banget.

Kesimpulan

Minangka sampeyan bisa ndeleng, kanggo nggawe tampilan tabel ing CSS ana akeh alat. Saben parameter uga nduweni akeh variasi nilai. Yen sampeyan nggunakake kabeh iki bebarengan, sampeyan bisa nggawe mahakarya. Utamané yen sampeyan nggawe desain adaptif kanggo kabeh browser.

Babagan utama nalika ngrancang - ora ngluwihi efek kasebut. Kabeh kudu rampung kanthi moderat. Ing wiwitan, desainer tata letak kaya eksprimen lan nggunakake kabeh kawruh kasebut bebarengan. Akibaté, tabel-tabel kasebut minangka sifat superkaturasi. Coba supaya kesalahan iki.

Apamaneh, sawetara paramèter sing bisa ngganggu. Contone, ora perlu kanggo nemtokake werna latar mburi meja, yen ing wektu sing padha ana gambar latar sing bakal tumpang tindih warna kasebut.