How to build a table on HTML page which is pushed as list?

Question

I am trying to show .csv content on a page as a table. The list includes unknown rows and columns that depends on the user. It is not a fixed type like 2x2 or 3x4. But I got something like the following;

       [
    [
    &
    #
    x
    2
    7
    ;
    x
    x
.......

I am redirecting a list and also tried json. The content of the list is not fixed. The length and column side are dependable. I am trying to pass data properly and show as table return list;

return render(request, 'yuklenen.html', {'veriler': yuklenen, 'file': listx })

I want to show it as <div id="contain"></div>

Here's the code:

 <script>
        var str = '<ul>';
        var data1 = "{{file}}" ;
    
        for(var x in at){
            str+='<li>' + at[x] + '<li>';
        }
    
 
    str += '</ul>';
    document.getElementById("contain").innerHTML = str;
    
 
  </script>

Answer 1

Hope this will get you started:

function rand(min, max)
{
  return Math.round(Math.random() * (max - min) + min);
}
function update()
{
  const at = [];
  for(let x = 0; x < rand(3, 10); x++)
  {
    const c = [];
    for(let y = 0; y < rand(1, 10); y++)
    {
      c[y] = rand(0, 100);
    }
    at[x] = c;
  }

  var str = '<ul>';

  for(var x in at){
      str+='<li>';
      for(var y in at[x])
        str += "<span>" + at[x][y] + "</span>";

      str+='</li>';
  }

  str += '</ul>';
  document.getElementById("contain").innerHTML = str;
}
update();

ul
{
  display: table;
  border-collapse: collapse;
}
li
{
  display: table-row;
}

li > span
{
  border: 1px solid black;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
  width: 2em;
  height: 2em;
}

<button onclick="update()">update</button>
<div id="contain"></div>