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

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 官网。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章