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> 對理解表格架構非常有幫助，不只是程式碼乾淨，也讓輔助工具與搜尋引擎能更好地解讀內容。
今天的練習讓我體會到表格是資訊整理的利器，只要善用結構與屬性，就能清楚表達複雜的數據。
iThome鐵人賽
看影片追技術