How to make a table in JavaScript

Create a JavaScript table with sample code: learn how to add, delete, and modify columns and rows quickly and easily.

Creating a Table in JavaScript

Creating a table in JavaScript can be done with the help of HTML and CSS. The HTML will define the structure of the table, while the CSS will define the styling of the table. This can be done using the following code:

//Create HTML table
var table = document.createElement('table');
table.setAttribute('id', 'myTable');

//Create HTML table row
var row = document.createElement('tr');

//Create HTML table cells
var cell1 = document.createElement('td');
var cell2 = document.createElement('td');

//Set cell content
cell1.innerHTML = 'Cell 1';
cell2.innerHTML = 'Cell 2';

//Append cells to row
row.appendChild(cell1);
row.appendChild(cell2);

//Append row to table
table.appendChild(row);

//Add table to the document
document.body.appendChild(table);

Now, to add styling to the table, you can use the following CSS code:

#myTable {
  width: 100%;
  border-collapse: collapse;
}
#myTable td {
  border: 1px solid #000000;
  padding: 10px;
}

The above code will create a table with two cells, each cell having a border and padding of 10px. You can add more styling to the table using CSS, or you can add more rows and columns to the table using JavaScript.