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

    回覆刪除
    回覆
    1. 感謝補充,我來研究看看

      刪除
    2. 請問後續測試的結果
      真能依照螢幕調整大小嗎?

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

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

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

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

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

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

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

    回覆刪除
  6. 謝謝分享,不過 版大提的兩個缺點很困擾我(不過看起來是無解)

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

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

個人知識管理的時間平衡心法,忙碌中我如何維持高效率輸入輸出

5 條「這時候,不要做」清單打破無意識行動模式的低效率循環

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

Google 表單的 10 個專業問卷調查設計秘密教學

ChatGPT DALL-E 3 的7個特殊 AI 繪圖應用教學,勝過 Midjourney