超簡單網頁表格製作!免語法用 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 試算表教學

留言

  1. 這算是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>

    回覆刪除
  2. LOL 这声音让我觉得蛮意外的。。。

    回覆刪除
    回覆
    1. 哈哈,不知道你想像中我應該是什麼聲音?

      刪除
  3. 你習慣用Google Docs還是MS Office? 亦或是iWork?

    回覆刪除
    回覆
    1. 我習慣大多都在 Google Docs 上文書處理

      刪除
  4. 講話的方式,覺得與文章敘述模式差好多的感覺@@
    聲調口吻有點喜感,賣萌可恥阿XDDD

    回覆刪除
    回覆
    1. 哈哈,我沒有要表現喜感啊XD 看來我下次要刻意講得嚴肅點

      刪除
  5. 這太實用了,謝謝你的分享

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

形色:一秒辨識四千種花草植物,最聰明又有詩意的賞花 App

OpenShot 免費中文版影片剪輯軟體,何必用精簡版的威力導演

Google Maps 我的地圖完全教學!規劃自助旅行攻略

To the Moon 繁中版登陸手機,經典說故事型 RPG 無劇透評析

Smallpdf 線上 PDF 轉檔 Word 與編輯免費全能工具,支援中文

五款免費中文 OCR 文字辨識軟體下載,建立強大無紙化辦公室

我所養成的 10 個最有生產力習慣,以及我如何養成這些習慣

Beholder 當個好人很難,傳承《1984》反烏托邦模擬遊戲心得

Notion 把文件、任務、知識庫「無縫重組」的全新專案整理工具

YouTube 簡約黑色劇院介面正式推出,立即啟動不需改程式碼