CSS: reka bentuk jadual. contoh pendaftaran

Membuat jadual dengan CSS - pelajaran menarik dan bertanggungjawab. Pendekatan kepada perniagaan ini perlu cekap, dengan pengetahuan semua gaya mungkin. Di samping itu, ia adalah perlu untuk mempunyai rasa kecantikan agar tidak menakutkan off pelawat kreativiti mereka.

Jadual boleh mengubah hampir semua. reka bentuk yang indah melibatkan penggunaan sempadan CSS jadual reka bentuk, latar belakang meja, latar belakang sel, jurang antara mereka dan banyak lagi. Pertimbangkan yang paling asas.

table border

CSS reka bentuk gaya jadual sentiasa melibatkan permainan dengan sempadan (frame). Semua jadual lalai tidak bingkai kontur. Iaitu, ia adalah sama dengan 0 piksel. Tetapi ini boleh diperbetulkan dengan sempadan bertenaga.

Anda boleh menentukan rangka luar untuk seluruh jadual:

Rajah {border: 3px pepejal hitam; }

Terima kasih kepada baris ini di semua jadual di laman web yang menggunakan gaya ini adalah bingkai hitam. Ambil perhatian bahawa sempadan hanya di tepi, tetapi tidak di dalam jadual. Untuk talian sel dan rangka dinyatakan sebaliknya.

th, td {border: hitam pepejal 3px;}

Ketebalan dan warna, anda boleh menentukan apa-apa. Perlu diingat bahawa sempadan tidak dua kali ganda apabila splicing sel.

Perkataan ini menunjukkan pendaftaran berterusan yang kukuh. Anda boleh menyatakan nilai yang lain.

ia adalah yang paling biasa digunakan bingkai pepejal, kerana ia kelihatan lebih menarik dan tidak mengalihkan perhatian daripada kandungan utama laman web ini.

harta sempadan boleh dinyatakan juga di papan. sempadan hanya boleh ditetapkan untuk bahagian atas, bawah, kiri atau kanan. Kerana dalam beberapa kes ia bukan satu pilihan yang boleh dilaksanakan dengan kerangka untuk keseluruhan jadual sekaligus.

Rajah {border-top: 1px solid merah; }

Jadi, anda boleh menetapkan bingkai untuk bahagian atas meja sahaja. Begitu juga dengan mana-mana pihak lain, bukannya menulis hanya atas: kanan, kiri atau bawah.

header jadual

header jadual boleh dinyatakan menggunakan tag . Tag ini boleh berada di dalam CSS untuk mendaftar banyak hartanah untuk penalaan halus. Yang reka bentuk jadual CSS adalah baik kerana ia adalah mungkin untuk bergerak unsur-unsur seperti yang anda inginkan.

tajuk ini dipaparkan dengan cara yang sama sebagai standard dalam buku-buku (seperti "Jadual 1").

Anda boleh menentukan lokasi tajuk dan harta kapsyen-side (atas atau bawah). Menjajarkan kiri atau kanan ditakrifkan oleh harta text-align.

jadual latar belakang

Latar belakang meja boleh menjadi apa-apa warna atau corak. Warna menetapkan harta latar belakang warna. Nama-nama sifat sepenuhnya selaras dengan kegunaan dalam pertuturan. Ia memudahkan menyimpan banyak kali.

warna boleh dinyatakan sebagai nama, dan pengekodan yang berbeza. Selain itu, anda boleh menentukan yang berikut:

• Telus - telus.
• Mewarisi - warna adalah sama dengan unsur induk.
• Awal - lalai.

Pilihan dengan ketelusan boleh digunakan dalam kes-kes di mana semua jadual dalam teks dalam fail CSS yang dibuat dalam satu warna, tetapi dalam kes ini tidak ada keperluan.

Di samping itu, latar belakang yang berkenaan imej. Untuk melakukan ini, dalam harta background-image gaya ditetapkan. Jalan yang seperti ini:

url ( 'URL')

Laluan ke fail yang berkenaan sama ada saudara atau mutlak.

kenyang lebih rumit boleh dilakukan dengan kecerunan yang:

• linear-kecerunan ();
• radial-kecerunan ();
• mengulangi linear-kecerunan () dan mengulangi-radial-kecerunan () - kecerunan berulang.

sel latar belakang

Selain latar belakang secara umum, anda boleh menentukan latar belakang yang berjalur dalam lajur atau baris. Untuk pendaftaran harta itu digunakan selalu, kerana pemisahan visual garis mudah untuk membaca maklumat.

Selain silih, dan anda boleh menentukan bilangan lajur atau baris tertentu. Contohnya seperti ini:

• tr: n-kanak-kanak (walaupun) {...} - menentukan berselang;
• tr: n-kanak-kanak (1) {...} - petunjuk sifat-sifat berturut-turut tertentu;
• td: n-kanak-kanak (walaupun) {...} - petunjuk seli lajur;
• td: n-kanak-kanak (1) {...} - petunjuk sifat-sifat lajur tertentu.

Selain urutan dan nombor boleh dinyatakan - yang pertama (td: pertama-anak) atau akhir (td: last-kanak-kanak).

Jurang antara sel-sel

Dalam CSS, reka bentuk jadual membolehkan anda untuk menghapuskan ruang antara sel-sel. Secara lalai mereka. Sebagai contoh, jika anda menetapkan bingkai dalam jadual tanpa menetapkan jarak di antara sempadan, ia akan berada di sini keputusan ini.

Bersetuju, ia tidak kelihatan sangat bagus dan ia tidak mudah untuk membaca. Pengguna akan mempunyai riak di mata kerana ini. Keluarkan jurang ini boleh menjadi dengan menulis hanya seperti talian dalam gaya jadual:

sempadan runtuh: runtuh

Tetapi ia juga berlaku bahawa jarak yang jauh, sebaliknya, perlu ditambah. Selain itu, saiz jurang boleh dinyatakan sebagai antara tiang-tiang dan antara baris. Untuk menunjukkan bahawa nilai (bukan runtuh):

sempadan-collapse: berasingan

Tetapi tindakan itu akan menunjukkan bahawa ia adalah perlu untuk memisahkan sel-sel. Kerana ia adalah bahagian mereka, menunjukkan harta tambahan:

sempadan jarak: 20px.

Jika anda ingin menentukan jarak yang berbeza antara baris dan lajur, ia menunjukkan dua perkara:

sempadan jarak: 10px20px.

Perbezaan dalam pelayar

Perlu diingat bahawa dalam CSS reka bentuk jadual mungkin kelihatan berbeza, bergantung kepada pelayar. Terutamanya buruk halnya dengan versi yang lebih lama, yang inovasi dalam CSS tidak disokong.

Di atas adalah satu contoh ketebalan bingkai kepada nilai digital.

Untuk contoh ini, ketebalan bingkai untuk pemalar.

gaya sempadan juga berbeza jauh.

Oleh itu, pembangunan yang sentiasa melihat hasil dalam pelayar yang berbeza.

Dalam CSS reka bentuk jadual disyorkan untuk memeriksa jenis pelayar. Terutamanya masalah besar digunakan untuk menjadi kepada pengguna dengan versi Internet Explorer.

pemaju yang sangat maju boleh, bergantung kepada pelayar untuk menyambung fail CSS sekali berbeza. Dan seseorang membuat pemeriksaan di setiap atau beberapa gaya tertentu (kelas).

Kebanyakan masalah yang timbul dari bayang-bayang.

CSS: Contoh Jadual Format

Pendaftaran boleh agak berbeza-beza. Ia bergantung kepada keseluruhan tapak dan reka bentuk. Semua perlu digabungkan dan warna berlainan warna. Juga ia menjadikan peranan dan rasa pemaju yang hebat. Rasa kecantikan adalah semua berbeza.

Kami memberi anda beberapa contoh pelbagai jadual. Rajah di atas menunjukkan penggunaan kecondongan dan bermain dengan warna latar belakang dan sempadan.

Ramai yang akan menjadi contoh yang menarik reka bentuk kemas indah yang tidak akan memotong pengguna mata. penjelmaan ini adalah sesuai dalam hampir apa jua keadaan.

Tepi boleh dibuat bulat. Ia kelihatan cukup baik.

kesimpulan

Seperti yang anda lihat, bagi kehadiran jadual dalam CSS terdapat banyak alat. Setiap parameter adalah juga sejumlah besar pilihan nilai. Jika anda menggunakan semua sekali gus, anda boleh membuat karya. Terutamanya jika anda melakukan reka bentuk penyesuaian untuk semua pelayar.

Perkara utama dalam reka bentuk - tidak keterlaluan dengan kesan. Segala-galanya perlu dilakukan secara sederhana. Pada mulanya, susun atur suka untuk mencuba dan menggunakan semua pengetahuan mereka dengan segera. Hasil daripada jadual adalah sifat oversaturated. Cuba untuk mengelakkan ralat ini.

Selain itu, beberapa parameter boleh mengganggu satu sama lain. Sebagai contoh, tidak ada keperluan untuk menentukan warna latar belakang jadual, manakala jika terdapat masih menetapkan imej latar belakang, yang akan bertindih warna yang dinyatakan.