<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Square and Cube Table</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
th {
background-color: #f2f2f2;
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Number</th>
<th>Square</th>
<th>Cube</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Rows will be inserted here by JavaScript -->
</tbody>
</table>
<script>
const tableBody = document.getElementById('table-body');
for (let i = 1; i <= 10; i++) {
const square = i * i;
const cube = i * i * i;
const row = document.createElement('tr');
row.innerHTML = `<td>${i}</td><td>${square}</td><td>$
{cube}</td>`;
tableBody.appendChild(row);
</script>
</body>
</html>