DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 10.2 表格邊框間距border-spacing
10.2 表格邊框間距border-spacing
編輯:CSS基礎知識     

一、border-spacing屬性

我們知道表格加入邊框默認情況下是如下圖那樣的:

我們在上一節講解了如何合並表格邊框(消除表格邊框間距)。但是在實際開發中,我們有可能要設置一下表格邊框的間距。

在CSS中,我們使用border-spacing屬性來定義表格邊框間距。

語法:

border-spacing:像素值;

說明:

該屬性指定單元格邊界之間的距離。當只指定了1個像素值時,這個值將作用於橫向和縱向上的間距;當指定了2個length值時,第1個作用於橫向間距,第2個作用於縱向間距。

在CSS初學階段,全部都是使用像素作單位,在CSS進階中我們會深入講解其他CSS單位。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>border-spacing屬性</title>
    <style type="text/css">
        table,th,td{border:1px solid gray;}
        table{border-spacing:5px 10px }
    </style>
</head>
<body>
    <table>
        <caption>表格標題</caption>
        <!--表頭-->
        <thead>
            <tr>
                <th>表頭單元格1</th>
        <th>表頭單元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>標准單元格1</td>
                <td>標准單元格2</td>
            </tr>
            <tr>
                <td>標准單元格1</td>
                <td>標准單元格2</td>
            </tr>
        </tbody>
        <!--表腳-->
        <tfoot>
            <tr>
                <td>標准單元格1</td>
                <td>標准單元格2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在浏覽器預覽效果如下:

分析:

"border-spacing:5px 10px"定義了單元格之間水平方向的間距為5px,垂直方向的間距為10px。

border-spacing屬性跟上節課學到的border-collapse屬性一樣,只需要在table元素設置就可以生效,沒必要在th、td這些元素中設置,造成代碼冗余。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved