table{border: 1px #333 solid;border-spacing: 0;}
th{background: bisque;}
th,td{border: 1px #333 solid;}
const table = document.createElement('table'),header = ["id","name", "address"],
message = [header,
{id:1, name:"two_1", address:"add_1"},
{id:2, name:"two_2", address:"add_2"},
{id:3, name:"two_3", address:"add_3"},
{id:4, name:"two_4", address:"add_4"},
{id:5, name:"two_5", address:"add_5"},
{id:6, name:"two_6", address:"add_6"}
];
table.innerHTML = message.map((m,i)=>`<tr>${header.map((h,j)=>(j=i?'td':'th',l=i?m[h]:h,`<${j}>${l}</${j}>`)).join('')}</tr>`).join('');
document.querySelector('body').appendChild(table);
for(let i = 0; i < message.length; i++){
for(let j = 0; j < header.length; j++){
//console.log(message[i][header[j]])
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.