JSFiddle - React, Tailwind, and code Playground

by steakpi

HTML

<table>
    
</table>
<div class="modified">
    <ul>
        <li><strong>Modified by:</strong><span id="author"></span></li>
        <li><strong>Time modified:</strong><span id="timestamp"></span></li>
    </ul>
</div>

CSS

body{
    font-family:arial;
}
table{
    font-size:12px;
    border:1px solid #ccc;
    
}
th{
    background:#003b81;
    color:#fff;
    padding:5px 10px;
}
td{
    background:#eee;
    padding:5px 10px;
}
ul{
      margin:0;
    padding:0;
}
li{
    font-size:11px;
    list-style:none;
    font-weight:700;
    
}

li span{
    font-weight:300;
    margin-left:10px;
}

li strong{
    display:inline-block;
    width:80px;
}

.modified{
    margin-top:15px;
}

JavaScript

//using correct JSON!!

url="https://spreadsheets.google.com/feeds/list/0Aut4ETkSs0cFdGphZlgtUk16OHhVNjVIdk5jU3huX2c/od6/public/values?alt=json";
var html;

$.getJSON(url, function(data) {
    timestamp = data.feed.updated.$t;
    author = data.feed.author[0].name.$t;
    entries = data.feed.entry;
    //console.log(data);
    
    $('#author').append(author);
    $('#timestamp').append(timestamp);
    
    //taking of 6 unwanted keys from the maths
    NumberOfColoums = Object.keys(entries[0]).length - 6;
    
    //console.log();
    for(i=0;i<entries.length;i++){
        
        if(i == 0){
            html ="<tr>";    
    html +="<th>"+entries[i].gsx$titleid0.$t+"</th>";
    html +="<th>"+entries[i].gsx$titleid1.$t+"</th>";
    html +="<th>"+entries[i].gsx$titleid2.$t+"</th>";  
    html +="<th>"+entries[i].gsx$titleid3.$t+"</th>"; 
    html +="<th>"+entries[i].gsx$titleid4.$t+"</th>";
    html +="<th>"+entries[i].gsx$titleid5.$t+"</th>";
    html +="<th>"+entries[i].gsx$titleid6.$t+"</th>"; 
    html +="<th>"+entries[i].gsx$titleid7.$t+"</th>"; 
    html +="<th>"+entries[i].gsx$titleid8.$t+"</th>"; 
    html +="<th>"+entries[i].gsx$titleid9.$t+"</th>";       
    html +="</tr>";      
        } else {
   
    html ="<tr>";    
    html +="<td>"+entries[i].gsx$titleid0.$t+"</td>";
    html +="<td>"+entries[i].gsx$titleid1.$t+"</td>";
    html +="<td>"+entries[i].gsx$titleid2.$t+"</td>";  
    html +="<td>"+entries[i].gsx$titleid3.$t+"</td>"; 
    html +="<td>"+entries[i].gsx$titleid4.$t+"</td>";
    html +="<td>"+entries[i].gsx$titleid5.$t+"</td>";
    html +="<td>"+entries[i].gsx$titleid6.$t+"</td>"; 
    html +="<td>"+entries[i].gsx$titleid7.$t+"</td>"; 
    html +="<td>"+entries[i].gsx$titleid8.$t+"</td>"; 
    html +="<td>"+entries[i].gsx$titleid9.$t+"</td>";       
    html +="</tr>";      
        }
    
    $('table').append(html)
    
    }
 });