HTML 表格與表單入門：5 步驟做出課表與意見回饋單

想在網頁上放一份課表、價目表，或是讓訪客填寫意見回饋？這時就需要 HTML 的「表格」與「表單」。表格負責整齊地呈現資料，表單負責蒐集訪客輸入的資料，是做網頁很常用的兩項功能。

本文延續前兩篇〈HTML 入門教學〉與〈CSS 入門教學〉的 myweb 資料夾，用「記事本」與瀏覽器，以 5 個步驟帶你做出一份課表與一張意見回饋單。文中的圖片為示意圖，不是實際畫面。

先搞懂：表格是怎麼組成的？

HTML 的表格是「一列一列」堆疊起來的，每一列再由「一格一格」的儲存格組成。只要記住三個標籤：

• <table>：整張表格。
• <tr>：一列（table row）。
• <td>：一個儲存格（table data）；若是表頭則用 <th>（table header）。

圖 1　HTML 表格程式碼與畫面的對應（示意圖）

步驟一：做出第一張表格

打開 index.html，在 </body> 之前加入下面的程式：

<h2>我的一週課表</h2>
<table>
  <caption>上午課程</caption>
  <tr>
    <th>節次</th>
    <th>星期一</th>
    <th>星期二</th>
  </tr>
  <tr>
    <td>第 1 節</td>
    <td>國文</td>
    <td>數學</td>
  </tr>
  <tr>
    <td>第 2 節</td>
    <td>英文</td>
    <td>自然</td>
  </tr>
</table>

<caption> 是表格的標題，會顯示在表格上方。存檔後用瀏覽器開啟，你會看到文字排成了三欄，但沒有框線，看起來還不像表格，下一步就來解決。

小提醒：每一列的儲存格數量要一致（有合併儲存格時例外，步驟三會說明），否則表格會參差不齊。

步驟二：用 CSS 加上框線與間距

表格的外觀交給 CSS 處理。打開 style.css，在最後面加入：

table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}

th, td {
  border: 1px solid #94a3b8;
  padding: 8px 12px;
  text-align: center;
}

th {
  background-color: #dbeafe;
}

caption {
  font-weight: bold;
  margin-bottom: 6px;
}

• border-collapse: collapse：把相鄰儲存格的框線合併成一條，不然會變成雙線。
• width: 100%：讓表格填滿內容區的寬度。
• th, td：中間用逗號分隔，代表「同時選取 th 與 td」，兩者共用同一組設定。
• padding：讓文字與框線之間留點空間，閱讀更舒服。

重新整理瀏覽器，一張有框線、表頭有底色的課表就完成了。

步驟三：合併儲存格

有時候，一個項目會橫跨好幾欄，或直跨好幾列，例如「午休」或兩節連堂的課。這時要用兩個屬性：

• colspan：橫向合併，往右跨越幾欄。
• rowspan：縱向合併，往下跨越幾列。

在剛才的表格最後一列後面、</table> 之前，加入以下內容：

  <tr>
    <td>中午</td>
    <td colspan="2">午餐與午休</td>
  </tr>
  <tr>
    <td>第 3 節</td>
    <td rowspan="2">體育</td>
    <td>美術</td>
  </tr>
  <tr>
    <td>第 4 節</td>
    <td>音樂</td>
  </tr>

請特別留意最後一列：因為星期一的「體育」往下占了兩列，所以第 4 節這一列只需要寫 2 個儲存格，被占掉的位置不用再寫。這是新手最容易算錯的地方。

圖 2　橫向合併（colspan）與縱向合併（rowspan）（示意圖）

步驟四：認識表單，做出文字輸入欄位

表單（form）可以讓訪客輸入資料。整份表單用 <form> 包起來，裡面再放各種輸入元件。我們先做最常見的「姓名」與「信箱」欄位，在 index.html 的 </body> 之前加入：

<h2>意見回饋單</h2>
<form action="#" method="post">
  <p>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="請輸入姓名">
  </p>
  <p>
    <label for="email">信箱：</label>
    <input type="email" id="email" name="email" placeholder="example@mail.com">
  </p>
</form>

• <form>：表單的外框。action 是資料要送到哪裡處理，method 是送出的方式（post 或 get）。
• <input>：輸入欄位，用 type 決定種類。text 是一般文字，email 會要求符合信箱格式。<input> 沒有結束標籤。
• name：欄位的名稱，資料送出時就是靠它來辨識，一定要寫。
• placeholder：欄位裡的淡色提示文字，開始輸入後就會消失。
• <label>：欄位的說明文字。它的 for 要和 <input> 的 id 相同，兩者才會連結在一起。

圖 3　for 與 id 的對應關係（示意圖）

步驟五：加入選項、留言框與送出按鈕

表單還有許多常用的元件。請把下面的內容，加在 </form> 之前：

  <p>文章難易度：
    <label><input type="radio" name="level" value="easy"> 簡單</label>
    <label><input type="radio" name="level" value="normal"> 適中</label>
    <label><input type="radio" name="level" value="hard"> 困難</label>
  </p>

  <p>想看的主題（可複選）：
    <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    <label><input type="checkbox" name="topic" value="php"> PHP</label>
    <label><input type="checkbox" name="topic" value="office"> Office</label>
  </p>

  <p>
    <label for="from">你從哪裡得知本站：</label>
    <select id="from" name="from">
      <option value="search">搜尋引擎</option>
      <option value="friend">朋友推薦</option>
      <option value="other">其他</option>
    </select>
  </p>

  <p>
    <label for="msg">想對我們說：</label><br>
    <textarea id="msg" name="msg" rows="4" cols="40"></textarea>
  </p>

  <p>
    <button type="submit">送出</button>
    <button type="reset">清除重填</button>
  </p>

元件	寫法	適合用在
單選按鈕	type="radio"	多選一（同組 name 要相同）
核取方塊	type="checkbox"	可複選
下拉選單	<select> + <option>	選項很多時，節省空間
多行文字框	<textarea>	留言、意見
按鈕	<button type="submit">	送出或清除表單

最後在 style.css 補上一點樣式，讓表單更好看：

input[type="text"], input[type="email"], select, textarea {
  padding: 6px 8px;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 8px 18px;
  background-color: #1f6feb;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

存檔後重新整理，你的網頁上就會有一份課表和一張完整的意見回饋單了。

重要觀念：表單只負責「蒐集」資料，要真正把資料送到你的信箱或資料庫，還需要「伺服器端程式」（例如 PHP）來接收與處理。本文的 action="#" 只是示範，按下「送出」並不會真的把資料寄給誰。這部分是下一階段要學習的內容。

新手常見問題

• 表格沒有框線：HTML 的表格預設沒有框線，要在 style.css 用 border 設定。
• 合併儲存格後表格亂掉：檢查被合併占掉的位置，是否還多寫了儲存格。計算每一列「實際占用的欄數」，要等於表格的總欄數。
• 單選按鈕可以同時選好幾個：同一組的 name 必須完全相同，瀏覽器才知道它們是同一組。
• 點文字沒辦法選到選項：檢查 <label> 的 for 與欄位的 id 是否一致，或是直接用 <label> 把 <input> 包起來。
• 表單按送出後畫面重新整理：這是正常現象，因為沒有伺服器程式處理，資料不會被保存。

小練習：做一張「活動報名表」

1. 用表格做出一份「活動時間表」，至少 3 欄 4 列，並用 colspan 合併一個「休息時間」。
2. 做一張報名表，包含姓名、電話、信箱三個文字欄位。
3. 用單選按鈕詢問「是否需要素食」。
4. 用核取方塊讓報名者勾選想參加的活動。
5. 用 CSS 替表格與按鈕換上你喜歡的顏色。

結語

表格的重點是 table → tr → td／th 這層層包住的結構，表單的重點則是 每個欄位都要有 name，並用 label 說明用途。學會這兩項，你的網頁就能整齊地呈現資料，也能與訪客互動。下一步，可以開始學習 JavaScript，讓網頁能檢查表單內容、回應使用者的操作。