HTML代码在日常生活中有许多有趣的应用,今天w3cschool小编教大家使用HTML中的table标签,来制作一个简易的计算器外观,注意这里只是外观并不具备计算器功能。
设计思路:增加表格外部边框于单元格之间的间距,为了使成品更像计算器,需要将单元格的宽高设定为相同数值,并填充一些颜色。
成品预览:
HTML用table标签写计算器代码如下:
<html>
<head>
<meta charset="UTF-8">
<title>用table写计算器 - 编程狮(w3cschool.cn)</title>
</head>
<body>
<p></p>
<table border="10" cellspacing="10" cellpadding="10" align="center">
<tr style="background-color: darkgrey;">
<th colspan="4" align="right">0</th>
</tr>
<tr align="center">
<td style="width: 30px; background-color:#eee">M</td>
<td style="width: 30px; background-color:#eee">M+</td>
<td style="width: 30px; background-color:#eee">C</td>
<td style="width: 30px; background-color:#eee">+</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td style="background-color:#eee;">-</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td style="background-color:#eee;">x</td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td style="background-color:#eee;">/</td>
</tr>
<tr align="center">
<td>0</td>
<td style="background-color:#eee;">.</td>
<td style="background-color:#eee;">+/-</td>
<td style="background-color:#eee;">=</td>
</tr>
</table>
</body>
</html>
以上就是今天w3cschool小编为大家带来的,HTML怎么用table写计算器的全部内容了,更多编程的学习请关注 W3Cschool 官网。