Bagaimana untuk menetapkan warna jadual dalam css

CSS ialah bahasa helaian gaya untuk dokumen HTML yang boleh digunakan untuk menetapkan rupa dan reka letak dokumen HTML. Dalam pembangunan web, Jadual ialah elemen HTML yang sangat biasa digunakan, dan warna Jadual boleh ditetapkan melalui CSS. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menetapkan warna Jadual.

1. Warna latar belakang jadual

Warna latar belakang Jadual boleh ditetapkan melalui sifat warna latar belakang dalam CSS. Atribut ini boleh menerima sebarang nilai warna CSS, seperti nama warna, nilai perenambelasan atau nilai RGB, dsb.

Sebagai contoh, gaya CSS berikut menetapkan warna latar belakang Jadual kepada biru muda:

table {
  background-color: #87CEFA;
}

2 Warna sempadan jadual

Atribut sempadan dalam CSS boleh Digunakan untuk menetapkan sempadan Jadual, termasuk lebar sempadan, gaya dan warna. Antaranya, warna sempadan boleh ditetapkan secara individu melalui atribut warna sempadan, atau secara serentak melalui singkatan atribut sempadan Contohnya:

table {
  border: 1px solid #ccc;
}

Gaya ini menetapkan lebar sempadan Jadual kepada 1. piksel, dan jidar Gaya ialah garisan pepejal dan warna jidar berwarna kelabu.

3. Warna sel

Warna sel dalam Jadual boleh ditetapkan secara individu melalui gaya CSS. Anda boleh menjadikan Jadual lebih cantik dengan menetapkan warna latar belakang dan warna sempadan sel.

td {
  background-color: #fff;
  border: 1px solid #ccc;
}

Gaya ini menetapkan warna latar belakang semua sel kepada putih dan warna sempadan kepada kelabu.

4. Warna baris ganjil dan genap

Untuk sesetengah jadual yang agak besar, ia mungkin kelihatan mengelirukan jika setiap baris dibezakan hanya dengan warna sel. Pada masa ini, anda boleh menetapkan warna baris ganjil dan genap, iaitu, tetapkan warna latar belakang baris genap dan baris ganjil kepada warna yang berbeza, supaya setiap baris dapat dibezakan dengan jelas.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
  background-color: #fff;
}

Gaya ini menetapkan warna latar belakang baris bernombor ganjil kepada putih dan warna latar belakang baris bernombor genap kepada kelabu muda.

Secara umum, tetapan warna yang fleksibel boleh ditetapkan untuk Jadual melalui CSS, yang bukan sahaja meningkatkan estetika, tetapi juga menjadikan Jadual lebih mudah dibaca dan difahami. Pembangun boleh menggunakan fungsi tetapan gaya CSS secara fleksibel mengikut keperluan mereka sendiri.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna jadual dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!