W3Schools Tryit Editor

<!DOCTYPE html>
<html>

<title>W3.JS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>

<script>
var myObject= {"customers":[
{"CustomerName" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},
{"CustomerName" : "Berglunds snabbk�p","City" : "Lule�","Country" : "Sweden"},
{"CustomerName" : "Centro comercial Moctezuma","City" : "M�xico D.F.","Country" : "Mexico"},
{"CustomerName" : "Ernst Handel","City" : "Graz","Country" : "Austria"},
{"CustomerName" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},
{"CustomerName" : "Galer�a del gastr�nomo","City" : "Barcelona","Country" : "Spain"},
{"CustomerName" : "Island Trading","City" : "Cowes","Country" : "UK"},
{"CustomerName" : "K�niglich Essen","City" : "Brandenburg","Country" : "Germany"},
{"CustomerName" : "Laughing Bacchus Wine Cellars","City" : "Vancouver","Country" : "Canada"},
{"CustomerName" : "Magazzini Alimentari Riuniti","City" : "Bergamo","Country" : "Italy"},
{"CustomerName" : "North/South","City" : "London","Country" : "UK"},
{"CustomerName" : "Paris sp�cialit�s","City" : "Paris","Country" : "France"},
{"CustomerName" : "Rattlesnake Canyon Grocery","City" : "Albuquerque","Country" : "USA"},
{"CustomerName" : "Simons bistro","City" : "K�benhavn","Country" : "Denmark"},
{"CustomerName" : "The Big Cheese","City" : "Portland","Country" : "USA"},
{"CustomerName" : "Vaffeljernet","City" : "�rhus","Country" : "Denmark"},
{"CustomerName" : "Wolski Zajazd","City" : "Warszawa","Country" : "Poland"}
]};
</script>
<body class="w3-container">

<h2>Testing W3.JS with CSS</h2>

<table id="id01" class="w3-table-all">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr w3-repeat="customers">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>

<script>
w3.displayObject("id01", myObject);
</script>

</body>
</html>