CSS 表格邊框屬性探索：border-collapse 和 border-spacing

CSS 表格邊框屬性探索：border-collapse 和 border-spacing

在web開發中，表格是一個常見的元素，用於展示和組織資料。為了讓表格更有可讀性和美觀度，我們可以使用CSS來調整表格的樣式。在調整表格樣式時，border-collapse和border-spacing是兩個非常常用的屬性。

1. border-collapse：邊框合併

border-collapse屬性用於控製表格的邊框是否合併為單一的邊框。它有兩個可選值：

• collapse：表示邊框合併為一個單一的邊框。這是預設值。
• separate：表示邊框保持分開。

下面是一個範例程式碼：

<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>

執行上述程式碼，可以看到表格中的邊框被合併成一個單一的邊框線。

2. border-spacing：邊框間距

border-spacing屬性用於控製表格的邊框之間的距離。它可用於設定水平和垂直間距，具有以下語法：

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

下面是一個範例程式碼：

<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>

運行以上程式碼，可以看到表格中的邊框之間產生了10像素的間距。

綜上所述，border-collapse和border-spacing是CSS中用來調整表格邊框的兩個重要屬性。 border-collapse用於控制是否合併表格邊框，而border-spacing則用於控制邊框之間的距離。在實際應用中，我們可以根據需求選擇合適的值，優化表格的樣式和可讀性。

希望這篇文章對你對CSS表格邊框屬性的理解有所幫助！

以上是CSS 表格邊框屬性探索：border-collapse 和 border-spacing的詳細內容。更多資訊請關注PHP中文網其他相關文章！