CSS: desain meja. contoh pendaftaran

Membuat tabel dengan CSS - pelajaran yang menarik dan bertanggung jawab. Pendekatan untuk bisnis ini perlu kompeten, dengan pengetahuan tentang semua gaya yang mungkin. Selain itu, perlu untuk memiliki rasa keindahan agar tidak menakut-nakuti pengunjung kreativitas mereka.

Tabel dapat mengubah hampir segalanya. Desain yang indah melibatkan penggunaan batas CSS tabel desain, latar belakang meja, latar belakang sel, kesenjangan antara mereka dan banyak lagi. Pertimbangkan paling dasar.

border tabel

CSS gaya desain meja selalu melibatkan permainan dengan perbatasan (frame). Semua tabel default tidak kontur bingkai. Artinya, itu adalah sama dengan 0 piksel. Tapi ini dapat diperbaiki dengan perbatasan properti.

Anda dapat menentukan bingkai luar untuk seluruh tabel:

table {border: 3px hitam solid; }

Berkat baris ini di semua tabel di situs yang menggunakan gaya ini adalah bingkai hitam. Perhatikan bahwa hanya perbatasan di tepi, tapi tidak di dalam meja. Untuk baris sel dan bingkai ditentukan lain.

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

Ketebalan dan warna, Anda dapat menentukan apapun. Perlu diingat bahwa batas-batas tidak dua kali lipat ketika splicing sel.

Kata menunjukkan pendaftaran terus menerus solid. Anda dapat menentukan nilai-nilai lain.

hal ini paling sering digunakan bingkai yang solid, seperti yang terlihat lebih menarik dan tidak mengalihkan perhatian dari konten utama situs.

Properti border dapat ditentukan juga di papan tulis. batas hanya dapat ditetapkan untuk bagian atas, bawah, kiri atau kanan. Karena dalam beberapa kasus itu bukan pilihan yang layak dengan frame untuk seluruh tabel sekaligus.

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

Jadi Anda dapat mengatur frame untuk bagian atas meja saja. Demikian pula untuk pihak lain, bukan hanya atas menulis: kanan, kiri atau bawah.

header tabel

header tabel dapat ditentukan dengan menggunakan tag . tag ini dapat di CSS untuk mendaftarkan banyak properti untuk fine-tuning. Desain tabel CSS baik karena itu adalah mungkin untuk manuver unsur-unsur seperti yang Anda inginkan.

Judul ini ditampilkan dengan cara yang sama sebagai standar dalam buku-buku (seperti "Tabel 1").

Anda dapat menentukan lokasi judul dan properti caption-side (atas atau bawah). Menyelaraskan kiri atau kanan didefinisikan oleh properti text-align.

tabel latar belakang

Latar belakang meja bisa berupa warna atau pola. Warna menetapkan properti background-color. Nama-nama sifat sepenuhnya konsisten dengan kegunaan dalam pidato. Ini memfasilitasi menyimpan banyak kali.

warna dapat ditentukan sebagai nama, dan pengkodean yang berbeda. Selain itu, Anda dapat menentukan berikut:

• Transparan - transparan.
• Mewarisi - warna adalah sama dengan elemen induk.
• Initial - default.

Pilihan dengan transparansi dapat digunakan dalam kasus-kasus di mana semua tabel dalam teks dalam file CSS yang dibuat dalam satu warna, tetapi dalam kasus ini tidak ada kebutuhan.

Selain itu, latar belakang mungkin gambar. Untuk melakukan hal ini, di properti background-image gaya yang ditentukan. jalan adalah seperti ini:

url ( 'URL')

Path ke file mungkin baik relatif atau absolut.

mengisi lebih rumit dapat dilakukan dengan gradien:

• linear-gradient ();
• radial-gradient ();
• mengulangi-linear-gradient () dan mengulangi-radial-gradient () - gradien diulang.

sel latar belakang

Selain latar belakang pada umumnya, Anda dapat menentukan latar belakang bergaris-garis di kolom atau baris. Untuk pendaftaran properti yang digunakan sangat sering, karena pemisahan visual dari garis lebih mudah untuk membaca informasi.

Selain pergantian, dan Anda dapat menentukan jumlah kolom atau baris tertentu. Misalnya seperti ini:

• tr: n-anak (bahkan) {...} - menentukan interlaced;
• tr: n-anak (1) {...} - indikasi sifat baris tertentu;
• td: n-anak (bahkan) {...} - indikasi bolak kolom;
• td: n-anak (1) {...} - indikasi sifat-sifat kolom tertentu.

Selain urut dan nomor dapat ditentukan - yang pertama (td: pertama-anak) atau terakhir (td: terakhir-anak).

Kesenjangan antara sel-sel

Dalam CSS, desain meja memungkinkan Anda untuk menghapus ruang antara sel-sel. Secara default mereka. Misalnya, jika Anda mengatur bingkai di meja tanpa pengaturan jarak antara batas-batas, itu akan berada di sini hasil ini.

Setuju, itu terlihat tidak sangat bagus dan tidak nyaman untuk membaca. Pengguna akan memiliki riak di mata karena ini. Hapus kesenjangan ini dapat dengan menulis hanya garis seperti dalam gaya tabel:

border-collapse: collapse

Tetapi juga terjadi bahwa jarak, sebaliknya, harus ditingkatkan. Selain itu, ukuran kesenjangan dapat ditetapkan sebagai antara kolom dan antara garis-garis. Untuk menunjukkan bahwa nilai (bukan runtuh):

border-collapse: terpisah

Tapi tindakan tersebut akan menunjukkan bahwa perlu untuk memisahkan sel. Seperti itu bagian mereka, menunjukkan properti tambahan:

border-spacing: 20px.

Jika Anda ingin menentukan jarak yang berbeda antara baris dan kolom, ini menunjukkan dua hal:

border-spacing: 10px20px.

Perbedaan dalam browser

Perlu diingat bahwa dalam CSS tabel desain mungkin terlihat berbeda, tergantung pada browser. Sangat buruk halnya dengan versi lama, bahwa inovasi dalam CSS tidak didukung.

Di atas adalah contoh bingkai ketebalan dengan nilai-nilai digital.

Untuk contoh ini, ketebalan frame untuk konstanta.

gaya perbatasan juga berbeda jauh.

Oleh karena itu, pembangunan selalu melihat hasil di browser yang berbeda.

Dalam CSS tabel desain dianjurkan untuk memeriksa jenis browser. Terutama masalah besar dulu untuk pengguna dengan versi lama dari Internet Explorer.

pengembang sangat maju bisa, tergantung pada browser untuk menghubungkan file CSS yang sama sekali berbeda. Dan seseorang membuat cek di setiap atau beberapa gaya tertentu (kelas).

Sebagian besar masalah timbul dari bayang-bayang.

CSS: Tabel Format Contoh

Pendaftaran dapat cukup bervariasi. Itu semua tergantung pada seluruh situs dan desain. Semua harus dikombinasikan dan warna beraneka ragam. Juga itu membuat peran dan rasa pengembang besar. Rasa keindahan adalah semua berbeda.

Kami memberikan beberapa contoh dari berbagai tabel. Gambar di atas menunjukkan penggunaan tilt dan bermain dengan warna latar belakang dan perbatasan.

Banyak akan contoh menarik dari desain rapi indah yang tidak akan memotong pengguna mata. perwujudan ini sesuai di hampir semua situasi.

Tepi dapat dibuat bulat. Ini terlihat cukup bagus.

kesimpulan

Seperti yang Anda lihat, untuk penampilan tabel di CSS ada banyak alat. Setiap parameter juga sejumlah besar pilihan nilai. Jika Anda menggunakannya sekaligus, Anda dapat membuat karya. Terutama jika Anda melakukan desain adaptif untuk semua browser.

Hal utama dalam desain - jangan berlebihan dengan efek. Semuanya harus dilakukan dalam moderasi. Pada awalnya, tata letak suka bereksperimen dan menggunakan semua pengetahuan mereka segera. Sebagai hasil dari tabel adalah sifat jenuh. Cobalah untuk menghindari kesalahan ini.

Selain itu, beberapa parameter dapat mengganggu satu sama lain. Misalnya, tidak perlu untuk menentukan warna latar belakang meja, sedangkan jika masih ada set gambar latar belakang, yang akan tumpang tindih warna yang ditentukan.