章節8 - 表格

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table> 

補充:

另外還有＜colgroup＞和＜col＞( 通常不會特別去使用 )

範例: 表格結構範例

1. 排版表格

因為排版需求，用＜table＞來排版，實際內容並非表格資料，如EDM、古早網站或任何用＜table＞切版較快的情形

• 不要主動拿＜table＞來排版
• 不得以需要使用時，注意:
  • ＜table＞內除了＜td＞以外不要使用任何其他上述的 HTML tag，以免造成更多語義上的混亂
  • 在＜table＞加上 role="presentation"，表明這是裝飾性的內容，不需要被讀出
  • 不要把這種表格放在資料表格內

2. 模擬表格

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

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

範例: 模擬表格

3. 資料表格

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

加入＜caption＞(和summary)

• 無障礙表格必須帶有標題＜caption＞
  • ＜caption＞必須放在＜table＞內的第一個元件，不能是最後一個
  • 視覺上可以藉由 CSS 來把標題的位置移到表格下方
• 若表格內容複雜，可以補充摘要(summary)來加強說明表格內容，但內容不要與標題重複
• 摘要的三種寫法

＜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，不過可以同時有多個，用空白區隔

範例: 表格結構範例

優化複雜表格

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

範例: 郵件資費表
範例: 郵件資費查詢

[講義p.55 ~ p.67]