rowspan 與 colspan 的用法<caption>、<thead>、<tbody>、<tfoot> 的完整結構<table> 的第一行,描述內容用途。<body>
  <h1>表格進階示範</h1>
  <table border="1">
    <caption>學生成績單</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>分數</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">小明</td>
        <td>國文</td>
        <td>85</td>
      </tr>
      <tr>
        <td>數學</td>
        <td>90</td>
      </tr>
      <tr>
        <td>小華</td>
        <td colspan="2">缺考</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">註:缺考以 0 分計算</td>
      </tr>
    </tfoot>
  </table>
</body>

<caption> → ✅ 加上表格標題,提升可理解性<td> → ✅ 表頭應使用 <th>,語意更清楚<tbody> → ✅ 搭配 <thead>、<tfoot> 劃分結構rowspan / colspan 寫錯 → ✅ 確認數字對應的列數或欄數<caption> 的表格rowspan 合併姓名colspan 合併科目<thead>、<tbody>、<tfoot>
今天進一步學習表格,特別是 rowspan 與 colspan,讓我更靈活地處理數據顯示。以前覺得表格很死板,但現在知道其實能做出很漂亮的排版。
在練習時,我做了一份簡單的成績單,透過 rowspan 把同一個學生的多科成績合併起來,看起來整齊很多。而 colspan 也很實用,像是要合併「備註」或「總分」欄位時,就能一次跨多欄。
我覺得 <thead>、<tbody>、<tfoot> 對理解表格架構非常有幫助,不只是程式碼乾淨,也讓輔助工具與搜尋引擎能更好地解讀內容。
今天的練習讓我體會到表格是資訊整理的利器,只要善用結構與屬性,就能清楚表達複雜的數據。