<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Math Operations Form with Table</title>
<style>
body {
font-family: Arial, sans-serif;
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
table, th, td {
border: 1px solid black;
th, td {
padding: 10px;
text-align: left;
.result {
margin-top: 10px;
</style>
</head>
<body>
<h2>Math Operations Calculator</h2>
<table>
<tr>
<td>Number 1:</td>
<td><input type="number" id="num1" name="num1"></td>
</tr>
<tr>
<td>Number 2:</td>
<td><input type="number" id="num2" name="num2"></td>
</tr>
<tr>
<td>Operation:</td>
<td>
<button onclick="performOperation('add')">Add</button>
<button onclick="performOperation('subtract')">Subtract</button>
<button onclick="performOperation('multiply')">Multiply</button>
<button onclick="performOperation('divide')">Divide</button>
</td>
</tr>
<tr>
<td>Result:</td>
<td id="result"></td>
</tr>
</table>
<script>
function performOperation(operation) {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var result;
switch(operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if(num2 !== 0) {
result = num1 / num2;
} else {
document.getElementById('result').innerText = "Cannot divide
by zero";
return;
break;
default:
result = "Invalid operation";
document.getElementById('result').innerText = result;
</script>
</body>
</html>