HTML&CSS&JS
[HTML5] <table> 태그로 계산기 모양 만들기
#Glacier
2020. 6. 22. 23:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<tr>
<td colspan="4"><input type = "text"></td>
</tr>
<tr>
<td><input type= "button" style="width:40px;" value="7"></td>
<td><input type="button" style="width:40px;" value="8"></td>
<td><input type="button" style="width:40px;" value="9"></td>
<td><input type="button" style="width:40px;" value="/"></td>
</tr>
<tr>
<td><input type="button" style="width:40px;" value="4"></td>
<td><input type="button" style="width:40px;" value="5"></td>
<td><input type="button" style="width:40px;" value="6"></td>
<td><input type="button" style="width:40px;" value="*"></td>
</tr>
<tr>
<td><input type="button" style="width:40px;" value="1"></td>
<td><input type="button" style="width:40px;" value="2"></td>
<td><input type="button" style="width:40px;" value="3"></td>
<td><input type="button" style="width:40px;" value="-"></td>
</tr>
<tr>
<td><input type="button" style="width:40px;" value="0"></td>
<td><input type="button" style="width:40px;" value="1"></td>
<td><input type="button" style="width:40px;" value="+"></td>
<td><input type="button" style="width:40px;" value="."></td>
</tr>
<tr>
<td colspan="2" align = "center"><input type="button" style = "width : 80px;" value="="></td>
<td colspan="2" align = "center"><input type="button" style = "width : 80px;" value="Clear"></td>
</tr>
</table>
</body>
</html>
table 태그만으로 심플한 계산기를 만들어보았다.