3.10-biao-ge-yang-shi.md

3.17 表格樣式

HTML 基本結構

<table>
  <tbody>
    <tr>
      <td>第1列，第1欄</td>
      <td>第1列，第2欄</td>
    </tr>
    <tr>
      <td>第2列，第1欄</td>
      <td>第2列，第2欄</td>
    </tr>
  </tbody>
</table>

結果(會發現預設的狀態是毫無邊框的)：

呈現邊框(border)

CSS：

table{
  border:1px solid black;
}
table td, table th{
  border:1px solid black;
}

結果：會發現各欄位的邊框都會有些間距：

border-collapse 合併

可選的值有：

• separate：這是預設值。
• collapse：可讓各欄位直接緊鄰合併，而邊框還是會存在。

例如 CSS 改成下方：

table{
  border:1px solid black;
  border-collapse: collapse;
}
table td, table th{
  border:1px solid black;
}

結果呈現：

範例：

{% embed url="https://codepen.io/carlos411/pen/xxKPBNO" %}

介紹 border

border: 1px solid black;

等同於：

border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;

等同於(較少用)：

border-width: 1px;
border-style: solid;
border-color: black;

除了「solid」之外，還有其它的 border-style 樣式，可看此連結，參考下圖的「Demo」：

table-layout

可設定的有：

• auto：欄寬會依據內容動態調整。
• fixed：欄寬會平均分布。

例：

{% embed url="https://codepen.io/carlos411/pen/qBQGQoG" %}