Certainly!
Here are two examples of code for making a simple calculator using HTML and CSS:
Example 1: Simple Calculator using Table
```
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
td {
padding: 5px;
text-align: center;
input[type="text"] {
width: 100%;
height: 30px;
padding: 5px;
font-size: 18px;
text-align: right;
border: 1px solid black;
input[type="button"] {
width: 100%;
height: 30px;
font-size: 18px;
background-color: #4CAF50;
border: none;
color: white;
cursor: pointer;
input[type="button"]:hover {
background-color: #3E8E41;
</style>
</head>
<body>
<table>
<tr>
<td colspan="4"><input type="text" id="result" readonly></td>
</tr>
<tr>
<td><input type="button" value="1"
onclick="document.getElementById('result').value += '1'"></td>
<td><input type="button" value="2"
onclick="document.getElementById('result').value += '2'"></td>
<td><input type="button" value="3"
onclick="document.getElementById('result').value += '3'"></td>
<td><input type="button" value="+"
onclick="document.getElementById('result').value += '+'"></td>
</tr>
<tr>
<td><input type="button" value="4"
onclick="document.getElementById('result').value += '4'"></td>
<td><input type="button" value="5"
onclick="document.getElementById('result').value += '5'"></td>
<td><input type="button" value="6"
onclick="document.getElementById('result').value += '6'"></td>
<td><input type="button" value="-"
onclick="document.getElementById('result').value += '-'"></td>
</tr>
<tr>
<td><input type="button" value="7"
onclick="document.getElementById('result').value += '7'"></td>
<td><input type="button" value="8"
onclick="document.getElementById('result').value += '8'"></td>
<td><input type="button" value="9"
onclick="document.getElementById('result').value += '9'"></td>
<td><input type="button" value="*"
onclick="document.getElementById('result').value += '*'"></td>
</tr>
<tr>
<td><input type="button" value="C"
onclick="document.getElementById('result').value = ''"></td>
<td><input type="button" value="0"
onclick="document.getElementById('result').value += '0'"></td>
<td><input type="button" value="="
onclick="document.getElementById('result').value =
eval(document.getElementById('result').value)"></td>
<td><input type="button" value="/"
onclick="document.getElementById('result').value += '/'"></td>
</tr>
</table>
</body>
</html>
```
Example 2: Simple Calculator using Grid
```
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 5px;
padding: 10px;
border: 1px solid black;
background-color: #f2f2f2;
input[type="text"] {
grid-column: 1 / span 4;
height: 50px;
font-size: 24px;
text-align: right;
border: 1px solid black;
padding: 5px;
input[type="button"] {
height: 50px;
font-size: 24px;
background-color: #4CAF50;
border: none;
color: white;
cursor: pointer;
input[type="button"]:hover {
background-color: #3E8E41;
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<input type="button" value="1" onclick="document.getElementById('result').value +=
'1'">
<input type="button" value="2" onclick="document.getElementById('result').value +=
'2'">
<input type="button" value="3" onclick="document.getElementById('result').value +=
'3'">
<input type="button" value="+" onclick="document.getElementById('result').value +=
'+'">
<input type="button" value="4" onclick="document.getElementById('result').value +=
'4'">
<input type="button" value="5" onclick="document.getElementById('result').value +=
'5'">
<input type="button" value="6" onclick="document.getElementById('result').value +=
'6'">
<input type="button" value="-" onclick="document.getElementById('result').value +=
'-'">
<input type="button" value="7" onclick="document.getElementById('result').value +=
'7'">
<input type="button" value="8" onclick="document.getElementById('result').value +=
'8'">
<input type="button" value="9" onclick="document.getElementById('result').value +=
'9'">
<input type="button" value="*" onclick="document.getElementById('result').value +=
'*'">
<input type="button" value="C" onclick="document.getElementById('result').value = ''">
<input type="button" value="0" onclick="document.getElementById('result').value +=
'0'">
<input type="button" value="=" onclick="document.getElementById('result').value =
eval(document.getElementById('result').value)">
<input type="button" value="/" onclick="document.getElementById('result').value +=
'/'">
</div>
</body>
</html>
```
Note that these examples are just simple calculators and do not cover all possible cases or error
handling. They should be used as a starting point for building a more comprehensive calculator program.
