# 3.17 表格樣式

HTML 基本結構

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

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

![](/files/-Lm_NE1QZaWjgMZlvGDB)

## 呈現邊框(border)

CSS：

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

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

![](/files/-Lm_NQWs5vuZ54ju6EsZ)

## border-collapse 合併

可選的值有：

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

例如 CSS 改成下方：

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

結果呈現：

![](/files/-Lm_NdTU9y5IingUjHXf)

範例：

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

## 介紹 border

```css
border: 1px solid black;
```

等同於：

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

等同於(較少用)：

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

除了「**solid**」之外，還有其它的 `border-style` 樣式，可看[此連結](https://www.w3schools.com/cssref/pr_border-style.php)，參考下圖的「Demo」：

<figure><img src="/files/SF8KcNaOuXAuVS2VUSky" alt=""><figcaption></figcaption></figure>

## table-layout

可設定的有：

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

例：

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html-and-css/3.-css/3.10-biao-ge-yang-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
