表格樣式的使用-CSS入門基礎（019）
阿新 • • 發佈：2020-12-31
今天我們分享關於表格樣式的內容。
表格內框合併border-collapse：
在瞭解表格內框合併之前，我們先看一下，預設情況下表格的顯示效果。
示例程式碼：
<html><head><title>表格表框預設</title><style type="text/css">table,th,td { border: 1px solid black;}</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></tbody><tfoot><tr><td>彙總格1</td><td>彙總格2</td></tr></tfoot></table></body></html>
表格預設情況下，單元格與單元格之間有一定的空隙。這樣的表格看起來不美觀，在css中，我們可以使用border-collapse屬性去除空隙的。
語法：
border-collapse:屬性值；此屬性是表格獨有的，其他元素沒有這個屬性。
| border-collapse屬性取值 | |
| 屬性值 | 說明 |
| separate | 邊框分開，不合並，預設值 |
| collapse | 邊框合併，相鄰共用 |
示例程式碼：
<html><head><title>邊框合併</title><styletype="text/css">table,th,td { border:1px solid black;}table{border-collapse:collapse;}</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></tbody><tfoot><tr><td>彙總格1</td><td>彙總格2</td></tr></tfoot></table></body></html>
設定表格邊框合併時，只需要針對table設定就可以了。
表格邊框間距border-spacing:
在css中，我們可以使用它來定義表格邊框間距。
語法：
border-spacing:畫素值；該屬性指定單元格邊界之間的距離。指定一個畫素值時，作用於橫向和縱向的間距；當指定兩個值時，第一個作用於橫向間距，第二個作用於縱向間距。
示例程式碼：
<html><head><title>表格間距</title><styletype="text/css">table,th,td { border:1px solid black;}table{border-spacing:15px 20px;}</style></head><body><table><tr><th>表頭1</th><th>表頭2</th></tr><tr><td>單元格1</td><td>單元格2</td></tr><tr><td>彙總格1</td><td>彙總格2</td></tr></table></body></html>
下節我們接著分享表格的內容。
