CSS Table 屬性
CSS 表格屬性允許你設置表格的布局。（請注意，本節介紹的不是如何使用表來建立布局，而是要介紹 CSS 中表本身如何布局。）
屬性 |
描述 |
border-collapse
設置是否把表格邊框合並為單一的邊框。
border-spacing
設置分隔單元格邊框的距離。（僅用於 "separated borders" 模型）
caption-side
設置表格標題的位置。
empty-cells
設置是否顯示表格中的空單元格。（僅用於 "separated borders" 模型）
table-layout
設置顯示單元、行和列的算法。
實例：
- 設置表格的布局
- 本例演示如何設置表格的布局。
- <html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body> - <table class="one" 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="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table> - </body>
</html>
1000000000000000000000000000
10000000
100
1000000000000000000000000000
10000000
100
- 顯示表格中的空單元
- 本例演示是否顯示表格中的空單元。（請在非 IE 浏覽器中浏覽）
- <html>
<head>
<style type="text/css">
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body> - <table border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td></td>
</tr>
</table> - </body>
</html>
- 顯示：
Adams
John
Bush
- 合並表格邊框
- 本例演示是否把表格邊框顯示為一條單獨的邊框，還是像標准的 HTML 中那樣分開顯示。
- <html>
<head>
<style type="text/css">
table.coll
{
border-collapse: collapse
}
table.sep
{
border-collapse: separate
}
</style>
</head>
<body> - <table class="coll" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table> - <br />
- <table class="sep" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table> - </body>
</html>
Adams
John
Bush
George
Adams
John
Bush
George
- 設置表格邊框之間的空白
- 本例演示如何設置單元格邊框之間的距離。（請在非 IE 浏覽器中浏覽）
- <html>
<head>
<style type="text/css">
table.one
{
border-collapse: separate;
border-spacing: 10px
}
table.two
{
border-collapse: separate;
border-spacing: 10px 50px
}
</style>
</head>
<body> - <table class="one" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table> - <br />
- <table class="two" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table> - </body>
</html>
Adams
John
Bush
George
Carter
Thomas
Gates
Bill
- 設置表格標題的位置
- 本例演示如何定位表格的標題。（請在非 IE 浏覽器中浏覽）
<html>
<head>
<style type="text/css">
caption
{
caption-side:bottom
}
</style>
</head>
<body>
<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>
</body>
</html>
This is a caption
Adams
John
Bush
George