CSS Table 表格
HTML Table Border 表格的 CSS 樣式設計可以讓網頁更加美觀和容易閱讀。設計 HTML 表格的樣式,取決於設計者的需求和風格,透過 CSS 就不需要在 HTML 內用到 border, cellpadding, cellspacing 的屬性。
CSS 屬性使用 border-collapse 可以代替 cellspacing=0 的宣告。CSS 中的 border-collapse : collapse || separate 可以設置表格的邊框是否被「合併」成一個邊框。
collapse 表格邊框和單元格之間的空間會被合併,表格邊框和單元格的邊框會重疊在一起,形成連續的邊框。
separate 表格邊框和單元格之間的空間會分開,即表格邊框和單元格的邊框會分開,形成獨立的邊框。
border-collapse: collapse
設置表格的邊框被合併成一個邊框
TH Header | TH Header | TH Header |
---|---|---|
TF foot | TF foot | TF foot |
row 1 | row 1 | row 1 |
row 2 | row 2 | row 2 |
HTML
<table class="TB_COLLAPSE">
<caption>Table Caption TB_COLLAPSE</caption>
<thead>
<tr>
<th>TH Header</th>
<th>TH Header</th>
<th>TH Header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>TF foot</td>
<td>TF foot</td>
<td>TF foot</td>
</tr>
</tfoot>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
</table>
CSS
table.TB_COLLAPSE {
width:100%;
border-collapse:collapse;
}
table.TB_COLLAPSE caption {
padding:10px;
font-size:24px;
background-color:#f3f6f9;
}
table.TB_COLLAPSE thead th {
padding:5px 0px;
color:#fff;
background-color:#915957;
}
table.TB_COLLAPSE tbody td {
padding:5px 0px;
color:#555;
text-align:center;
background-color:#fff;
border-bottom:1px solid #915957;
}
table.TB_COLLAPSE tfoot td {
padding:5px 0px;
text-align:center;
background-color:#d6d6a5;
}
border-collapse: separate
TH Header | TH Header | TH Header |
---|---|---|
TF foot | TF foot | TF foot |
row 1 | row 1 | row 1 |
row 2 | row 2 | row 2 |
CSS
table.TB_SEPARATE {
width:100%;
border-collapse:separate; /*邊框沒有合併*/
}