JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://spreadsheets.google.com/feeds/cells/1iQPsmwzBXV6Yv8wXT6bbJ0tOiFsrbxpfrDRVcOg-xUQ/1/public/values?gid=685872182&single=true&alt=json-in-script&callback=doData"></script>


<div id="style_14619286060000000134_BODY"><div style="width: 576px; display: inline;"><div itemtype="http://schema.org/ViewAction" itemprop="action">
</div>

Если вам не удается просмотреть или отправить форму, заполните ее <a href="https://docs.google.com/forms/d/1V7fCyQjnKKyys1CRRCu1y8ML-wiL7a8ZowQpfXYdc7o/viewform?c=0&amp;w=1&amp;usp=mail_form_link" target="_blank" rel="noopener">здесь</a>.
<p></p>
<div dir="ltr"><div><h1 style="margin: 0.67em 0px;" dir="ltr">Отправка данных в таблицу</h1></div>
<div style="display: inline; white-space: pre-wrap;">

<div aria-hidden="true" style="color: rgb(196, 59, 29);">*&nbsp;Обязательно</div></div>
<div><div>


<iframe name="my_iframe" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/1V7fCyQjnKKyys1CRRCu1y8ML-wiL7a8ZowQpfXYdc7o/formResponse" method="POST" target="my_iframe" >

<ol role="list" style="padding-left: 0px; list-style-type: none;">
<div role="listitem">
<div style="margin: 12px 0px;" dir="auto"><div style="margin-top: 0px; margin-bottom: 1.5em; margin-left: 0px; vertical-align: middle; max-width: 100%;">
<div style="font-weight: bold; margin-top: 0.83em; margin-bottom: 0.83em; display: block;">пароль

<span aria-hidden="true" style="color: rgb(196, 59, 29);">*</span></div>
<div style="margin: 0.1em 0px 0.25em; color: rgb(102, 102, 102); display: block;" dir="auto"></div>
<input name="entry.2029900949" title="Пароль неверен" aria-required="true" dir="auto" aria-label="пароль  Пароль неверен" type="text" value="">


</div></div></div> <div role="listitem">
<div style="margin: 12px 0px;" dir="auto"><div style="margin-top: 0px; margin-bottom: 1.5em; margin-left: 0px; vertical-align: middle; max-width: 100%;">
<div style="font-weight: bold; margin-top: 0.83em; margin-bottom: 0.83em; display:...

CSS

table {border-collapse: collapse; width: 100%;}
  th, td {border: thin solid black; padding: 3px; text-align: left}
  tr.head th, tr.head td {background-color: #EDEDED; border-bottom: 4px double black;}
  h1 {text-align: center;}
  body {margin: 12px; font-size: 12px;}

JavaScript

var spData = null;
  function doData(json) {
      spData = json.feed.entry;
  }
  
  function drawCell(tr, val, isHeader) {
      var td = $(isHeader ? "<th/>" : "<td/>");
      tr.append(td);
      td.append(val);
      return td;
  }
  function drawRow(table, rowData, isHeader) {
	  if (rowData == null) return null;
	  if (rowData.length == 0) return null;
	  var tr = $("<tr/>");
	  if (isHeader) tr.addClass("head");
	  table.append(tr);
	  for(var c=0; c<rowData.length; c++) {
		  drawCell(tr, rowData[c], ((c == 0) || isHeader));
	  }
	  return tr;
  }
  
  function drawTable(parent) {
	  var table = $("<table/>");
	  parent.append(table);
	  return table;
  }
  
  function readData(parent) {
      var data = spData;
      var table = drawTable(parent);
      var rowData = [];
      var row = 0;
      
      for(var r=0; r<data.length; r++) {
          var cell = data[r]["gs$cell"];
          var val = cell["$t"];
          if (cell.col == 1) {
              drawRow(table, rowData, (row == 1));
              rowData = [];
              row++;
          }
          rowData.push(val);
      }
      drawRow(table, rowData, (row == 1));
  }
  $(document).ready(function(){
      readData($("#data"));
  });