jadual set css

CSS ialah bahasa helaian gaya yang boleh menambah gaya dan reka letak pada dokumen HTML. Dalam HTML, jadual adalah elemen yang sangat biasa yang boleh digunakan untuk memaparkan data dan maklumat. Gunakan CSS untuk menggayakan, reka letak dan aspek jadual yang lain. Artikel ini akan memperkenalkan kaedah dan teknik menetapkan jadual dengan CSS untuk membantu anda memperbaik reka bentuk web anda.

Sintaks asas untuk menetapkan jadual dengan CSS

Sifat yang digunakan oleh CSS untuk menetapkan jadual terutamanya termasuk yang berikut:

1. sempadan: digunakan untuk menetapkan sempadan daripada meja. Anda boleh menetapkan ketebalan, warna, gaya garisan dan sifat sempadan lain. Contohnya: jidar: 1px hitam pejal;
2. lebar: digunakan untuk menetapkan lebar jadual. Anda boleh menggunakan unit seperti piksel (px) dan peratusan (%). Contohnya: lebar: 100%;
3. tinggi: digunakan untuk menetapkan ketinggian meja. Seperti lebar, anda boleh menggunakan unit seperti piksel dan peratusan. Contohnya: ketinggian: 300px;
4. warna latar belakang: digunakan untuk menetapkan warna latar belakang jadual. Warna boleh ditentukan menggunakan nama warna, nilai warna heksadesimal, nilai warna RGB, dsb. Contohnya: warna latar belakang: putih;
5. warna: digunakan untuk menetapkan warna teks dalam jadual. Warna boleh ditentukan menggunakan nama warna, nilai warna heksadesimal dan sebagainya. Contohnya: warna: hitam;
6. text-align: digunakan untuk menetapkan penjajaran teks dalam jadual. Anda boleh menetapkan atribut seperti penjajaran kiri (kiri), penjajaran tengah (tengah) dan penjajaran kanan (kanan). Contohnya: text-align: center;
7. font-size: digunakan untuk menetapkan saiz teks dalam jadual. Unit seperti piksel dan peratusan boleh digunakan. Contohnya: saiz fon: 12px;

Apabila menetapkan jadual menggunakan CSS, anda hanya perlu menentukan gaya jadual dan sel dalam helaian gaya, kemudian gunakan kelas atau id untuk merujuk gaya dalam dokumen HTML Itu sahaja. Berikut ialah beberapa reka letak jadual biasa dan kaedah tetapan gaya.

Gaya sempadan jadual tetapan CSS

Sempadan jadual ialah sempadan antara kawasan kandungan dan kawasan luar jadual, jadi menetapkan sempadan boleh menjadikan jadual lebih jelas dan kemas . CSS menyediakan pelbagai gaya sempadan, termasuk garis padat, garis putus-putus, garis putus-putus, dsb. Begini cara menggayakan jidar meja.

1. Sempadan pepejal

jadual {
sempadan: 1px hitam pepejal;
}

Gunakan kod gaya di atas untuk menetapkan jadual Sempadan ialah sempadan pepejal, dan lebar sempadan ialah 1 piksel. Jika anda ingin menetapkan satu atau lebih sempadan atas, bawah, kiri dan kanan, anda boleh menggunakan sifat sempadan atas, sempadan bawah, sempadan kiri dan kanan sempadan untuk menentukan kedudukan sempadan masing-masing.

2. Sempadan sempang

jadual {
sempadan: 1px putus-putus hitam;
}

Gunakan kod gaya di atas untuk menetapkan sempadan daripada jadual ialah sempadan bertitik, dan lebar sempadan ialah 1 piksel. Jika anda ingin menetapkan jenis garis putus-putus yang berbeza, anda boleh menggunakan atribut seperti bertitik atau berganda.

3. Sempadan bertitik

jadual {
jidar: 1px bertitik hitam;
}

Gunakan kod gaya di atas untuk menetapkan jadual Sempadan ialah sempadan bertitik, dan lebar sempadan ialah 1 piksel. Begitu juga, jika anda ingin menetapkan jenis titik dan garis yang berbeza, anda boleh menggunakan atribut seperti putus-putus atau berganda.

Tetapan CSS lebar dan tinggi jadual

Apabila menetapkan lebar dan tinggi jadual, kita perlu mengambil kira nombor dan panjang kandungan dalam jadual. Jika terdapat banyak kandungan dalam jadual, anda perlu meningkatkan lebar dan ketinggian jadual dengan sewajarnya untuk mengelakkan kandungan daripada bertindih atau melimpah. Berikut ialah beberapa cara untuk menetapkan lebar dan ketinggian meja.

1. Peratus lebar

jadual {
lebar: 100%;
}

Gunakan kod gaya di atas untuk menetapkan lebar jadual adalah 100%. Dengan cara ini, jadual menyesuaikan diri dengan saiz tetingkap penyemak imbas dan mengambil keseluruhan lebar skrin. Jika anda mahukan lebar jadual tetap, anda boleh menetapkannya menggunakan piksel sebagai unit.

2. Lebar dan ketinggian tetap

jadual {
lebar: 500px;
tinggi: 300px;
}

Gunakan di atas Kod gaya boleh menetapkan lebar jadual kepada 500 piksel dan ketinggian kepada 300 piksel. Dengan cara ini, walaupun terdapat banyak kandungan dalam jadual, reka letak dan gaya jadual tidak akan terjejas. Jika kandungan dalam jadual melebihi lebar atau ketinggian yang ditetapkan, pelayar akan menambah bar skrol secara automatik untuk memastikan paparan kandungan.

CSS untuk menetapkan latar belakang jadual dan gaya teks

Latar belakang jadual dan gaya teks boleh ditetapkan melalui CSS untuk mencapai pengalaman visual yang lebih baik. Berikut ialah beberapa cara untuk menggayakan latar belakang jadual dan teks.

1. Tetapkan warna latar belakang

jadual {
warna latar belakang: putih;
}

Gunakan kod gaya di atas untuk menukar jadual Warna latar belakang ditetapkan kepada putih. Jika anda ingin menggunakan warna lain, anda boleh menetapkannya menggunakan nama warna, nilai warna heksadesimal atau nilai warna RGB.

2. Tetapkan warna dan saiz teks

jadual {
warna: hitam;
saiz fon: 12px;
}

Gunakan kod gaya di atas untuk menetapkan warna teks dalam jadual kepada hitam dan saiz fon kepada 12 piksel. Jika anda ingin menggunakan fon lain, anda boleh menetapkannya menggunakan sifat keluarga fon.

Ringkasan

Dengan kaedah di atas, anda boleh menggunakan CSS untuk menetapkan gaya, reka letak dan format jadual. Petua dan kaedah ini boleh membantu anda membuat jadual yang menarik dan boleh dibaca, menjadikan reka bentuk web anda lebih digilap dan profesional. Cuba petua ini untuk menjadikan reka bentuk web anda lebih menarik!

Atas ialah kandungan terperinci jadual set css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!