How to Create Table Using JavaScript

Create an HTML table from JavaScript data by building its elements with document.createElement(), setting cell text with textContent, and adding the finished table to a page container with appendChild(). This approach is useful when the rows come from data that changes while the page is running.

HTML table structure and the elements you need

A table uses nested elements to describe its content. The table element contains rows (tr); each row contains header cells (th) or data cells (td). Use th for a cell that labels a row or column, and use td for ordinary data. Header cells are not limited to thead: they can also label rows in the table body.

The thead and tbody elements group header rows and body rows, respectively. They make larger tables easier to organize, but they are not required for every table. A tfoot group can hold summary or footer rows when the table needs one. For a small table, the key structure is a table with its rows and cells; add grouping elements when they make the structure clearer.

Create and populate a table with JavaScript

The example below creates one header row and two data rows. It builds a table with three columns—number, name, and company—and places ordinary text in each cell using textContent. This treats values as text instead of parsing them as HTML, which is the safer default for data that may contain user input.

The browser example below uses the native DOM and adds the completed table to an existing #table-container. The separate Node.js demonstration that follows uses a small DOM-shaped model to show the row-building logic and its counts; it does not create a visible browser table.

Browser page example (save as an HTML page and open it in a browser):

<!doctype html>
<html lang="en">
  <body>
    <div id="table-container"></div>
    <script>
      const container = document.getElementById("table-container");
      const table = document.createElement("table");
      const thead = document.createElement("thead");
      const tbody = document.createElement("tbody");
      const headings = ["No.", "Name", "Company"];
      const records = [
        ["1", "James Clerk", "Netflix"],
        ["2", "Adam White", "Microsoft"]
      ];

      const headerRow = document.createElement("tr");
      for (const heading of headings) {
        const cell = document.createElement("th");
        cell.textContent = heading;
        headerRow.appendChild(cell);
      }
      thead.appendChild(headerRow);

      for (const record of records) {
        const row = document.createElement("tr");
        for (const value of record) {
          const cell = document.createElement("td");
          cell.textContent = value;
          row.appendChild(cell);
        }
        tbody.appendChild(row);
      }

      table.appendChild(thead);
      table.appendChild(tbody);
      container.appendChild(table);
    </script>
  </body>
</html>

Run this self-contained JavaScript example:

class Element {
  constructor(name) {
    this.name = name;
    this.children = [];
    this.textContent = "";
  }

  appendChild(child) {
    this.children.push(child);
    return child;
  }
}

const document = {
  createElement(name) {
    return new Element(name);
  },
  body: new Element("body")
};

const container = document.createElement("div");
container.id = "table-container";
document.body.appendChild(container);

const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");
const headings = ["No.", "Name", "Company"];
const records = [
  ["1", "James Clerk", "Netflix"],
  ["2", "Adam White", "Microsoft"]
];

const headerRow = document.createElement("tr");
for (const heading of headings) {
  const cell = document.createElement("th");
  cell.textContent = heading;
  headerRow.appendChild(cell);
}
thead.appendChild(headerRow);

for (const record of records) {
  const row = document.createElement("tr");
  for (const value of record) {
    const cell = document.createElement("td");
    cell.textContent = value;
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}

table.appendChild(thead);
table.appendChild(tbody);
container.appendChild(table);

const tableElement = container.children[0];
const headerCells = tableElement.children[0].children[0].children;
const bodyRows = tableElement.children[1].children;
console.log(`${headerCells.length} headings, ${bodyRows.length} data rows`);

3 headings, 2 data rows

document.createElement() takes an element name as a string and returns a new element. The code creates a tr for each row, then adds th or td cells to it. Each cell is filled before its row is placed into thead or tbody. Finally, the groups are placed in the table and the table is appended to the container created at the start of the example.

For a page you control, the container can be as simple as <div id="table-container"></div>. In browser code, select that existing element with document.getElementById("table-container") and append the completed table to it. Place the script after the container in the page, or run it after the document has loaded, so the target exists. Add presentation separately with CSS, for example by applying borders and padding to table, th, and td; JavaScript creates the structure and content while CSS controls how they look.

Attach and verify the table in the DOM

Append the completed table to the selected container with container.appendChild(table). This adds the table inside that container and leaves the rest of the page in place. If the table should replace existing content, clear that content deliberately before appending; otherwise, each run adds another table.

To verify the result, open the browser’s developer tools and inspect the container in the Elements panel. It should contain a table, with a thead holding one row of three th cells and a tbody holding two rows of three td cells each. The rendered table should show the headings “No.”, “Name”, and “Company”, followed by James Clerk / Netflix and Adam White / Microsoft. If the table is absent, confirm the container ID and script timing. For plain text values, keep using textContent rather than assigning data to innerHTML.