表格 (Table)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

一般表格

綜合所得稅淨額率
綜合所得稅淨額區間 稅率 累進差額
0 - 560,000 元 5% 0 元
560,001 元 - 1,260,000 元 12% 39,200 元
1,260,001 元 - 2,520,000 元 20% 140,000 元
2,520,001 元 - 4,720,000 元 30% 392,000 元
4,720,001 元以上 40% 864,000 元
HTML 
<table class="table">
  <caption class="table-caption">綜合所得稅淨額率</caption>
  <thead class="table-header">
    <tr class="table-row">
      <th scope="col" class="table-head">綜合所得稅淨額區間</th>
      <th scope="col" class="table-head">稅率</th>
      <th scope="col" class="table-head">累進差額</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-row">
      <td class="table-cell">0 - 560,000 元</td>
      <td class="table-cell">5%</td>
      <td class="table-cell">0 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">560,001 元 - 1,260,000 元</td>
      <td class="table-cell">12%</td>
      <td class="table-cell">39,200 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">1,260,001 元 - 2,520,000 元</td>
      <td class="table-cell">20%</td>
      <td class="table-cell">140,000 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">2,520,001 元 - 4,720,000 元</td>
      <td class="table-cell">30%</td>
      <td class="table-cell">392,000 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">4,720,001 元以上</td>
      <td class="table-cell">40%</td>
      <td class="table-cell">864,000 元</td>
    </tr>
  </tbody>
</table>

HTML

  • 使用 <caption> 傳遞表單內容為何。
  • 使用 <th scope="row/column"> 詳述表格抬頭的格式。

左右滑動表格

服務項目
開發項目 說明 目標
識別系統 開發各級機關網站可統一利用、自訂的識別系統。增加政府網站之一致性，以近一步增加使用者對公家機關網站的信任度。 此識別系統應該盡可能提供可自訂的面向，但同時不犧牲一致性的識別。
元件 開發各級機關網站經常使用之前端設計元件。增加政府網站之一致性，以近一步增加使用者對公家機關網站的信任度。 本文件所規劃之系統元件係以具備相容性、符合網頁標準之目標進行設計規劃，並最大化地使用網頁標準中所提供的元件加以優化，可供各機關及資通系統承包商直接採用及參考，減少對第三方元件及複雜前端開發框架的依賴，增加系統韌性、相容性及親和力。系統元件將會使用網頁標準元件作為根本基礎，因此即使各機關、廠商仍須使用前端開發框架，也不會有不相容的問題。
HTML 
<div class="scroll-table-wrapper">
  <table class="table">
    <caption class="table-caption">服務項目</caption>
    <thead class="table-header">
      <tr class="table-row">
        <th scope="col" class="table-head">開發項目</th>
        <th scope="col" class="table-head">說明</th>
        <th scope="col" class="table-head">目標</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row">
        <td class="table-cell">識別系統</td>
        <td class="table-cell">開發各級機關網站可統一利用、自訂的識別系統。增加政府網站之一致性，以近一步增加使用者對公家機關網站的信任度。</td>
        <td class="table-cell">此識別系統應該盡可能提供可自訂的面向，但同時不犧牲一致性的識別。</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell">元件</td>
        <td class="table-cell">開發各級機關網站經常使用之前端設計元件。增加政府網站之一致性，以近一步增加使用者對公家機關網站的信任度。</td>
        <td class="table-cell">本文件所規劃之系統元件係以具備相容性、符合網頁標準之目標進行設計規劃，並最大化地使用網頁標準中所提供的元件加以優化，可供各機關及資通系統承包商直接採用及參考，減少對第三方元件及複雜前端開發框架的依賴，增加系統韌性、相容性及親和力。系統元件將會使用網頁標準元件作為根本基礎，因此即使各機關、廠商仍須使用前端開發框架，也不會有不相容的問題。</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

  • .scroll-table-wrapper

明顯分線表格

綜合所得稅淨額率
綜合所得稅淨額區間 稅率 累進差額
0 - 560,000 元 5% 0 元
560,001 元 - 1,260,000 元 12% 39,200 元
1,260,001 元 - 2,520,000 元 20% 140,000 元
2,520,001 元 - 4,720,000 元 30% 392,000 元
4,720,001 元以上 40% 864,000 元
HTML 
<table class="table table-separator">
  <caption class="table-caption">綜合所得稅淨額率</caption>
  <thead class="table-header">
    <tr class="table-row">
      <th scope="col" class="table-head">綜合所得稅淨額區間</th>
      <th scope="col" class="table-head">稅率</th>
      <th scope="col" class="table-head">累進差額</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-row">
      <td class="table-cell">0 - 560,000 元</td>
      <td class="table-cell">5%</td>
      <td class="table-cell">0 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">560,001 元 - 1,260,000 元</td>
      <td class="table-cell">12%</td>
      <td class="table-cell">39,200 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">1,260,001 元 - 2,520,000 元</td>
      <td class="table-cell">20%</td>
      <td class="table-cell">140,000 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">2,520,001 元 - 4,720,000 元</td>
      <td class="table-cell">30%</td>
      <td class="table-cell">392,000 元</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">4,720,001 元以上</td>
      <td class="table-cell">40%</td>
      <td class="table-cell">864,000 元</td>
    </tr>
  </tbody>
</table>

CSS

  • .table-separator

互動資料表格

點閱次數 短網址 建立時間
7 http://example.com/#Z 2023/04/12
120 http://example.com/#B 2023/05/01
33,973 http://example.com/#C 2023/02/13
0 http://example.com/#D 2022/01/12
0 http://example.com/#E 2023/07/12
HTML 
<interactive-table>
  <div class="scroll-table-wrapper">
    <table class="table">
      <thead class="table-header">
        <tr class="table-row">
          <th scope="col" class="table-head" data-sortable="numeric">點閱次數</th>
          <th scope="col" class="table-head" data-sortable data-filterable>短網址</th>
          <th scope="col" class="table-head" data-sortable="date">建立時間</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-row">
          <td class="table-cell">7</td>
          <td class="table-cell"><a href="#">http://example.com/#Z</a></td>
          <td class="table-cell tabular-nums">2023/04/12</td>
        </tr>
        <tr class="table-row">
          <td class="table-cell">120</td>
          <td class="table-cell"><a href="#">http://example.com/#B</a></td>
          <td class="table-cell tabular-nums">2023/05/01</td>
        </tr>
        <tr class="table-row">
          <td class="table-cell">33,973</td>
          <td class="table-cell"><a href="#">http://example.com/#C</a></td>
          <td class="table-cell tabular-nums">2023/02/13</td>
        </tr>
        <tr class="table-row">
          <td class="table-cell">0</td>
          <td class="table-cell"><a href="#">http://example.com/#D</a></td>
          <td class="table-cell tabular-nums">2022/01/12</td>
        </tr>
        <tr class="table-row">
          <td class="table-cell">0</td>
          <td class="table-cell"><a href="#">http://example.com/#E</a></td>
          <td class="table-cell tabular-nums">2023/07/12</td>
        </tr>
      </tbody>
    </table>
  </div>
</interactive-table>

Custom Element

  • 使用 <interactive-table>。
  • 可提供 <th scope="col" data-filterable> 作為可篩選的欄位，或將 data-filterable 加註於 <table> 上，即會篩選所有欄位。
  • 可提供 <th scope="col" data-sortable> 作為可排序的欄位。data-sortable 可接受值為 date（使用 new Date() 編譯）或 numeric（使用 Number() 編譯）。預設為純文字。
  • 可提供 <interactive-table sortable-label="升降冪"> 作為排序按鈕的報讀名稱。預設為「排序」。
  • 可提供 <interactive-table filterable-label="搜尋"> 作為排序按鈕的報讀名稱。預設為「篩選」。

注意事項

  • 如果表單資料有分頁顯示、或是數量龐大，建議使用伺服器直接透過資料庫抓出排序、篩選後的資料，而非使用此元件。

親和力

  • 語音識別系統（Dragon NaturallySpeaking, MacOS/iOS Voice Control）