HTML怎么用table写计算器？ 怎么用HTML代码制作计算器？

2021-03-09 14:37:30 浏览数 (37)

HTML代码在日常生活中有许多有趣的应用，今天zijiebao小编教大家使用HTML中的table标签，来制作一个简易的计算器外观，注意这里只是外观并不具备计算器功能。

设计思路：增加表格外部边框于单元格之间的间距，为了使成品更像计算器，需要将单元格的宽高设定为相同数值，并填充一些颜色。

成品预览：

HTML用table做计算器

HTML用table标签写计算器代码如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title>用table写计算器 - 字节宝(zijiebao.com)</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>

以上就是今天zijiebao小编为大家带来的，HTML怎么用table写计算器的全部内容了，更多编程的学习请关注 W3Cschool 官网。


HTML

1 人点赞