HTML 表格 table：結構、合併儲存格與無障礙寫法
以二維資料表來呈現資訊，適合數據類的網站使用。它由 <table>、<tr>、<th>、<td> 四個標籤組成，可再用 <caption>、<thead>、<tbody> 補強結構；它是拿來放資料的，不是拿來排版的。
表格標籤的功能
<table>、<tr>、<th>、<td> 為表格中常見到的四個標籤。
<table>: 包覆表格內容。<tr>: 表格的列數。<th>: 表格的欄位、欄位標題。（預設：粗體字、文字置中）<td>: 表格的欄位。
非必要使用
<caption>、<thead>、<tbody>、<tfoot>。
<caption>: 表格的標題。<thead>: 表格的首列。<tbody>: 表格的內容。<tfoot>: 表格的尾列。
<table>
<caption>購物清單</caption>
<thead>
<tr>
<th>商品名稱</th>
<th>數量</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone 20 Pro Max</td>
<td>1</td>
<td>43,000</td>
</tr>
<tr>
<td>iPad mini</td>
<td>1</td>
<td>16,900</td>
</tr>
<tr>
<td>Mac mini M20 Pro</td>
<td>1</td>
<td>46,900</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">合計</th>
<td>106,800</td>
</tr>
</tfoot>
</table>| 商品名稱 | 數量 | 價格 |
|---|---|---|
| iPhone 20 Pro Max | 1 | 43,000 |
| iPad mini | 1 | 16,900 |
| Mac mini M20 Pro | 1 | 46,900 |
| 合計 | 106,800 | |
colspan
在該列中，設定合併欄位數量。
<tr>
<th colspan="2">合計</th>
<td>106,800</td>
</tr>rowspan
在該欄中，設定合併列位數量。
<tr>
<th rowspan="2">水果</th>
<td>蘋果</td>
</tr>
<tr>
<td>葡萄</td>
</tr>小提醒
合併之後，被覆蓋掉的那幾個 <td> 要記得刪除。多留了格子，整個表格就會跑版。
讓表格能被讀懂
表格的每一格對螢幕閱讀器來說都只是一個值，靠 <th> 才能知道它屬於哪一欄。欄與列都有表頭時，可以用 scope 標明方向：
<tr>
<th scope="col">商品名稱</th>
<th scope="col">價格</th>
</tr>
<tr>
<th scope="row">iPad mini</th>
<td>16,900</td>
</tr><caption> 則是整個表格的標題，寫在 <table> 的第一行，能讓使用者在進入表格前就知道這份資料在講什麼。
表格不是排版工具
早期沒有 CSS 的排版能力時，網頁常用表格切版。現在請把版面交給 CSS 的 flex 或 grid，<table> 只留給真正的二維資料。用表格排版會讓輔助工具把版面結構誤讀成資料，在手機上也很難調整。
小提醒
表格在窄螢幕上容易撐破版面，可以在外層包一個容器並加上 overflow-x: auto，讓表格自己橫向捲動。
常見問題
th 和 td 有什麼不同？
<th> 是表頭儲存格，用來標示這一欄或這一列代表什麼；<td> 是一般的資料儲存格。除了預設樣式不同，螢幕閱讀器也會依 <th> 把資料念成 某欄位是某值，這是表格能被讀懂的關鍵。
可以用表格來排版嗎？
不要。表格的語意是二維資料，拿來排版會讓輔助工具把版面結構誤讀成資料，在手機上也難以調整。版面請交給 CSS 的 flex 或 grid。
thead、tbody、tfoot 一定要寫嗎？
不是必要，但建議寫。它們讓表格的頭、身、尾層次分明，長表格捲動時瀏覽器也能讓表頭固定顯示，對閱讀與維護都有幫助。
colspan 與 rowspan 怎麼分？
colspan 是橫向合併，往右吃掉幾格；rowspan 是縱向合併，往下吃掉幾列。合併之後被覆蓋的那幾格要記得刪掉，否則整個表格會跑版。
