# DAY13 - HTML Table 標籤 與 CSS 設計

### 表格的標籤 - table

- 建立 table，表示這個區間內為表個內容:

<table>
...
</table>

### tr 是什麼?

- tr 裡頭的 r 代表著 row 方向性的縮寫，意旨裡面的內容皆為橫向:

<table>
    <tr>
    ...
    </tr>
</table>

### th , td

- 確認好資料的流向後，th,td 為表格要被顯示的內容:

1. th - 表格標題
2. td - 表格內容

<table>
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題三</th>
  </tr>
  <tr>
    <td>內容一</td>
    <td>內容二</td>
    <td>內容三</td>
  </tr>
    <tr>
    <td>內容一</td>
    <td>內容二</td>
    <td>內容三</td>
  </tr>
</table>

- 其顯示如下:


### 替表格設計 CSS 樣式

#### 加入 border 線條:

th , td {
  border: 1px solid #000;
}

#### 有效果，但不是我們預期想要的效果:


#### 使用兩個語法:

- 開始之前，我們可以到 css reset 網站上看到這段語法的秘密:

// 這部分是針對 table 優化的 css reset

table {
	border-collapse: collapse;
	border-spacing: 0;
}

- border-collapse:

// collapse 中文翻譯為崩塌，不過這項功能可以讓 border 與 border 之間黏合再一起。

根據 wibibi 網頁設計百科的解釋如下:

功能是用來將表格欄位邊框合併，讓表格變得更美化

#### 加入 border-collapse: collapse;

- 這段效果請直接加在 table 標籤

table {
  border-collapse: collapse;
}

th , td {
  border: 1px solid #000;
}


- 加入之後，**框線確實黏合起來了**。

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-table 篇`