How to create the interface of Calculator using HTML and CSS?
Example :
Interface of calculator:
<html>
<head>
<title>Calculator</title>
<style>
#div1{
padding: 10px;
background-color: lightgray;
width:fit-content;
}
input[type="button"]
{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="div1">
<input type="text" id="txt1" style="width: 100%; height: 40px;" />
<table>
<tr>
<td><input type="button" value="7" /></td>
<td><input type="button" value="8" /></td>
<td><input type="button" value="9" /></td>
<td><input type="button" value="/" /></td>
</tr>
<tr>
<td><input type="button" value="4" /></td>
<td><input type="button" value="5" /></td>
<td><input type="button" value="6" /></td>
<td><input type="button" value="X" /></td>
</tr>
<tr>
<td><input type="button" value="1" /></td>
<td><input type="button" value="2" /></td>
<td><input type="button" value="3" /></td>
<td><input type="button" value="-" /></td>
</tr>
<tr>
<td><input type="button" value="0" /></td>
<td><input type="button" value="." /></td>
<td><input type="button" value="==" /></td>
<td><input type="button" value="+" /></td>
</tr>
</table>
</div>
</body>
</html>