An **HTML table** is used for the ​arrangement of data in rows and columns, or possibly in a more complex structure.

# Defining tables in HTML
An HTML table is defined with the `<table>` tag. Following are some basic tags used for specifying the features of a  table: 

* `<tr>` tag is used to define each row in a table. 
* `<th>` tag is used to define headers of a table.  
* `<td>` tag is used to define a table data or a cell. 

By default, table headings are bold and centered while data is non-bold and left aligned. 

## Example:
Below is an example of defining a basic HTML table:

> For easy reading of the table, *line 4-8* are used to add borders to the headers and data cells.

var TestResult = function() {
  this.succeeded = false;
  this.reason = "";
  this.input = "";
  this.expected_output = "";
  this.actual_output = "";
};

var executeTests = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];

  const jsdom = require("jsdom");
  const { JSDOM } = jsdom;
  const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

  const pTag = dom2.window.document.querySelector("p");

  const result = new TestResult();
  result.expected_output = "Hello World";
  result.input = "Html page";

  if (!pTag) {
    result.actual_output = "null";
    result.succeeded = false;
    result.reason = "No p tag found";
  } else {
    const pTagText = pTag ? pTag.textContent : "";
    result.actual_output = pTagText;
    if (pTagText.trim() != "Hello World") {
      result.reason = "Expected output (Hello World in a p tag) did not match";
      result.succeeded = false;
    } else {
      result.succeeded = true;
      result.reason = "Found p tag with Hello World";
    }
  }

  results.push(result);

  return results;
};

// Async Tests Example
/*
var executeTestsAsync = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];
  return new Promise(resolve => {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

    if (!dom2.window.onModulesLoaded) {
      console.log("window.onModulesLoaded not found!");
    	resolve(results);
    }
    dom2.window.onModulesLoaded.then(()=>{
      const pTag = dom2.window.document.querySelector("p");

      const result = new TestResult();
      result.expected_output = "Hello World";
      result.input = "Html page";

      if (!pTag) {
        result.actual_output = "null";
        result.succeeded = false;
        result.reason = "No p tag found";
      } else {
        const pTagText = pTag ? pTag.textContent : "";
        result.actual_output = pTagText;
        if (pTagText.trim() != "Hello World") {
          result.reason = "Expected output (Hello World in a p tag) did not match";
          result.succeeded = false;
        } else {
          result.succeeded = true;
          result.reason = "Found p tag with Hello World";
        }
      }

      results.push(result);
      resolve(results);
    });
  });
};
*/

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>

    <table>
      <tr>
        <th>Name</th>
        <th>Place</th>
        <th>Animal</th>
        <th>Thing</th>
      </tr>
      <tr>
        <td>Bradley</td>
        <td>Belgium</td>
        <td>Bear</td>
        <td>Bag</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Jordan</td>
        <td>Jaguar</td>
        <td>Jacket</td>
        </tr>
      <tr>
        <td>Henry</td>
        <td>Hungary</td>
        <td>Horse</td>
        <td>Hammer</td>
        
      </tr>
    </table>

  </body>
</html>

document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
  newVal.innerHTML = 'Hello, Hello';
  pTag.appendChild(newVal);
});

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

What is an HTML table?

Defining tables in HTML

Example: