CSS Table 表格

制定表格的樣式，透過 CSS 就不需要在 HTML 內用到 border, cellpadding, cellspacing 的屬性。

CSS 屬性使用 border-collapse 可以代替 cellspacing=0 的宣告。

CSS 中的 border-collapse : collapse || separate 可以設置表格的邊框是否被合併成一個邊框。

border-collapse: collapse

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

Table Caption TB_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

Table Caption TB_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; /*邊框沒有合併*/
}