<header>
<h1>For Table</h1>
</header>
<style>
td {
padding: 5px;
}
td,
th {
border: 1px solid #999;
border-top-color: rgb(153, 153, 153);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(153, 153, 153);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(153, 153, 153);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(153, 153, 153);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
td {
display: table-cell;
vertical-align: inherit;
}
table {
border-collapse: collapse;
text-indent: initial;
border-spacing: 2px;
}
</style>
<body>
<script>
const toHtmlTable = (arr) => {
let str = "<table>";
for (let arrEl of arr) {
str += "<tr>";
for (let val of arrEl) {
str += `<td>${val}</td>`;
}
str += "</tr>";
}
str += "</table>";
return str;
}
arr = [];
for (let i = 0; i < 5; i++) {
arr[i] = [];
for (let j = 0; j < 5; j++) {
arr[i][j] = (i + 1) * (j + 1);
}
}
document.write(toHtmlTable(arr));
</script>
</body>