Learning Objectives
- 用 table、tr、th、td 寫出表格，並用 caption 說明表格的主題
- 用 thead、tbody、tfoot 分出表頭、內容與表尾，用 scope 標出 th 是哪一欄或哪一列的標題
- 用 rowspan、colspan 合併儲存格，並知道被合併佔住的儲存格不能再寫
- 判斷什麼內容適合用表格，說明為什麼不該用表格排版
表格是有兩個方向的資料
課表、成績單、價目表有一個共同點：每一格的意思要同時看它在哪一列、哪一欄才知道。 「80%」單獨看沒有意義，要知道它在「第 1 組」那一列、「完成度」那一欄，才讀得懂。
看得到畫面的人用眼睛對齊行列就好；螢幕閱讀器的使用者一次只聽到一格， 所以表格的 HTML 要把「這一格屬於哪個標題」寫清楚，螢幕閱讀器才能在唸到「80%」時一併唸出「第 1 組、完成度」。
這一課學：
- 表格的基本結構與標題儲存格
- 表頭、內容、表尾與表格標題
- 合併儲存格
- 什麼時候不該用表格
table、tr、th、td
<table>
<caption>期中專題進度</caption> <!-- 表格的標題，放在 table 的第一個 -->
<tr> <!-- table row：一列 -->
<th scope="col">組別</th> <!-- table header：標題儲存格 -->
<th scope="col">完成度</th>
</tr>
<tr>
<th scope="row">第 1 組</th>
<td>80%</td> <!-- table data：資料儲存格 -->
</tr>
</table>
| 元素 | 意思 |
|---|---|
<table> |
整張表格 |
<caption> |
表格的標題，螢幕閱讀器進入表格時會先唸它；要放在 table 裡的第一個 |
<tr> |
一列（row）。HTML 是一列一列寫的，沒有「一欄」的元素 |
<th> |
標題儲存格，預設粗體、置中 |
<td> |
資料儲存格 |
th 的 scope 屬性說明它是誰的標題：
scope="col"：這一欄的標題（通常是第一列的 th）scope="row"：這一列的標題（通常是每列第一格的 th）
簡單的表格瀏覽器通常猜得出來，但有些輔助科技會猜錯，寫清楚比較保險。
thead、tbody、tfoot
列可以再分成三組：
<table>
<caption>期中專題進度</caption>
<thead> <tr>…標題列…</tr> </thead>
<tbody> <tr>…資料…</tr> <tr>…資料…</tr> </tbody>
<tfoot> <tr>…平均、合計…</tr> </tfoot>
</table>
thead：表頭，放欄標題。表格很長、列印成好幾頁時，瀏覽器可以在每一頁重複表頭。tbody：表格的內容。tfoot：表尾，放合計、平均這類整理過的列。
就算你沒寫 tbody，瀏覽器解析時也會自動補上一個，把 tr 放進去。
下面的練習一開始沒有寫 tbody，你可以在右邊的 DOM 樹看到它已經出現了。
合併儲存格：rowspan 與 colspan
一格要跨好幾列或好幾欄時：
rowspan="2"：往下佔 2 列colspan="3"：往右佔 3 欄
合併最容易出錯的地方是：被合併佔住的位置不能再寫儲存格。
<tr>
<th scope="row">18:00</th>
<td rowspan="2">新手班</td> <!-- 佔住 18:00 與 19:00 兩列 -->
<td>進階班</td>
</tr>
<tr>
<th scope="row">19:00</th>
<!-- 這一列的「週二」已經被上面佔住，不能再寫 -->
<td>進階班</td>
</tr>
如果 19:00 那一列還寫了三格，第三格會被擠到第四欄，表格右邊凸出一塊。
colspan 也一樣：一格 colspan="2"，同一列就要少寫一格。
下面的工具可以點選範圍合併，左邊是瀏覽器真的排出來的表格，右邊同步寫出 HTML，並標出每一列被佔住了幾格。
小測驗：表格的結構
<th scope="row">第 1 組</th> 的 scope="row" 是什麼意思？
表格的標題「期中專題進度」應該寫在哪裡？
原始碼裡沒有寫 <tbody>，把 <tr> 直接放在 <table> 裡。瀏覽器解析後的 DOM 樹會是？
一張 3 欄的表格，第 2 列有一格 <td rowspan="2">。第 3 列（下一列）應該寫幾個儲存格？
表格只放表格資料
早期的網頁沒有好用的排版工具，常把整頁放進一張大表格，用儲存格切出左側選單與右邊內文。現在不要這樣做：
- 螢幕閱讀器會把它當成資料表格，唸出「表格，2 欄 1 列」，再一格一格唸，使用者以為裡面是資料。
- 表格的版面固定，手機上沒辦法把左右兩欄改成上下排列。
- 原始碼多了一堆 tr、td，難讀也難改。
判斷方法：把內容拿掉格線，它還是不是一張「行與列都有意義」的資料？ 是的話用表格，例如課表、成績、比較表； 只是想把東西排成兩欄、三欄的話，交給 CSS 的 Flexbox 與 Grid（第 17～20 課）。
另一個常見的問題是寬表格在手機上：欄位一多，表格會比螢幕還寬，把整頁撐出橫向捲軸。
常見的作法是把表格包在一個容器裡，用 CSS 的 overflow-x: auto 讓表格在容器裡自己左右捲動，頁面本身不會變寬（第 16 課會介紹 overflow）。
小測驗：合併與用途
一格寫了 <td colspan="3">午休</td>，在一張 4 欄的表格裡，這一列還要寫幾個儲存格？
下面哪一個內容最不適合用表格？
<td rowspan="2"> 合併後，原本被蓋住的那一格裡的文字會怎樣？
重點整理
- 表格一列一列寫：
tr裡放th（標題）與td（資料）；caption是表格的標題，放在第一個。 th加scope="col"（欄標題）或scope="row"（列標題），螢幕閱讀器才能把資料與標題對起來。thead、tbody、tfoot分出表頭、內容與表尾；沒寫 tbody 時瀏覽器會自動補上。rowspan往下合併、colspan往右合併；被佔住的位置不能再寫儲存格。- 表格只放行列都有意義的資料；排版交給 CSS。寬表格在手機上要讓它在容器裡左右捲動。
下一課講表單：輸入框、選項、送出按鈕，以及瀏覽器怎麼把資料送到伺服器。