主題

分享表格其中幾種設計心得

毛毛之狐貍 | 2022-03-07 12:00:22 | 巴幣 2216 | 人氣 856

分享表格其中幾種設計

?　前言　?

? 強調，此設計較適用於哈拉版文章 ?

此文是面向哈拉版發文所分享自己

在做巴哈表格使用的方式及心得，

以表格排出能同時兼顧網頁與APP版面的排版。

有些會故意去使用巴哈表格崩壞的特性來呈現排版

(表格崩壞：裡面不放東西 ? 被壓得扁扁的表格)

說明應用如有誤、說明不清或已知用火的部分，

還請指正，感謝！

文中的圖寬皆設為 999 px

（欲使用此文設計前須熟知表格基本使用方法）

參考文章

巴哈表格設計篇

巴哈表格色調篇

?

1.	一般的單欄表格

2.	並排的單欄表格

3.	多欄表格的相關應用

4.	表格框線與格內配色

1.一般的單欄表格

單獨的單欄表格呈現

25%

50%

75%

99%

2.並排的單欄表格

設計並排單欄表格，並排表格於APP上會自動分段。讓表格在APP上易於瀏覽，類似 Flex 的排版。

? 並排單欄表格的應用在APP中小屋文章閱覽上就不適用

99% 位置 : 未設定

50% 位置 : 靠左

50% 位置 : 未設定

34% 位置 : 靠左

33% 位置 : 靠左

33% 位置 : 未設定

25% 位置 : 靠左

25% 位置 : 未設定

20% 位置 : 靠左

20% 位置 : 未設定

3.多欄表格的相關應用

在APP上如果要不產生滾動條，那就要避免建立超過5欄的表格。格內也不要有過多的文字內容，建議欄數越多，每欄用字越少。而圖片建議一欄一圖為限，APP顯示格中寬度會依照表格內容改變。

預設寬度

（此一列列是獨立分開的）

99

50

33

25

20

6欄會產生需要拖曳的滾動條

? 在APP中小屋文章閱覽上例外

配合表格的特性也能達到這樣的效果（APP）

表格寬度設定

1%

69%

29%

本月排名

這是第一個標題文字

９９９名

這是第二個標題文字

　９９名

　是第三個標題文字

　９９名

（此表格中圖片設定的寬度:1 px）

12 月排名

德意志第三蘿莉帝國

１２０名

若葉與他的29隻茉莉

　３７名

　大東亞蘿莉共榮圈

　５０名

4.表格框線與格內配色

如不想要設整個表格的框線又想在特定儲存格加上框線，那就在特定儲存格中再丟一個設有框線的１ｘ１單欄表格，表格寬度設為 99%，然後在該儲存格設定與框線相同顏色的背景，其作用在於切替暗色主題時也能區隔標題。

框線色碼：#808080

背景色碼：#142A33

實際應用

角色簡單介紹


兔田佩克拉	hololive【三期生】
	兔田佩克拉設定為喜愛胡蘿蔔的容易感到寂寞的兔女郎。喜歡聊天與電子遊戲主要於YouTube進行聊天及遊戲直播。

角色簡單介紹

茉莉(萬聖節)

ATK
3000

DEF
2500

【物理】前衛

以銳爪進行突刺的

萬聖節見習騎士。

技能會根據必殺技

施展次數而強化，

傷害和行動速度UP

撕裂眼前的敵人。

網頁	APP

標題結構:

打板子測試

實際應用結構:

角色簡單介紹


兔田佩克拉	hololive【三期生】
	兔田佩克拉設定為喜愛胡蘿蔔的容易感到寂寞的兔女郎。喜歡聊天與電子遊戲主要於YouTube進行聊天及遊戲直播。