Panduan sifat jadual CSS: susun atur jadual, runtuhan sempadan dan bahagian kapsyen

Panduan atribut jadual CSS: susun atur jadual, runtuh sempadan dan sisi kapsyen

Jadual ialah salah satu alatan reka letak yang biasa digunakan dalam reka bentuk web dan boleh digunakan untuk memaparkan data dan menyusun kandungan. Walau bagaimanapun, apabila mereka bentuk dan menggunakan jadual, pilihan sifat CSS yang sesuai boleh memastikan rupa dan fungsi jadual sepadan dengan keperluan anda. Artikel ini akan memperkenalkan tiga sifat jadual CSS yang biasa digunakan: susun atur jadual, runtuhan sempadan dan sisi kapsyen, dan memberikan contoh kod khusus.

1. atribut susun atur jadual

atribut susun atur jadual digunakan untuk menentukan algoritma reka letak jadual. Ia mempunyai dua nilai yang mungkin: "auto" dan "tetap".

• Nilai "auto" ialah nilai lalai, yang bermaksud pelayar akan melaraskan lebar lajur secara automatik mengikut saiz kandungan dalam jadual. Ini bermakna bahawa lebar jadual secara automatik melaraskan berdasarkan kandungan, yang kadangkala boleh mengakibatkan lebar lajur tidak sekata.

table {
  table-layout: auto;
}

• Nilai "tetap" bermakna lebar lajur adalah tetap dan tidak akan berubah apabila kandungan berubah. Ini memastikan bahawa setiap lajur jadual mempunyai lebar yang sama dan lebih stabil.

table {
  table-layout: fixed;
}

2. atribut roboh sempadan

atribut runtuhan sempadan digunakan untuk menentukan cara persimpangan sempadan jadual dan sel dikendalikan. Ia mempunyai dua nilai yang mungkin: "terpisah" dan "runtuh".

• Nilai "berasingan" ialah lalai, bermakna setiap sel mempunyai sempadannya sendiri, menghasilkan jarak antara sel bersebelahan.

table {
  border-collapse: separate;
}

• Nilai "runtuh" ​​bermaksud bahawa sempadan sel bersebelahan akan bergabung, sekali gus mengurangkan ruang antara sel bersebelahan. Ini menjadikan meja kelihatan lebih kemas.

table {
  border-collapse: collapse;
}

3. atribut caption-side

caption-side attribute digunakan untuk menentukan kedudukan tajuk jadual (caption). Ia mempunyai empat nilai yang mungkin: "atas", "bawah", "kiri" dan "kanan".

• Nilai "atas" bermakna tajuk jadual dipaparkan di bahagian atas jadual.

table {
  caption-side: top;
}

• Nilai "bawah" bermakna tajuk jadual dipaparkan di bahagian bawah jadual.

table {
  caption-side: bottom;
}

• Nilai "kiri" bermakna tajuk jadual dipaparkan di sebelah kiri jadual.

table {
  caption-side: left;
}

• Nilai "betul" bermakna tajuk jadual dipaparkan di sebelah kanan jadual.

table {
  caption-side: right;
}

Ringkasan:

Sifat jadual CSS memainkan peranan penting dalam mereka bentuk dan menyusun jadual. Melalui pemilihan atribut yang sesuai, algoritma susun atur, gaya sempadan dan kedudukan tajuk jadual boleh diubah. Contoh di atas menyediakan kod CSS sebenar untuk membantu anda memahami dan menggunakan sifat ini dengan lebih baik untuk memenuhi pelbagai keperluan reka bentuk jadual. Sama ada anda mencipta jadual data ringkas atau reka letak yang kompleks, sifat ini boleh menjadikan jadual anda kelihatan lebih bersih dan lebih profesional.

Atas ialah kandungan terperinci Panduan sifat jadual CSS: susun atur jadual, runtuhan sempadan dan bahagian kapsyen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!