Penerokaan sifat sempadan jadual CSS: keruntuhan sempadan dan jarak sempadan

Penerokaan sifat sempadan jadual CSS: runtuh sempadan dan jarak sempadan

Dalam pembangunan web, jadual ialah elemen biasa yang digunakan untuk memaparkan dan menyusun data. Untuk menjadikan jadual lebih mudah dibaca dan cantik, kita boleh menggunakan CSS untuk melaraskan gaya jadual. Apabila melaraskan gaya jadual, runtuh sempadan dan jarak sempadan ialah dua sifat yang sangat biasa digunakan.

1. sempadan-runtuh: Cantuman sempadan

harta benda runtuh sempadan digunakan untuk mengawal sama ada jidar jadual digabungkan menjadi satu jidar. Ia mempunyai dua nilai pilihan:

• runtuh: Menunjukkan bahawa sempadan digabungkan menjadi satu sempadan. Ini ialah nilai lalai.
• berpisah: Menunjukkan bahawa sempadan kekal terpisah.

Berikut ialah contoh kod:

<style>
    table {
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
    }
</style>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

Jalankan kod di atas, anda dapat melihat bahawa sempadan dalam jadual digabungkan menjadi satu garis sempadan.

2. jarak sempadan: Jarak sempadan

Sifat jarak sempadan digunakan untuk mengawal jarak antara sempadan jadual. Ia boleh digunakan untuk menetapkan jarak mendatar dan menegak, dengan sintaks berikut:

border-spacing: 水平间距 垂直间距;

Berikut ialah kod sampel:

<style>
    table {
        border-collapse: separate;
        border-spacing: 10px;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
    }
</style>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

Menjalankan kod di atas, anda boleh melihat bahawa jarak 10 piksel dihasilkan antara sempadan dalam jadual.

Ringkasnya, runtuh sempadan dan jarak sempadan ialah dua sifat penting dalam CSS untuk melaraskan sempadan jadual. keruntuhan sempadan digunakan untuk mengawal sama ada untuk menggabungkan sempadan jadual, dan jarak sempadan digunakan untuk mengawal jarak antara sempadan. Dalam aplikasi praktikal, kita boleh memilih nilai yang sesuai mengikut keperluan dan mengoptimumkan gaya dan kebolehbacaan jadual.

Saya harap artikel ini akan membantu pemahaman anda tentang sifat sempadan jadual CSS!

Atas ialah kandungan terperinci Penerokaan sifat sempadan jadual CSS: keruntuhan sempadan dan jarak sempadan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!