HTML:
Number Square Table
CSS (styles.css):
/* Styling for the table */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #4682B4;
padding: 10px;
text-align: center;
font-family: Arial, sans-serif;
}
th {
background-color: #f2f2f2;
}
JavaScript (script.js):
// Create a table element
const table = document.createElement('table');
// Loop through rows (1 to 9)
for (let i = 1; i <= 9; i++) {
const row = document.createElement('tr');
// Loop through columns (0 to 9)
for (let j = 0; j <= 9; j++) {
const cell = document.createElement('td');
// Calculate the square of the number (10 * i + j) and set as cell text
const number = 10 * i + j;
cell.textContent = number * number;
// Append cell to the row
row.appendChild(cell);
}
// Append row to the table
table.appendChild(row);
}
// Add the table to the container div
document.getElementById('table-container').appendChild(table);