How to Populate a Table with JavaScript in CSS

In this article, we’ll show you how to dynamically populate an HTML table using JavaScript. This is a very important and common requirement for developers who need to add data to a table or create dynamic tables.

Read more: CSS Tutorial

What is a Table

An HTML table is a markup element that displays data in rows and columns. It’s enclosed by the <table> tag, with rows defined using the <tr> tag. Each row is divided into one or more cells, defined using the <td> tag. Each cell can contain various elements, such as text, https://coder-cafe.com/wp-content/uploads/2025/09/images, or other HTML content.

Dynamically Creating a Table

When we need to display a large amount of data on a web page, manually creating a table is impractical. In these cases, we can use JavaScript to dynamically create a table and populate it with data.

First, we need to define an empty table in the HTML page. This can be done using the <table> tag:

<table id="myTable"></table> 

Next, in JavaScript, we can use the document.createElement() method to create the required table rows and cells and the appendChild() method to add them to the table. Here’s a simple example showing how to create a table with three rows and two columns:

var table = document.getElementById("myTable");

for (var i = 0; i < 3; i++) {
var row = document.createElement("tr");

for (var j = 0; j < 2; j++) {
var cell = document.createElement("td");
cell.textContent = "Row " + (i + 1) + ", Cell " + (j + 1);
row.appendChild(cell);
}

table.appendChild(row);
}

The above code creates a table with three rows and two columns and populates each cell with content. In this example, we use the textContent property to set the text content of each cell.

Populating a Table with JavaScript

Sometimes, we need to dynamically populate a table from an external data source. In these cases, we can use JavaScript to retrieve the data and add it to the table.

Suppose we have an array storing data, where each array element represents a row of data. We can use a loop to iterate over the array and create table rows and cells to populate the data.

var data = [ 
{ name: "John", age: 25, city: "New York" }, 
{ name: "Jane", age: 30, city: "Los Angeles" }, 
{ name: "Bob", age: 35, city: "Chicago" } 
]; 

var table = document.getElementById("myTable"); 

for (var i = 0; i < data.length; i++) { 
var row = document.createElement("tr"); 

var nameCell = document.createElement("td"); 
nameCell.textContent = data[i].name; 
row.appendChild(nameCell); 

var ageCell = document.createElement("td"); 
ageCell.textContent = data[i].age; 
row.appendChild(ageCell); 

var cityCell = document.createElement("td"); 
cityCell.textContent = data[i].city; 
row.appendChild(cityCell); table.appendChild(row); 
}

The above code creates a table with three rows and three columns and populates it with data. We use a loop to iterate over the data array, creating a new table row and corresponding cell each time. We then assign the data to each cell’s textContent property.

Summary

By using JavaScript, we can dynamically create and populate HTML tables. Whether we’re writing static data or fetching it from an external data source, we use the same methods to manipulate the table. This flexibility allows us to dynamically generate and update tables as needed, improving user experience and interactivity. I hope this article helps you understand how to populate forms using JavaScript.