> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/html-and-css/3.-css/3.10-biao-ge-yang-shi.md).
# 3.17 表格樣式
HTML 基本結構
```markup
第1列，第1欄
第1列，第2欄
第2列，第1欄
第2列，第2欄
```
結果(會發現預設的狀態是毫無邊框的)：
## 呈現邊框(border)
CSS：
```css
table{
border:1px solid black;
}
table td, table th{
border:1px solid black;
}
```
結果：會發現各欄位的邊框都會有些間距：
## border-collapse 合併
可選的值有：
* `separate`：這是預設值。
* `collapse`：可讓各欄位直接緊鄰合併，而邊框還是會存在。
例如 CSS 改成下方：
```css
table{
border:1px solid black;
border-collapse: collapse;
}
table td, table th{
border:1px solid black;
}
```
結果呈現：
範例：
{% embed url="" %}
## 介紹 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」：
" %}