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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-09-25 11:00:00 +0000
Seen: 11 times
Last updated: Apr 09 '23
Is it feasible to utilize a Toggle Button to switch among multiple classes exceeding 2?
What is the process for generating a dynamic subdomain/URL using vue.js?
How can I create a transition on click using CSS without the need for JavaScript?
How can the style of the loader be modified while the form submission is being processed?
I'm attempting to develop a Javascript-based comments section for my website.
What are some feasible methods to enable MIDI file playback on a web browser?