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

設置表格的邊框被合併成一個邊框

Table Caption TB_COLLAPSE
TH HeaderTH HeaderTH Header
TF footTF footTF foot
row 1row 1row 1
row 2row 2row 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

Table Caption TB_SEPARATE
TH HeaderTH HeaderTH Header
TF footTF footTF foot
row 1row 1row 1
row 2row 2row 2

CSS

table.TB_SEPARATE {
  width:100%;
  border-collapse:separate; /*邊框沒有合併*/
}