JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div id="table">

</div>

CSS

table {
  cellspacing;
}

td {
  border: 1px solid black;
  empty-cells: hide;
}

JavaScript

tableSample();



function tableSample() {
  let table = "";
  let data = ["this", "is", "first", "row"];
  let subData = ["this", "is", "second", "row"];

  table += "<table cellspacing=0>";
  table += createRow(data, 0);
  table += createRow(data, 1);
  table += createRow(data, 1);
  table += createRow(data, 1);
  table += createRow(data, 0);
  table += createRow(data, 1);
  table += "</table>";

  document.getElementById("table").innerHTML = table;
}

function createRow(data, rowSublevel) {
  let row = "<tr>";
  row += emptyCells(rowSublevel);
  for (let i = 0; i < data.length; i++) {
    row += "<td>" + data[i] + "</td>";
  }
  return row;
}

function emptyCells(rowSublevel) {
  let cells = "";
  for (let i = 0; i < rowSublevel; i++) {
    cells += "<td></td>";
  }
  return cells;
}