Welcome to a beginner’s tutorial on how to create a table from an array with Javascript. Need to display an array of data in a “nice HTML table”?
Creating a table from an array is as easy as looping through the array, and generating the HTML:
- Manually create the HTML string.
var table = "<table><tr>";
for (var VAL of ARRAY) { table += `<td>VAL</td>`; }
table += "</tr></table>";
document.getElementById("ID").innerHTML = table;
- Create a table, insert the rows and cells.
var table = document.createElement("table");
var row = table.insertRow();
for (var VAL of ARRAY) { let cell = row.insertCell(); cell.innerHTML = VAL; }
document.getElementById("ID").appendChild(table);
Yes, it’s that simple. But let us walk through an actual example – Read on!
ⓘ I have included a zip file with the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
JAVASCRIPT ARRAY TO HTML TABLE
All right, let us now get into the examples of turning an array into a table in Javascript.
METHOD 1) HTML TABLE STRING
<!-- (A) ALL WE NEED IS AN EMPTY <TABLE> -->
<table id="wrap"></table>
<script>
// (B) ARRAY OF DATA
var data = ["alpaca", "birb", "cate", "doge"];
// (C) CREATE HTML TABLE (2 CELLS PER ROW)
var table = "<tr>", perrow = 2;
data.forEach((value, i) => {
// (C1) "NORMAL" CELL
table += `<td>${value}</td>`;
// (C2) CLICK ON CELL TO DO SOMETHING
// table += `<td onclick="FUNCTION()">${value}</td>`;
// (C3) TO PASS IN A RUNNING NUMBER OR PARAMETER
// table += `<td onclick="FUNCTION(${i})">${value}</td>`;
// (C4) BREAK INTO NEXT ROW
var next = i + 1;
if (next%perrow==0 && next!=data.length) { table += "</tr><tr>"; }
});
table += "</tr>";
// (D) ATTACH TO EMPTY TABLE
document.getElementById("wrap").innerHTML = table;
</script>
Yep, “converting” an array to a table is as easy as that.
- First, all we need for the HTML is an empty
<table>
. - Captain Obvious to the rescue, an array of data.
- Next, we loop through the array to generate the rows and cells
<tr><td>
. Yes, HTML is essentially just text, and all we need is to append all the data into HTML cells –<td>${DATA}</td>
. - Finally, we put the complete HTML string into the empty table, and that’s all to it!
METHOD 2) CREATE TABLE ELEMENT
<!-- (A) ALL WE NEED IS AN EMPTY <TABLE> -->
<table id="wrap"></table>
<script>
// (B) ARRAY OF DATA
var data = ["alpaca", "birb", "cate", "doge"];
// (C) CREATE HTML TABLE (2 CELLS PER ROW)
var table = document.getElementById("wrap"),
row = table.insertRow(), cell,
perrow = 2;
data.forEach((value, i) => {
// (C1) ADD CELL
cell = row.insertCell();
cell.innerHTML = value;
// (C2) CLICK ON CELL TO DO SOMETHING
// cell.onclick = FUNCTION;
// (C3) TO PASS IN A RUNNING NUMBER OR PARAMETER
// cell.onclick = () => console.log(i);
// (C4) BREAK INTO NEXT ROW
var next = i + 1;
if (next%perrow==0 && next!=data.length) { row = table.insertRow(); }
});
Yep, this is the “alternate” way to generate an HTML table. The basic mechanics of looping through an array remains, but we now create the table with HTML objects:
- Get the empty HTML table –
table = document.getElementById("ID");
- Add a new row to the table –
row = table.insertRow();
- Add cells to the row –
cell = row.insertCell();
- Append data to the cell –
cell.innerHTML = DATA;
You guys who are used to OOP should be very comfortable with this.
EXTRA BITS & LINKS
That’s all for the code, and here is a small summary and some bits that may be useful to you.
WHICH ONE SHOULD WE USE?
Well, both the “string” and “object” methods work nicely. But some flaming troll master code ninjas will probably kick up a huge fuss and insist that we must do it the object-oriented way – As it looks more “advanced” and professional.
I will not argue with that and recommend it as well. The object-oriented way to create elements is just a lot cleaner, without having to write all those manual HTML tags. Still, there is nothing wrong with writing HTML strings and inserting them into the container… HTML is plain text in reality.
COMPATIBILITY CHECKS
- Arrow Functions
(PARAMETERS) => { DO SOMETHING }
– CanIUse - Template Literals
`This is a ${VARIABLE} string`
– CanIUse - Array For Each – CanIUse
Yep. Some of the “convenient shorthand” is not supported in ancient browsers. Be careful when using those.
SUMMARY – DOM FUNCTIONS YOU SHOULD KNOW
Function | Description | Reference Link |
document.getElementById(ID) |
Get the element for the given ID. | Click Here |
document.createElement(TAG) |
Creates a new DOM element. | Click Here |
ELEMENT.appendChild(OBJECT) |
Append the given object into the specified element. | Click Here |
TABLE.insertRow() |
Add a new row to the table. | Click Here |
ROW.insertCell() |
Add a new cell to the table row. | Click Here |
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end of this short guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
hello. that very nice. but what if my array content objects like this:
[{1,”yoss”100,true}{2,…}{}]
can i insert it in table? each object in one line [but each part in one cell]?
thank you very much!
yossi
Use a double for loop.
for (let OBJ of ARRAY) { for (let [K, V] of Object.entries(OBJ)) { ... } }
How would you then edit this table with CSS?
Very easy, go through all the basic CSS tutorials on your own. Good luck.
https://code-boxx.com/faq/#help
Thank you it is very usefull!
So i have used the create-element.js and did add a listener, but when i click any row on my table i only console the last row, please help how do i click a row and be able to console that row and not the last one.
Thnx
Don’t quite catch your question, but I am assuming that you have a running number or id for each cell. Quite easy to implement, just add a custom data attribute to the cells:
Hey there
Using the second script(2-create-element.js), how do you manipulate the script, such that you can refresh the table if you run the script multiple times and not to add repeated rows below the first created table.
Thanks
let container = document.getElementById("container");
container.innreHTML = "";
container.appendChild(table);