---
# System prepended metadata

title: 無障礙網頁切版 - 表格
tags: [無障礙網頁, Accessibility]

---

{%hackmd @s6102161021/greenTheme %}


## 章節8 - 表格
![](https://hackmd.io/_uploads/rJ0Maybon.png =100%x)
![](https://hackmd.io/_uploads/B1OZR1-in.png =100%x)

```htmlmixed
<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table> 
```
### <strong>補充:</strong>
<div class="addInfo">
    
另外還有[＜colgroup＞](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)和[＜col＞](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col)( 通常不會特別去使用 )
</div>


<div class="aStyle">
    
[範例: 表格結構範例](https://codepen.io/judyshyu/pen/wvjWyrX)
</div> 

### 1. 排版表格
因為排版需求，用＜table＞來排版，實際內容並非表格資料，如EDM、古早網站或任何用＜table＞切版較快的情形
- 不要主動拿＜table＞來排版
- 不得以需要使用時，注意:
    - ＜table＞內除了＜td＞以外不要使用任何其他上述的 HTML tag，以免造成更多語義上的混亂
    - 在＜table＞加上 role="presentation"，表明這是裝飾性的內容，不需要被讀出
    - 不要把這種表格放在資料表格內

### 2. 模擬表格
與資料表格接近，有表格的外觀和二維特性，但用＜div＞或＜ul＞＜li＞搭配CSS來呈現資料

- 避免使用這種方式來撰寫表格
    - 與其使用一大堆 ARIA 標籤，不如盡量使用原生的語義化 HTML tag 對使用者更友善
    - role="table" 算是較新的 ARIA 內容，它的支援度尚未完全普及

<div class="aStyle">
    
[範例: 模擬表格](https://codepen.io/judyshyu/pen/gOzMXQV)
</div> 

### 3. 資料表格
使用＜table＞的HTML結構來呈現二維資料，即原生的寫法

#### 加入＜caption＞(和summary)
- 無障礙表格必須帶有標題＜caption＞
    - ＜caption＞必須放在＜table＞內的第一個元件，不能是最後一個
    - 視覺上可以藉由 CSS 來把標題的位置移到表格下方
- 若表格內容複雜，可以補充摘要(summary)來加強說明表格內容，但內容不要與標題重複
- 摘要的[三種寫法](https://codepen.io/judyshyu/pen/vYjXEQN?editors=1000)

#### ＜thead＞、＜tbody＞、＜tfoot＞
- ＜thead＞和＜tfoot＞只能有一個，＜tbody＞可以有多個，三者內都必須有至少一個＜tr＞
- ＜thead＞必須放在＜caption＞或＜colgroup＞之後、在＜tbody＞、＜tfoot＞之前
- ＜tfoot＞必須放在＜caption＞、＜colgroup＞、＜thead＞、＜tbody＞之後

#### 加入屬性，增強＜th＞、＜td＞之間的關聯
- scope：(表格結構範例二)
    - 只能用在＜th＞，用來定義與其相關的資料內容的方向性
    - scope 可以有的值有：
        - row：表示同一個橫向 row 的 td 與其相關
        - col：表示同一個直排 column 的 td 與其相關
        - rowgroup：表示多個 row 的 td 與其相關，通常會搭配排版使用的 rowspan 屬性使用
        - colgroup：表示多個 column 的 td 與其相關，通常會搭配排版使用的 colspan 屬性使用
- headers：(表格結構範例三)
    - 可用在＜th＞、＜td＞
    - 表達這個元素屬於哪個＜th＞，其值為所屬＜th＞的 id
    - 只能是＜th＞的 id，不過可以同時有多個，用空白區隔

<div class="aStyle">
    
[範例: 表格結構範例](https://codepen.io/judyshyu/pen/wvjWyrX?editors=1100)
</div>

#### 優化複雜表格
- 精簡表格內容
- 拆分成多個表格
- 根據表格類型，甚至可以直接改為互動性的查詢功能頁

<div class="aStyle">
    
[範例: 郵件資費表](https://www.post.gov.tw/post/internet/Postal/index.jsp?ID=20502)
[範例: 郵件資費查詢](https://www.post.gov.tw/post/internet/SearchZone/index.jsp?ID=13010104)
</div> 
<i>[講義p.55 ~ p.67]</i>


<!-- 
label與input的關係
```javascript=
<label>
    <input type="checkbox">Receive promotional offers?
</label>

// or

<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
```  -->