超簡單網頁表格製作！免語法用 Google 試算表教學
最近大家在看電腦玩物文章時，應該有發現我開始在一些「比較類」文章裡放入表格，讀者回饋都很喜歡這樣的改變，讓一些比較文章看起來更加專業清晰，例如：「Email App 比較表」。
也因此有讀者來信詢問，這樣的網頁表格如何製作出來呢？有什麼優點？
設計網頁表格有很多方法，你可以利用網頁語法來寫，或是利用部落格編輯器插入（如果有支援的話）。但如果上述方法都行不通，或是想要更多表格的變化，我們又不是網頁語法高手時怎麼辦？
我自己選擇一個超快速、最簡單，不需要懂太多網頁表格語法就能設計出完美表格的方法，那就是利用「 Google 試算表」製作並張貼網頁表格。
2016/6/ 新增：Airtable 最強大線上表格製作，免費資料庫重整任何事
效果如下面這個 kkbox、 Apple music、 Spotify 比較表。
用 Google 試算表來製作網頁表格的優點：
- 1. 不需要懂網頁表格語法，立刻上手
- 2. 所見即所得編輯，產生速度更快
- 3. 表格可以隨時雲端同步、統一修改
- 4. 方便設計表格的樣式、大小、超連結
缺點：
- 1. 不能跟著螢幕大小自動調整，在手機上看會超出版面（但還是可以瀏覽）
- 2. 使用內嵌方式，無法像融入網頁那麼漂亮
實作上，我們只要在 Google 雲端硬碟新增一個試算表，在試算表中設計出自己需要的表格內容、樣式與大小，這部分就是一般的表格設計方式。
我們希望網頁表格長成什麼樣子，就在 Google 試算表一模一樣的設計出來。
接著我們可以把這個試算表「發佈」到網頁上，點擊左上方檔案選單裡的「發佈到網頁」即可。
下面影片我搭配旁白詳細示範了將 Google 試算表發佈到網頁的完整流程。
將 Google 試算表發佈後獲得的內嵌程式碼張貼到網頁中，就能在網頁顯示表格了。
但是因為預設的表格程式碼沒有長寬設定，我們要自己加上符合需要的長寬數字，例如在原本的表格程式碼中加入：
<iframe height="650" src="https://docs.google.com/spreadsheets/......................" width="650"></iframe><br />
手動插入：
- height="高度大小"
- width="寬度大小"
設定出表格在網頁中想要展現的長寬範圍，如果表格很大會超出你想要的長寬範圍也沒關係，因為 Google 試算表張貼到網頁後如果大小超出範圍，會自動出現可以移動查看的滑桿，例如下面這樣。
這樣一來，我們只要在 Google 試算表中快速設計出表格內容與樣式大小，接著簡單發佈獲得張貼程式碼，張貼到網頁中即可！
而且以後如果要修改表格內容，只要統一回到這個 Google 試算表修改，那麼所有表格張貼處的內容也會同步修正，這是我覺得最棒的一點。
需要在部落格或網頁中張貼表格的朋友值得參考看看。
如果你想知道更多 Google 試算表技巧，可以參考下列文章：
轉貼本文時禁止修改，禁止商業使用，並且必須註明來自電腦玩物原創作者 esor huang（異塵行者），及附上原文連結：超簡單網頁表格製作！免語法用 Google 試算表教學
性感的聲音
回覆刪除XD
刪除這算是web app的延伸嗎？ 如果是，應該可以用下列css3語法，這樣就會隨裝置大小改變畫面。
回覆刪除提供給您參考看看～
程式引用於： http://www.minwt.com/webdesign-dev/css/5629.html
css樣式 (放在< head>.....< /head>之間)：
< style>
body {
margin:0;
padding:0;
background: #000 url(minwt_bg.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
< /style>
感謝補充，我來研究看看
刪除請問後續測試的結果
刪除真能依照螢幕調整大小嗎？
LOL 这声音让我觉得蛮意外的。。。
回覆刪除哈哈，不知道你想像中我應該是什麼聲音？
刪除你習慣用Google Docs還是MS Office? 亦或是iWork?
回覆刪除我習慣大多都在 Google Docs 上文書處理
刪除講話的方式，覺得與文章敘述模式差好多的感覺@@
回覆刪除聲調口吻有點喜感，賣萌可恥阿XDDD
哈哈，我沒有要表現喜感啊XD 看來我下次要刻意講得嚴肅點
刪除這太實用了，謝謝你的分享
回覆刪除謝謝分享，不過 版大提的兩個缺點很困擾我(不過看起來是無解)
回覆刪除