Rumah > hujung hadapan web > tutorial css > Penerokaan sifat sempadan jadual CSS: keruntuhan sempadan dan jarak sempadan

Penerokaan sifat sempadan jadual CSS: keruntuhan sempadan dan jarak sempadan

王林
Lepaskan: 2023-10-25 11:58:44
asal
1866 orang telah melayarinya

CSS 表格边框属性探索:border-collapse 和 border-spacing

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>
Salin selepas log masuk

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

  1. 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: 水平间距 垂直间距;
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan