Tocas UI 開始使用 元件樣式 實際範例
台灣正體
台灣正體
GitHub
Tocas UI
台灣正體
台灣正體

表格

彙整資料或表單並以網格、巢狀的方式呈現。
初入上手
開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive 輔助樣式 Utilities
格局設計
箱型容器 Box 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 間隔容器 Wrap
表單
按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch
文字與段落
分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text
視覺回饋
空白看板 Blankslate 圓形量測計 Gauge 讀取狀態 Loading 快顯視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar
多媒體與圖示
大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset
資料顯示
可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table 時間軸 Timeline
導覽
導覽標記 Breadcrumb 彈出式選單 Dropdown 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab
應用程式
邊緣抽屜 App Drawer 格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar 頂部列 App Topbar
JavaScript 模組
選單模組 DropdownJS 工具提示 TooltipJS 分頁模組 TabJS 樣式切換 ToggleJS
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
# 名稱 英文名稱
1 半音商業銀行 Flat Bank
2 對空音商事有限公司 Sorae & Co., Ltd.
3 卡莉絲伊繁星 Caris Events
統計筆數：3 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>半音商業銀行</td>
                <td>Flat Bank</td>
            </tr>
            <tr>
                <td>2</td>
                <td>對空音商事有限公司</td>
                <td>Sorae & Co., Ltd.</td>
            </tr>
            <tr>
                <td>3</td>
                <td>卡莉絲伊繁星</td>
                <td>Caris Events</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3">統計筆數：3</th>
            </tr>
        </tfoot>
    </table>
</div>
概要

表格預設是一個沒有外距且會貼齊父容器的元件，如果希望表格能有一個外框線就像自己是個獨立的卡片那樣，請同時使用箱型容器包覆其元件。

種類
定義

表格中的第一個欄位都是該行的標題。

參數 說明
header() title[string] 輸出網頁標頭。
footer() path[string], name[string[optional]] 於網頁最底部輸出內容，可同時儲存內容至一個檔案。 
<div class="ts-box">
    <table class="ts-table is-definition">
        <thead>
            <tr>
                <th></th>
                <th>參數</th>
                <th>說明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>header()</td>
                <td>title[<em>string</em>]</td>
                <td>輸出網頁標頭。</td>
            </tr>
            <tr>
                <td>footer()</td>
                <td>path[<em>string</em>], name[<em>string</em>[<em>optional</em>]]</td>
                <td>於網頁最底部輸出內容，可同時儲存內容至一個檔案。</td>
            </tr>
        </tbody>
    </table>
</div>
網狀的

無論是否為同行的欄位都會被分隔線區隔，令整個表格看起來像是網狀的一樣。

Git 倉庫
第一次 Commit！
test 第一次 Commit！
build 第一次 Commit！
package.json 第一次 Commit！
Gruntfile.js 第一次 Commit！ 
<div class="ts-box">
    <table class="ts-table is-celled is-striped">
        <thead>
            <tr>
                <th colspan="3">Git 倉庫</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="is-collapsed">
                    <span class="ts-icon is-folder-icon is-end-spaced"></span>
                    node_modules
                </td>
                <td>第一次 Commit！</td>
                <td class="is-collapsed">10 小時前</td>
            </tr>
            <tr>
                <td>
                    <span class="ts-icon is-folder-icon is-end-spaced"></span>
                    test
                </td>
                <td>第一次 Commit！</td>
                <td class="is-collapsed">10 小時前</td>
            </tr>
            <tr>
                <td>
                    <span class="ts-icon is-folder-icon is-end-spaced"></span>
                    build
                </td>
                <td>第一次 Commit！</td>
                <td class="is-collapsed">10 小時前</td>
            </tr>
            <tr>
                <td>
                    <span class="ts-icon is-file-icon is-regular is-end-spaced"></span>
                    package.json
                </td>
                <td>第一次 Commit！</td>
                <td class="is-collapsed">10 小時前</td>
            </tr>
            <tr>
                <td>
                    <span class="ts-icon is-file-icon is-regular is-end-spaced"></span>
                    Gruntfile.js
                </td>
                <td>第一次 Commit！</td>
                <td class="is-collapsed">10 小時前</td>
            </tr>
        </tbody>
    </table>
</div>
基本的

基本的表格會沒有標頭、頁腳的深色背景，而一個更加基本的表格會連項目之間的分隔線都沒有。

檔案名稱 分類 說明
file.php Controller 用來處理檔案相關程式。
star.php Controller 處理星號程式。
favorite.php Model 處理最愛的項目。
檔案名稱 分類 說明
file.php Controller 用來處理檔案相關程式。
star.php Controller 處理星號程式。
favorite.php Model 處理最愛的項目。 
<div class="ts-box">
    <table class="ts-table is-basic">
        <thead>
            <tr>
                <th>檔案名稱</th>
                <th>分類</th>
                <th>說明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>file.php</td>
                <td>Controller</td>
                <td>用來處理檔案相關程式。</td>
            </tr>
            <tr>
                <td>star.php</td>
                <td>Controller</td>
                <td>處理星號程式。</td>
            </tr>
            <tr>
                <td>favorite.php</td>
                <td>Model</td>
                <td>處理最愛的項目。</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table is-very-basic">
        <thead>
            <tr>
                <th>檔案名稱</th>
                <th>分類</th>
                <th>說明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>file.php</td>
                <td>Controller</td>
                <td>用來處理檔案相關程式。</td>
            </tr>
            <tr>
                <td>star.php</td>
                <td>Controller</td>
                <td>處理星號程式。</td>
            </tr>
            <tr>
                <td>favorite.php</td>
                <td>Model</td>
                <td>處理最愛的項目。</td>
            </tr>
        </tbody>
    </table>
</div>
條狀間隔的

在不同行之間以不同的背景色調營造出條紋感，讓使用者更能區分不同行列。

IP 位置 協議 註釋
164.17.183.5 HTTP Yami 的虛擬機。
186.173.16.34 HTTP 台北客戶的部落格網站。
204.57.189.23 HTTP 測試伺服器，預計每日自動重新啟動。
183.46.31.8 HTTP 香港醫療業務專用。
89.42.6.1 HTTP 提供給日本保險公司的備援伺服器。 
<div class="ts-box">
    <table class="ts-table is-striped">
        <thead>
            <tr>
                <th>IP 位置</th>
                <th>協議</th>
                <th>註釋</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>164.17.183.5</td>
                <td>HTTP</td>
                <td>Yami 的虛擬機。</td>
            </tr>
            <tr>
                <td>186.173.16.34</td>
                <td>HTTP</td>
                <td>台北客戶的部落格網站。</td>
            </tr>
            <tr>
                <td>204.57.189.23</td>
                <td>HTTP</td>
                <td>測試伺服器，預計每日自動重新啟動。</td>
            </tr>
            <tr>
                <td>183.46.31.8</td>
                <td>HTTP</td>
                <td>香港醫療業務專用。</td>
            </tr>
            <tr>
                <td>89.42.6.1</td>
                <td>HTTP</td>
                <td>提供給日本保險公司的備援伺服器。</td>
            </tr>
        </tbody>
    </table>
</div>
外觀
閉合的

閉合的表格會讓其寬度符合內容，而不會呈現全寬。

<div class="ts-box is-collapsed">
    <table class="ts-table is-collapsed">
        <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>英文暱稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>卡莉絲</td>
                <td>Caris</td>
            </tr>
            <tr>
                <td>2</td>
                <td>橙希</td>
                <td>Orenji</td>
            </tr>
            <tr>
                <td>3</td>
                <td>白音</td>
                <td>Shirone</td>
            </tr>
        </tbody>
    </table>
</div>
單行的

表格裡的文字絕對不換行，若文字太長則會超出其範圍。通常用於避免會被意外換行的欄位或標頭。

文章名稱 註釋 狀態
Bibendum Et venenatis orci placerat vitae. Sed posuere auctor. 核准
Pretium Donec rutrum accumsan augue vitae pretium. 核准
Feugiat Aliquam varius, mi ut convallis rhoncus, nunc dolor feugiat mi. 拒絕 
<table class="ts-table is-single-line">
    <thead>
        <tr>
            <th>文章名稱</th>
            <th>註釋</th>
            <th>狀態</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bibendum</td>
            <td>Et venenatis orci placerat vitae. Sed posuere auctor.</td>
            <td>核准</td>
        </tr>
        <tr>
            <td>Pretium</td>
            <td>Donec rutrum accumsan augue vitae pretium.</td>
            <td>核准</td>
        </tr>
        <tr>
            <td>Feugiat</td>
            <td>Aliquam varius, mi ut convallis rhoncus, nunc dolor feugiat mi.</td>
            <td>拒絕</td>
        </tr>
    </tbody>
</table>
截斷的

表格內所有欲換行的文字會直接被截斷。

文章名稱 狀態 註釋
Lorem Ipsum 核准 Etiam aliquet pulvinar sapien, et venenatis orci placerat vitae. Sed posuere bibendum ante et porttitor. Fusce auctor.
Etiam aliquet 核准 Nulla sed ex eget ligula gravida condimentum non id dui. Donec rutrum accumsan augue vitae pretium.
Aliquam 拒絕 Curabitur volutpat tristique erat ut pulvinar. Aliquam varius, mi ut convallis rhoncus, nunc dolor feugiat mi. 
<table class="ts-table is-truncated is-basic">
    <thead>
        <tr>
            <th>文章名稱</th>
            <th>狀態</th>
            <th>註釋</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem Ipsum</td>
            <td>核准</td>
            <td>Etiam aliquet pulvinar sapien, et venenatis orci placerat vitae. Sed posuere bibendum ante et porttitor. Fusce auctor.</td>
        </tr>
        <tr>
            <td>Etiam aliquet</td>
            <td>核准</td>
            <td>Nulla sed ex eget ligula gravida condimentum non id dui. Donec rutrum accumsan augue vitae pretium.</td>
        </tr>
        <tr>
            <td>Aliquam</td>
            <td>拒絕</td>
            <td>Curabitur volutpat tristique erat ut pulvinar. Aliquam varius, mi ut convallis rhoncus, nunc dolor feugiat mi.</td>
        </tr>
    </tbody>
</table>
貼邊的

使文字左右靠齊邊緣而不會有內距。

總計： 340,953
稅收（9.3%）： 31,708
運費： 4,102
總計： 376,763 
<table class="ts-table is-sticked is-basic">
    <tbody>
        <tr>
            <td><strong>總計：</strong></td>
            <td>340,953</td>
        </tr>
        <tr>
            <td><strong>稅收（9.3%）：</strong></td>
            <td>31,708</td>
        </tr>
        <tr>
            <td><strong>運費：</strong></td>
            <td>4,102</td>
        </tr>
        <tr>
            <td><strong>總計：</strong></td>
            <td>376,763</td>
        </tr>
    </tbody>
</table>
尺寸

更改表格的大小。

# 名稱 英文名稱
1 對空音商事有限公司 Sorae & Co., Ltd.
# 名稱 英文名稱
1 對空音商事有限公司 Sorae & Co., Ltd.
# 名稱 英文名稱
1 對空音商事有限公司 Sorae & Co., Ltd. 
<div class="ts-box">
    <table class="ts-table is-small">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>對空音商事有限公司</td>
                <td>Sorae & Co., Ltd.</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>對空音商事有限公司</td>
                <td>Sorae & Co., Ltd.</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table is-large">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>對空音商事有限公司</td>
                <td>Sorae & Co., Ltd.</td>
            </tr>
        </tbody>
    </table>
</div>
增加內距

加大片段的內距使欄位內容不那麼擁擠。

# 名稱 英文名稱
1 卡莉絲伊繁星 Caris Events
# 名稱 英文名稱
1 卡莉絲伊繁星 Caris Events
# 名稱 英文名稱
1 卡莉絲伊繁星 Caris Events 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>卡莉絲伊繁星</td>
                <td>Caris Events</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table is-padded">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>卡莉絲伊繁星</td>
                <td>Caris Events</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table is-horizontally-padded">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>卡莉絲伊繁星</td>
                <td>Caris Events</td>
            </tr>
        </tbody>
    </table>
</div>
無內距

移除欄位的內距。

訂單編號： 123718975123
開立時間： 2022-12-05 16:26:01 UTC
付款時間： 未付款
帳號： yamiodymel 
<table class="ts-table is-fitted">
    <tbody>
        <tr>
            <td><strong>訂單編號：</strong></td>
            <td>123718975123</td>
        </tr>
        <tr>
            <td><strong>開立時間：</strong></td>
            <td>2022-12-05 16:26:01 UTC</td>
        </tr>
        <tr>
            <td><strong>付款時間：</strong></td>
            <td>未付款</td>
        </tr>
        <tr>
            <td><strong>帳號：</strong></td>
            <td>yamiodymel</td>
        </tr>
    </tbody>
</table>
密度

變更元件的內距，令元素之間看起來更密集。

# 名稱 英文名稱
1 半音商業銀行 Flat Bank
2 對空音商事有限公司 Sorae & Co., Ltd.
# 名稱 英文名稱
1 半音商業銀行 Flat Bank
2 對空音商事有限公司 Sorae & Co., Ltd.
# 名稱 英文名稱
1 半音商業銀行 Flat Bank
2 對空音商事有限公司 Sorae & Co., Ltd. 
<div class="ts-box">
    <table class="ts-table is-relaxed">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>半音商業銀行</td>
                <td>Flat Bank</td>
            </tr>
            <tr>
                <td>2</td>
                <td>對空音商事有限公司</td>
                <td>Sorae & Co., Ltd.</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>半音商業銀行</td>
                <td>Flat Bank</td>
            </tr>
            <tr>
                <td>2</td>
                <td>對空音商事有限公司</td>
                <td>Sorae & Co., Ltd.</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table is-dense">
        <thead>
            <tr>
                <th>#</th>
                <th>名稱</th>
                <th>英文名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>半音商業銀行</td>
                <td>Flat Bank</td>
            </tr>
            <tr>
                <td>2</td>
                <td>對空音商事有限公司</td>
                <td>Sorae & Co., Ltd.</td>
            </tr>
        </tbody>
    </table>
</div>
水平密度

變更欄位的左右水平內距，令欄位之間看起來更密集。

名稱 網址
名稱 網址 
<div class="ts-box">
    <table class="ts-table is-celled">
        <thead>
            <tr>
                <th>名稱</th>
                <th>網址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="ts-input">
                        <input type="text">
                    </div>
                </td>
                <td>
                    <div class="ts-input">
                        <input type="text">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ts-box">
    <table class="ts-table is-compact is-celled">
        <thead>
            <tr>
                <th>名稱</th>
                <th>網址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="ts-input">
                        <input type="text">
                    </div>
                </td>
                <td>
                    <div class="ts-input">
                        <input type="text">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
欄位狀態
啟用的

呈現像是被選取的模樣。

名稱 狀態 註解
Yan-K 照會中 需要檢查年齡。
Tsundere Chen 照會中 階級身份 32 等。
Hiram Huang 已通過 無 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th class="is-collapsed"></th>
                <th>名稱</th>
                <th>狀態</th>
                <th>註解</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <label class="ts-checkbox">
                        <input type="checkbox" />
                    </label>
                </td>
                <td>Yan-K</td>
                <td>照會中</td>
                <td>需要檢查年齡。</td>
            </tr>
            <tr class="is-active">
                <td>
                    <label class="ts-checkbox">
                        <input type="checkbox" checked />
                    </label>
                </td>
                <td>Tsundere Chen</td>
                <td>照會中</td>
                <td>階級身份 32 等。</td>
            </tr>
            <tr>
                <td>
                    <label class="ts-checkbox">
                        <input type="checkbox" />
                    </label>
                </td>
                <td>Hiram Huang</td>
                <td>已通過</td>
                <td>無</td>
            </tr>
        </tbody>
    </table>
</div>
次要的

使某個欄位或是行列的背景淡化呈現。

名稱 狀態 註解
Yan-K 照會中 需要檢查年齡。
Fan Kangtai 已通過 無
Tsundere Chen 照會中 階級身份 32 等。
Hiram Huang 已通過 無 
<div class="ts-box">
    <table class="ts-table is-celled">
        <thead>
            <tr>
                <th>名稱</th>
                <th>狀態</th>
                <th>註解</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Yan-K</td>
                <td class="is-secondary">照會中</td>
                <td>需要檢查年齡。</td>
            </tr>
            <tr>
                <td>Fan Kangtai</td>
                <td>已通過</td>
                <td>無</td>
            </tr>
            <tr class="is-secondary">
                <td>Tsundere Chen</td>
                <td>照會中</td>
                <td>階級身份 32 等。</td>
            </tr>
            <tr>
                <td>Hiram Huang</td>
                <td>已通過</td>
                <td>無</td>
            </tr>
        </tbody>
    </table>
</div>
不重要的

使某個欄位或是行列的背景以更深沈、不重要的顏色呈現。

起始日期 應用程式名稱 上架手續費
2021/01/03 半音商業銀行 TWD $80
2021/02/15 Google Play TWD $4,500
2021/03/19 App Store TWD $1,200 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>起始日期</th>
                <th>應用程式名稱</th>
                <th>上架手續費</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2021/01/03</td>
                <td class="is-tertiary">半音商業銀行</td>
                <td>TWD $80</td>
            </tr>
            <tr class="is-tertiary">
                <td>2021/02/15</td>
                <td>Google Play</td>
                <td>TWD $4,500</td>
            </tr>
            <tr>
                <td>2021/03/19</td>
                <td>App Store</td>
                <td>TWD $1,200</td>
            </tr>
        </tbody>
    </table>
</div>
指示的

用特殊方式凸顯表格中的行列或欄位。

動畫名稱 放映起始日期
WorldEnd: What do you do at the end of the world? Are you busy? Will you save us? Apr 11, 2017
Eromanga Sensei Apr 09, 2017
Armed Girl's Machiavellism Apr 05, 2017
Grimoire of Zero Apr 10, 2017
Attack on Titan Season 2 Apr 01, 2017
Akashic Records of Bastard Magic Instructor; Apr 04, 2017 
<div class="ts-box">
    <table class="ts-table is-celled is-single-line">
        <thead>
            <tr>
                <th>動畫名稱</th>
                <th>放映起始日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>WorldEnd: What do you do at the end of the world? Are you busy? Will you save us?</td>
                <td>Apr 11, 2017</td>
            </tr>
            <tr class="is-indicated">
                <td>Eromanga Sensei</td>
                <td>Apr 09, 2017</td>
            </tr>
            <tr class="is-negative is-indicated">
                <td>Armed Girl's Machiavellism</td>
                <td>Apr 05, 2017</td>
            </tr>
            <tr>
                <td>Grimoire of Zero</td>
                <td class="is-positive is-indicated">Apr 10, 2017</td>
            </tr>
            <tr>
                <td>Attack on Titan Season 2</td>
                <td>Apr 01, 2017</td>
            </tr>
            <tr class="is-warning is-indicated">
                <td>Akashic Records of Bastard Magic Instructor;</td>
                <td>Apr 04, 2017</td>
            </tr>
        </tbody>
    </table>
</div>
停用的

淡化和禁止與某個行列、欄位互動。

使用者名稱 電子郵件信箱 啟用日期
yamiodymel [email protected] 2013/09/14
karisu [email protected] 2020/11/03
shiroteacat [email protected] 2009/07/15 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>使用者名稱</th>
                <th>電子郵件信箱</th>
                <th>啟用日期</th>
            </tr>
        </thead>
        <tbody>
            <tr class="is-disabled">
                <td>yamiodymel</td>
                <td>[email protected]</td>
                <td>2013/09/14</td>
            </tr>
            <tr>
                <td>karisu</td>
                <td>[email protected]</td>
                <td>2020/11/03</td>
            </tr>
            <tr>
                <td class="is-disabled">shiroteacat</td>
                <td>[email protected]</td>
                <td>2009/07/15</td>
            </tr>
        </tbody>
    </table>
</div>
欄位外觀
閉合的

閉合欄位會依照內容而最小化其寬度。

醫院種類 名稱
醫學藥品 2021/08/01
常規心電圖 2021/08/01
放射性治療 2021/06/13 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>醫院種類</th>
                <th>名稱</th>
                <th class="is-collapsed">建立於</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="is-collapsed">東京 AH 綜合醫院</td>
                <td>醫學藥品</td>
                <td>2021/08/01</td>
            </tr>
            <tr>
                <td class="is-collapsed">東京 AH 綜合醫院</td>
                <td>常規心電圖</td>
                <td>2021/08/01</td>
            </tr>
            <tr>
                <td class="is-collapsed">己律知能研究院</td>
                <td>放射性治療</td>
                <td>2021/06/13</td>
            </tr>
        </tbody>
    </table>
</div>
內陷的

讓某個欄位有內部陰影看起來就像是向內部凹陷一樣，很適合用來作為展開欄位呈現某個資料的詳細情形。

交易日期 項目名稱 實際金額
2021/02/03 煤果交換所 TWD $80
此筆訂單的下次付款日期：2022/01/02（每月）
2021/05/18 台灣推進委員會 TWD $40 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>交易日期</th>
                <th>項目名稱</th>
                <th>實際金額</th>
                <th class="is-collapsed"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2021/02/03</td>
                <td>煤果交換所</td>
                <td>TWD $80</td>
                <td>
                    <button class="ts-button is-outlined">檢視</button>
                </td>
            </tr>
            <tr>
                <td class="is-secondary is-padded is-insetted" colspan="4">
                    此筆訂單的下次付款日期：2022/01/02（每月）
                </td>
            </tr>
            <tr>
                <td>2021/05/18</td>
                <td>台灣推進委員會</td>
                <td>TWD $40</td>
                <td>
                    <button class="ts-button is-outlined">檢視</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
無內容的

欄位可以被標註為無內容的，令使用者知道這個欄位是沒有記載內容但又不至於留空。

使用者帳號 最後一次登入
yamiodymel 2022/01/30
haneda_shirone
karisu-events 
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>使用者帳號</th>
                <th>最後一次登入</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>yamiodymel</td>
                <td>2022/01/30</td>
            </tr>
            <tr>
                <td>haneda_shirone</td>
                <td class="is-empty"></td>
            </tr>
            <tr>
                <td>karisu-events</td>
                <td class="is-empty"></td>
            </tr>
        </tbody>
    </table>
</div>
對齊

欄位裡的內容可以置上、下和左右。

欄位 #1 欄位 #2 欄位 #3

置上

 

置中

置下

置起始

置中間

置結束

 
<div class="ts-box">
    <table class="ts-table is-celled">
        <thead>
            <tr>
                <th>欄位 #1</th>
                <th>欄位 #2</th>
                <th>欄位 #3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="is-top-aligned">
                    <p>置上</p>
                    <p>&nbsp;</p>
                </td>
                <td class="is-middle-aligned">
                    <p>置中</p>
                </td>
                <td class="is-bottom-aligned">
                    <p>置下</p>
                </td>
            </tr>
            <tr>
                <td class="is-start-aligned">
                    <p>置起始</p>
                </td>
                <td class="is-center-aligned">
                    <p>置中間</p>
                </td>
                <td class="is-end-aligned">
                    <p>置結束</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
種類
定義 is-definition 網狀的 is-celled 基本的 is-basic 條狀間隔的 is-striped
外觀
閉合的 is-collapsed 單行的 is-single-line 截斷的 is-truncated 貼邊的 is-sticked 尺寸 is-small 增加內距 is-padded 無內距 is-fitted 密度 is-relaxed 水平密度 is-compact
欄位狀態
啟用的 is-active 次要的 is-secondary 不重要的 is-tertiary 指示的 is-indicated 停用的 is-disabled
欄位外觀
閉合的 is-collapsed 內陷的 is-insetted 無內容的 is-empty 對齊 is-top-aligned
GitHub 開始使用 元件樣式 實際範例
由來自 台灣的 Yami Odymel 所設計，當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT，文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言，而卡莉絲伊繁星屬對空音商事。
台灣正體語系協作者：Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標