本教程將教您如何使用CSS設置HTML表的不同屬性。您可以設置表的以下屬性−
邊框摺疊指定瀏覽器是否應控制彼此接觸的相鄰邊框的外觀，或者每個單元格是否應保持其樣式。
邊框間距指定表格單元格之間應顯示的寬度。
標題側的標題顯示在<caption>元素中。默認情況下，它們呈現在文檔的表上方。您可以使用標題側屬性來控制表格標題的位置。
空單元格指定如果單元格爲空，是否應顯示邊框。
table layout允許瀏覽器通過在列的其餘部分使用第一個寬度屬性來加速表的布局，而不必在呈現前加載整個表。
現在，我們將通過示例了解如何使用這些屬性。
The border-collapse Property
此屬性可以有兩個值collapse和separate。下面的示例同時使用值−
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
它將產生以下結果&負;
The border-spacing Property
border spacing屬性指定分隔相鄰單元格的距離。邊界。它可以取一個或兩個值;這些值應該是長度單位。
如果您提供一個值，它將同時應用於垂直和水平邊框。或者您可以指定兩個值，在這種情況下，第一個值表示水平間距，第二個值表示垂直間距−
注意−很遺憾，此屬性在Netscape 7或IE 6中不起作用。
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>
現在讓我們修改前面的示例並查看效果−
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
它將產生以下結果&負;
The caption-side Property
caption-side屬性允許您指定<caption>元素的內容相對於表的位置。下表列出了可能的值。
此屬性可以有四個值之一：頂部、底部、左側或右側。下面的示例使用每個值。
注意−這些屬性可能不適用於您的IE瀏覽器。
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>
它將產生以下結果&負;
The empty-cells Property
空單元格屬性指示沒有任何內容的單元格是否應顯示邊框。
此屬性可以有三個值之一-show、hide或inherit。
以下是空單元格屬性，用於隱藏<table>元素中空單元格的邊框。
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>
它將產生以下結果&負;
The table-layout Property
「表布局」屬性應該幫助您控制瀏覽器應如何呈現或布局表。
此屬性可以有以下三個值之一：fixed、auto或inherit。
下面的示例顯示了這些屬性之間的差異。
注意−許多瀏覽器不支持此屬性，因此不依賴此屬性。
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>
它將產生以下結果&負;