How to make a javascript table

A review of how to use JavaScript to sort tables with an example of code.

Creating a JavaScript Table

Creating a table with JavaScript is easy and will give you more flexibility than a static HTML table. The following example will create a table with three columns and five rows.

// Create an empty table
var table = document.createElement("table");

// Create table body
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// Create a row
var row = document.createElement("tr");
tbody.appendChild(row);

// Create a cell
var cell1 = document.createElement("td");

// Set cell content
var cell1Text = document.createTextNode("Cell 1");
cell1.appendChild(cell1Text);

// Add cell to row
row.appendChild(cell1);

// Create second cell
var cell2 = document.createElement("td");

// Set cell content
var cell2Text = document.createTextNode("Cell 2");
cell2.appendChild(cell2Text);

// Add cell to row
row.appendChild(cell2);

// Create third cell
var cell3 = document.createElement("td");

// Set cell content
var cell3Text = document.createTextNode("Cell 3");
cell3.appendChild(cell3Text);

// Add cell to row
row.appendChild(cell3);

// Append table to body
document.body.appendChild(table);

The above example creates a single row with three cells. To create more rows, you will need to repeat the code above for each row you want to create. For example, the following code will create five rows.

// Create five rows
for (var i = 0; i < 5; i++) {
  // Create a row
  var row = document.createElement("tr");
  tbody.appendChild(row);

  // Create a cell
  var cell1 = document.createElement("td");

  // Set cell content
  var cell1Text = document.createTextNode("Cell 1");
  cell1.appendChild(cell1Text);

  // Add cell to row
  row.appendChild(cell1);

  // Create second cell
  var cell2 = document.createElement("td");

  // Set cell content
  var cell2Text = document.createTextNode("Cell 2");
  cell2.appendChild(cell2Text);

  // Add cell to row
  row.appendChild(cell2);

  // Create third cell
  var cell3 = document.createElement("td");

  // Set cell content
  var cell3Text = document.createTextNode("Cell 3");
  cell3.appendChild(cell3Text);

  // Add cell to row
  row.appendChild(cell3);

}

// Append table to body
document.body.appendChild(table);

The code above creates a table with three columns and five rows. You can customize the table by changing the contents of the cells, adding more columns or rows, or adding attributes to the table, rows and cells.

Once you have created the table, you can style it using CSS. For example, to give the table a border, you can use the following code:

table.style.border = "1px solid black";

This will give the table a one-pixel black border. You can also style the rows and cells to give the table a unique look.

Creating tables with JavaScript is easy and will give you more control over the appearance of your tables. With a few lines of code, you can create a table that can be easily customized and styled to fit your needs.