Revision history [back]

Here's an example code snippet in HTML, CSS, and JavaScript to present several arrays in an HTML table format:

HTML:

<table id="myTable">
  <thead>
    <tr>
      <th>Array 1</th>
      <th>Array 2</th>
      <th>Array 3</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS:

/* Style the table */
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  margin: 20px 0;
}

/* Style the table header */
thead {
  background-color: #ddd;
}

/* Style the table header cells */
th {
  padding: 10px;
  font-weight: bold;
  border: 1px solid #ddd;
}

/* Style the table body cells */
td {
  padding: 10px;
  border: 1px solid #ddd;
}

JavaScript:

// Define the arrays
const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];
const array3 = [true, false, true];

// Get the table body element
const tbody = document.querySelector('#myTable tbody');

// Loop through the arrays and add rows to the table
for (let i = 0; i < array1.length; i++) {
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td>${array1[i]}</td>
    <td>${array2[i]}</td>
    <td>${array3[i]}</td>
  `;
  tbody.appendChild(tr);
}

This will create a table with headers for Array 1, Array 2, and Array 3. The JavaScript code loops through the arrays and creates a table row for each item, inserting the values into the table cells. The CSS styles the table and cells to make it look good. You can modify the code to suit your needs and add more arrays if you want.