表格邊框樣式
在網頁裡使用表格時，一定會設定「邊框」，除了基本邊框樣式屬性，表格元素也有自己特有的邊框樣式屬性，透過 border-collapse 和 border-spacing 控制重疊或分離邊框，這篇教學會介紹表格邊框的樣式屬性。
快速導覽：
border-collapse 邊框重疊
border-collapse 是專屬顯示類型為 table 或 inline-table 的樣式屬性，具有繼承特性，這個樣式屬性可以控制表格裡每個儲存格邊框的「重疊」或「分離」，屬性值說明如下：
| 屬性值 | 說明 |
|---|---|
| separate | 邊框分離 ( table 元素預設值 )。 |
| collapse | 邊框重疊。 |
下方範例會呈現不同 border-collapse 屬性值的表格 ( 有額外設定表格邊框樣式 )，從中可以注意到，table 本身也可以設定邊框，如果處於邊框重疊樣式狀態，table 的邊框也會與 td 重疊而合併成單一邊框，且會忽略 padding 的設定。
<!-- HTML 程式碼 -->
<table class="a">
<tr><td>apple</td><td>oxxo</td></tr>
<tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="b">
<tr><td>apple</td><td>oxxo</td></tr>
<tr><td>banana</td><td>papaya</td></tr>
</table>
<!-- CSS 程式碼 -->
<style>
table {
border: 1px solid #000;
margin: 10px;
padding: 10px;
}
td {
border: 1px solid #000;
padding: 10px;
}
.a {border-collapse: collapse;}
.b {border-collapse: separate;}
</style>
邊框重疊的優先順序
有別於表格裡各個元素有「階層」之分，邊框重疊時也有順序之分，下方列出重疊時採用邊框樣式的權重，權重從上到下，越上方權重越高，就會優先顯示。
- 邊框樣式設定為
hidden，所有重疊的邊框都會被隱藏。- 寬度大的邊框優先顯示。
- 邊框樣式權重順序：double > solid > dashed > dotted > ridge > outset > groove > inset > none。
- 如果上述都相同，邊框顏色會按照表格各個元素的階層排列，參考「表格元素排列階層」。
下方範例使用四個 div，分別代表邊框重疊時的四種權重表現。
<!-- HTML 程式碼 -->
<table class="a">
<tr><td>apple</td><td>oxxo</td></tr>
<tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="b">
<tr><td>apple</td><td>oxxo</td></tr>
<tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="c">
<tr><td>apple</td><td>oxxo</td></tr>
<tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="d">
<tr><td>apple</td><td>oxxo</td></tr>
<tr><td>banana</td><td>papaya</td></tr>
</table>
<!-- CSS 程式碼 -->
<style>
table {
margin: 10px;
padding: 10px;
border-collapse: collapse;
}
td {
border: 3px dashed red;
padding: 10px;
}
.a {border: hidden;} /* 重疊部分隱藏 */
.b {border: 5px dotted blue;} /* 重疊部分使用 5px 粗的這組邊框樣式 */
.c {border: 3px solid green;} /* 重疊部分使用 solid 的這組邊框樣式 */
.d {border: 3px dashed green;} /* 重疊部分使用 td 的邊框樣式，因為 td 權重比 table 高 */
</style>
如果在重疊邊框的狀態下，設定不同 td 的邊框，也可以因為權重所產生的重疊效果，例如正中間的儲存格就不會有邊框，因為設定 hidden 的權重最大。
<!-- HTML 程式碼 -->
<table>
<tr>
<td class="a">A</td>
<td class="b">B</td>
<td class="c">C</td>
</tr>
<tr>
<td class="i">I</td>
<td class="j">J</td>
<td class="k">K</td>
</tr>
<tr>
<td class="x">X</td>
<td class="y">Y</td>
<td class="z">Z</td>
</tr>
</table>
<!-- CSS 程式碼 -->
<style>
table {
margin: 10px;
padding: 10px;
border-collapse: collapse;
}
td {padding: 10px 20px;}
.a {border: 10px dashed red;}
.b {border: 5px solid orange;}
.c {border: 5px dotted green;}
.i {border: 10px solid cyan;}
.j {border: hidden;}
.k {border: 10px dotted pink;}
.x {border: 5px solid black;}
.y {border: 10px dashed gray;}
.z {border: 10px double blue;}
</style>
border-spacing 邊框間距
border-spacing 是專屬顯示類型為 table 或 inline-table 的樣式屬性，具有繼承特性，這個樣式屬性可以控制表格裡「儲存格邊框與邊框」之間的「間距」，間距會從邊框外緣延伸出去，border-spacing 支援所有長度單位，通常使用絕對長度 px 作為單位。
注意，表格儲存格元素並不支援
margin外邊界的樣式屬性，需要使用border-spacing設定間隔。
在沒有設定 border-spacing 且 border-collapse:separate 的狀態下，表格裡每個儲存格預設採用 2px 的間距，設定後就會按照設定值進行間隔，下方範例將表格設定為 border-spacing:10px。
<!-- HTML 程式碼 -->
<table>
<tr><td>apple</td><td>oxxo</td></tr>
<tr><td>banana</td><td>orange</td></tr>
</table>
<!-- CSS 程式碼 -->
<style>
table {
border: 20px solid #000;
padding: 20px;
border-spacing: 20px;
}
td {
border: 20px solid #000;
width: 120px;
height: 100px;
background: orange;
}
</style>
border-spacing 支援「兩個數值」的屬性值，使用一個數值表示上下左右都是同樣間距，使用兩個數值表示「左右、上下」間距，下方範例將剛剛的程式碼改成兩個數值，就能清楚看到上下的間距變成 5px，左右仍然維持 20px。
table {
border: 20px solid #000;
padding: 20px;
border-spacing: 20px 5px; /* 左右 20px，上下 5px */
}
td {
border: 20px solid #000;
width: 120px;
height: 100px;
background: orange;
}
小結
表格的邊框雖然與一般網頁元素的邊框大同小異，但又具有自己專屬的設定樣式，特別是重疊與分開的特性，有時會讓初學者不容易掌握，透過這邊教學的介紹，應該就能對表格邊框有更深一層的認識。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～