HTML 中表格（Table）

 在 HTML 中，表格（Table）是用來呈現結構化數據（例如課表、價目表）的最佳工具。

表格的結構像是一個巢狀盒子：先定義表格，再定義「列（橫排）」，最後在列裡面放進「儲存格」。

---

1. 表格的基本標籤

標籤	全名	說明
<table>	Table	定義整個表格的範圍。
<tr>	Table Row	定義表格的一行（橫排）。
<th>	Table Header	定義標題儲存格（文字會自動加粗並置中）。
<td>	Table Data	定義一般資料儲存格。

---

2. 基礎表格範例

這是一個簡單的產品價目表：

HTML

<table border="1">
  <tr>
    <th>品名</th>
    <th>價格</th>
  </tr>
  <tr>
    <td>美式咖啡</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>鮮奶茶</td>
    <td>$65</td>
  </tr>
</table>

---

3. 進階：加上 CSS 讓表格變漂亮

預設的 HTML 表格非常簡陋。通常我們會透過 CSS 來調整邊框、間距和顏色。請嘗試將以下代碼放入你的網頁中：

HTML

<style>
  table {
    width: 100%;             /* 表格寬度佔滿 100% */
    border-collapse: collapse; /* 合併邊框，不會有雙線感 */
    margin: 20px 0;
    font-family: sans-serif;
  }
  
  th, td {
    border: 1px solid #ddd;  /* 加上細邊框 */
    padding: 12px;           /* 增加內容與邊框的距離 */
    text-align: left;        /* 文字靠左 */
  }

  th {
    background-color: #4CAF50; /* 標題背景變綠色 */
    color: white;              /* 標題文字變白色 */
  }

  /* 隔行變色效果 (滑過會變色) */
  tr:nth-child(even) { background-color: #f2f2f2; }
  tr:hover { background-color: #ddd; }
</style>

<table>
  <thead>
    <tr>
      <th>技能名稱</th>
      <th>掌握程度</th>
      <th>學習筆記</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>熟練</td>
      <td>結構標籤與表格</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>學習中</td>
      <td>顏色、字體與排版</td>
    </tr>
  </tbody>
</table>

---

4. 表格進階技巧：合併儲存格

有時候你需要讓一個儲存格橫跨多欄或多列，這時會用到這兩個屬性：

• colspan="數字"：橫跨多欄（水平合併）。

• rowspan="數字"：橫跨多列（垂直合併）。

---