Updated 2021.09.18
The methods in this post are no longer work.
GData is shut down and is replaced by Google Sheets API v4.

Migrate your apps to use the latest Sheets API version—turning down v3 API by 2020

Did Google Sheets stop allowing json access? - Stack Overflow

V4 版取得 Google Sheets 資料的方法 | Augustus | Let’s Write

步驟

1. data → Google Excel

把 data 輸入至 Google Excel。

以下為例：
（注意：header 必須用英文）

2. 把該張 Google sheet 發佈到網路

按左上角 「檔案」(File) → 「發佈到網路」(Publish to the web)

不用全個檔案都公開發佈，選取只發佈特定那幾張 sheet 也可以。

3. Google sheet data → json → HTML

把 spreadsheet 中的 data 呈現成 html 網頁。

效果

方法一 Code

特此感謝這個博主 Augustus | Let’s Write 以下的這篇文章！

如何用Google Excel當作資料庫 - Google - Let’s Write

html

<html>

<style>
    body {
        font-family: Impact, sans-serif;
        background: #082f43;
        color: white;
        padding: 50px;
    }
    
    h1 {
        font-size: 60px;
    }
    
    h2 {
        color: #ffc621;
    }
    
    .data {
        background: #0093a0;
        border-radius: 5px;
        float: left;
        margin: 10px;
        width: 20%;
        padding: 10px;
        height: 180px;
        position: relative;
        overflow: auto;
    }
    
    .dtag {
        position: absolute;
        top: 0;
        right: 0;
        margin: 15px;
        padding: 5px 10px;
        border-radius: 10px;
        background-color: #f76b61;
        color: white;
    }
</style>

<body>

    <h1>HEADING</h1>

    <div class="results">
        <!-- data will be inserted here-->
    </div>

    <h1>BOTTOM</h1>

    <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>

    <script>
        $(function() {
            $.get('https://spreadsheets.google.com/feeds/list/1y_Z3NKA7ZhPvH3WdQ5zdcwd4-kP5s_xNF1nixtuYxMA/1/public/values?alt=json', function(data) {
                var d = data.feed.entry;
                var items = [];
                for (var i in d) {
                    var item = {};
                    item.title = d[i].gsx$title.$t;
                    item.desc = d[i].gsx$desc.$t;
                    item.tag = d[i].gsx$tag.$t;
                    items.push(item);
                }
                console.table(items);
                for (var i in items) {
                    var Card = `

                <div class="data">
                    <h2>${items[i].title}</h2>
                    <p>${items[i].desc}</p>
                    <span class="dtag">${items[i].tag}</span>
                </div>

            `;
                    $('.results').append(Card);
                }
            });
        });
    </script>

</body>

</html>

方法二 Code

特此感謝這個博主中編 | 知識免費了以下的這篇文章！

知識免費了: 【json】json抓取雲端試算表資料並用html顯示

html

<html>

<style>
    body {
        font-family: Impact, sans-serif;
        background: #082f43;
        color: white;
        padding: 50px;
    }
    
    h1 {
        font-size: 60px;
    }
    
    h2 {
        color: #ffc621;
    }
    
    .data {
        background: #0093a0;
        border-radius: 5px;
        float: left;
        margin: 10px;
        width: 20%;
        padding: 10px;
        height: 180px;
        position: relative;
        overflow: auto;
    }
    
    .dtag {
        position: absolute;
        top: 0;
        right: 0;
        margin: 15px;
        padding: 5px 10px;
        border-radius: 10px;
        background-color: #f76b61;
        color: white;
    }
</style>

<body>

    <h1>HEADING</h1>

    <div class="results">
        <!-- data will be inserted here-->
    </div>

    <h1>BOTTOM</h1>

    <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>

    <script>
        var sheetid = '1y_Z3NKA7ZhPvH3WdQ5zdcwd4-kP5s_xNF1nixtuYxMA',
            sheetno = 1,
            dataurl = 'https://spreadsheets.google.com/feeds/list/' + sheetid + '/' + sheetno + '/public/values?alt=json-in-script&callback=?';

        $.getJSON(dataurl,
            function(json) {
                var e = json.feed.entry,
                    n = e.length;

                $(e).each(function() {
                    $('.results').append('<div class="data"><h2>' + this.gsx$title.$t + '</h2><p>' + this.gsx$desc.$t + '</p><span class="dtag">' + this.gsx$tag.$t + '</span></div>');
                });


            }
        );
    </script>

</body>

</html>

代碼解釋

sheetid
例如這次我的 Google excel url 是： https://docs.google.com/spreadsheets/d/1y_Z3NKA7ZhPvH3WdQ5zdcwd4-kP5s_xNF1nixtuYxMA/edit#gid=0 ，取中間 1y_Z3NKA7ZhPvH3WdQ5zdcwd4-kP5s_xNF1nixtuYxMA
sheetno
按該 Google sheet tab 排序而填寫
gsx$【】.$t 【header column name】
抓取 Google sheet 中的 data 變成 json format
以上例子是把 data append 到 results div 後

步驟

1. data → Google Excel

2. 把該張 Google sheet 發佈到網路

3. Google sheet data → json → HTML

效果

方法一 Code

方法二 Code

代碼解釋

References