JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>最新消息（表格版本）</title>

  <!-- DaisyUI CDN -->
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Google Visualization -->
  <script src="https://www.gstatic.com/charts/loader.js"></script>

  <script>
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(init);

    function init() {
      var SHEET_ID = '1TfNFLDOU4e_hPynUZDuk3pLXHqoRbiNXGazBN2jfspo';
      var SHEET_NAME = '工作表1';

      var baseUrl = 'https://docs.google.com/spreadsheets/d/' +
                    SHEET_ID +
                    '/gviz/tq?sheet=' +
                    encodeURIComponent(SHEET_NAME);

      var query = new google.visualization.Query(baseUrl);
      query.setQuery('select *');
      query.send(showNewsTable);
    }

    function showNewsTable(response) {
      var data = response.getDataTable();
      var rows = data.getNumberOfRows();
      var html = "";

      // 表格標題列
      html += '<table class="table table-zebra w-full">';
      html += '<thead><tr>' +
                '<th>ID</th>' +
                '<th>圖片</th>' +
                '<th>標題</th>' +
                '<th>日期</th>' +
                '<th>內容</th>' +
                '<th>連結</th>' +
              '</tr></thead><tbody>';

      for (var r = 1; r < rows; r++) {  // 跳過欄位標題列
        var id = data.getFormattedValue(r, 0);
        var title = data.getFormattedValue(r, 1);
        var date = data.getFormattedValue(r, 2);
        var content = data.getFormattedValue(r, 3);
        var link = data.getFormattedValue(r, 4);
        var img = data.getFormattedValue(r, 5);

        if (img === "") {
          img = "https://picsum.photos/seed/news" + id + "/200/120";
        }

        html += '<tr>' +
                  '<td>' + id + '</td>' +
              ...