2016年2月16日 星期二

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

11 則留言 :

  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. 這太實用了,謝謝你的分享

    回覆刪除

相關文章: