Table creator intro

Table Creator
每個人都會設定
例如：手機設定、平板設定、電腦設定、記錄器設定…
因為設定是每個人的生活日常
但是，即使你自己花時間學習編程
如果你不是做寫程式這個行業的
時間久了，還是會忘記…
但是，設定是不會忘記的
因為設定是每個人的生活日常….
快速影片介紹
自動生成網頁表格

Table Creator
多達 1 4 0 種顏色可供選擇搭配

Table Creator
自動生成網頁表格
不需要學會網頁程式碼的編寫，
只要在Google試算表中完成一些設定
就可以在網頁中做出漂亮的表格
變換表格外觀，只需要幾秒鐘。
先填基本設定
再寫表格內容
輕鬆三步驟
再導出編碼
(a) 生成編碼工具檔示範：點擊這裡
(b) 完成網頁表格的示範：編碼儲存位置（表頭固定）
(c) 完成網頁表格的示範：編碼儲存位置（表頭不固定）
簡單說就是用(a)來製造(b)，或製造(c)

Table Creator
圖一：『基本設定』和『新增記錄輸入』的功能
1 32
字形大小、顏色
字體、對齊方式
設為粗體字
每個欄位都可設為
圖片欄！
點擊圖片可以觀看
放大圖
可在網頁表格中的
文字加上超鏈接
事先估計各欄位的
字數多寡,來給予適
當的寬度配置。
圖片先上傳，
再將圖片的URL
貼入欄位中
可依照每個欄位的
需要,時間,設定欄
位寬度(佔比)
文字圖片欄位寬度
多少欄位(最多12欄)
各欄位寬佔頁寬比
標題字大小 / 對齊
列間隔底色
表頭高度 / 底色
表頭字顏色 / 字體
/ 字形大小
沒有框線
或使用水平框線
或使用垂直框線
整體格式表頭部分框線部分
基本設定
基本設定
新增輸入

Table Creator
解決在網頁中製作表格的問題
1）將試算表直接轉貼在網頁上，不但醜陋還可能發生欄位紊亂。
2）表格欄位的列數比記錄的筆數多時，表格下方會有空白欄位。
3）在不同時間填寫新記錄時，每次都要重新編寫網頁編碼。
4）表格設計的自由度不夠高、可以選擇搭配的顏色不夠多。
5）利用本工具，不但解決上述問題，更可節省許多時間！
填寫完畢後自動顯示
導出編碼可重複利用
將填寫的資料清空、重新調整基本設定之後，就可產生新的內
容的網頁編碼。
如果需要保留就有的設定集內容，可儲存原有的設定（在您自
己的空白Google 試算表中）。

使用及填寫步驟…
填寫『基本設定』
填寫『新增記錄』的內容
在基本設定中設定好的欄位數和各欄位名稱以後，會自動顯示在『新增
記錄輸入』的表頭部分
• 如果您所設定的欄位數小於12欄，那麼在『新增記錄輸入』的頁
面右邊會有空白的欄位，這些欄位保持空白、不必填寫。
• 您可自由調整『新增記錄輸入』中各欄位的寬度，以適當搭配欄位
內的字數多寡。
導出『網頁編碼』
完成網頁編碼的複製轉貼之後，如果您感覺原本的設定不太滿意，可
以直接更改基本設定，然後重新導出網頁編碼即可重新更新。
完成上述兩項調諧之後，在『網頁編碼』中會出現html編碼，點選C
欄整欄，按右鍵按複製，然後貼在網頁編輯區中相應的範圍內(後詳)
• 可選擇的顏色多達140種：由於在設定中，有多項設定都與顏色有關，
這些顏色都以『色票參考』中所顯示的顏色為準。
• 首先填入欄位數（2～12間的數字），然後逐一填寫其他設定內容。
• 在設定欄位寬度或文字色與底色的搭配時，您須在心中先有構想

所有表格內容皆未填寫時…
欄位數尚未填寫時
至少有兩欄
（才能稱為表格）
僅顯示第一欄、第二欄
基本設定
新增記錄輸入
在本工具內容全部空白時，
基本設定頁中仍然會有兩欄
的格式會顯現出來。
在新增記錄輸入頁面中(下
方)也是顯示第一欄和第二
欄，其他欄位為空白，因為
至少要有兩欄，才能稱為
『表格』
當設定欄位數為更多欄位時，
上述兩項顯示也會跟著改變。

當寫下『欄位個數』時…
輸入“8”左邊
就出現8 個欄位
出現 8 個欄位
每個欄位寬度皆可自由調整
以方便填寫
新增記錄輸入頁
優先輸入欄位數，以確定
其他進一步的設定內容。
左方在輸入欄位數為“8”
之後，便會自動顯示出八
組可輸入的欄位設定欄
下方亦出現八欄位可供填
寫，各欄位的寬度可依您
的意思自由調整。但最終
在網頁上顯示的寬度配置
以基本設定中的設定為準

其他設定介紹…
在此填寫表格的標題字
各欄的寬度比例
（以百分比表示）
所有關於顏色的設定
（在選定後，右側色塊會相對應顯示出來）
資料形態有五種選擇：
文字、粗體字、斜體字、粗斜體、圖片

Table Creator
填寫完成前的最後一步…
選擇網頁特效：
A
B
表頭不固定（即無特效）
表頭固定不動
基本設定頁的右下角

Table Creator
選擇『不固定表頭』
這表示在導出編碼、貼在網頁編輯區中所呈現的表格，表頭在網頁
中的位置並不固定，她會隨著捲軸往下捲後，消失在頁面的頂部。
A

選擇表頭不固定
網頁編碼
先切換為Stop
基本設定
等待數秒
刪去Stop後
編碼會自動出現
完成其他設定後
選擇『不需固定』
到『網頁編碼』
先切換為Stop

貼在<body>和
</body>之間
打開網頁
看結果
用滑鼠按住整欄
再按右鍵選複製
打開網頁
檢查結果
選擇表頭不固定
html編碼
完成！
只有一段編碼

水平框線
（大小、顏色、字體、對齊方法）
標題字
列間隔底色
文字中加入超鏈接
表頭字（大小、顏色、字體）
基本設定後其外觀效果

設定：無框線
表頭列
圖片欄（※圖片可設在任一欄）
文字欄
完成網頁後的外觀效果

輸入文字中加入超鏈接的方法
在『新增記錄輸入』的欄位中，按照以下方式填寫：
* 左邊是輸入欄位的文字
* >>是兩個向右的箭頭
* 右邊是要鏈接的網址
紙類工廠+ >> + https://www.XXXXOOOO.com
新增記錄輸入頁
在文字中加入超鏈接的方法

垂直框線
（佔表格總寬度的比例）
設點擊圖片
可以打開放大圖
基本設定頁靠左側部分
設定欄位寬度設定欄位寬度

Table Creator
選擇『表頭固定不動』B

選擇表頭固定
網頁編碼
先切換為Stop
基本設定
等待數秒
會自動出現三段編碼
完成其他設定後
選擇『網頁特效』
到『網頁編碼』
先切換為Stop
分別貼在不同地方
刪去Stop後

貼在<body>和
</body>之間
用滑鼠按住整欄
再按右鍵選複製
同上方式
複製
同上方式
複製
貼在
</head>之前
貼在
</body>之前
Script編碼
CSS編碼
html編碼
選擇表頭固定

Table Creator
打開網頁，看看效果

選擇表頭固定
捲軸往下捲時,表格往上移
但表頭始終在網頁的固定位置
完成！

Table Creator
補充說明
已經填寫完表格資料內容的情況下，再更改語言版本會出現以下
狀況：
因為語言設定已經切換成另一種語言，基本設定頁中的設定必須
重新設定，否則所導出的網頁編碼將會出現錯誤。
色票參考頁會隨著語言設定的更改而自動變更，因此不會有影響
新增記錄輸入頁中，表頭部分的語言會自動切換，而且表格欄位
中的內容是您自己所填寫的，因此頁不會有影響。
變更語言版本：
先變更再開始使用：
一般來說，語言設定所選擇的語言，應該與新增記錄輸入頁中的
資料屬同一種語言，因此先設定語言種類，再輸入表格資料，不
會有任何問題。
先使用後再變更：

Table Creator
更多補充說明
使用上的邊界：
使用本工具製作網頁表格，欄位數的上限為12欄，超過12欄者不適用本
工具。（表達您的意見）
在您原本已經完成的表格中，再增添新的記錄，您不需要重新修改網頁
的html編碼，只要將新增的記錄，填寫完畢之後，重新導出編碼即可。
本工具可以導出橫列的記錄筆數很多，其上限為765列，那將會是非常非
常長的表格，一般來講，編輯網頁的人會將這麼長的表格分段，因此，
應該不會超過此上限才對。
如果您還有疑問切在本說明中沒有提到，請來信告訴我們：
來信請寄：
Jeniffer.biddle@gmail.com
Developing Notes for those not-yet accomplished functions:
select specific word or word in paragraph, to be in bold font, with
hyperlinks, with italic font, em, del, etc. all that will be accomplished in next
version.
Color indicator (RGB)-
Purple: 255,228,225
Grey: 192,192,192 Tr:68%
Yellow: 255,255,0

Table creator intro

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (12)

Featured

Featured (20)

Table creator intro