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

猿友 2021-03-09 14:37:30 浏览数 (6568)
反馈

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

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

成品预览:

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


2 人点赞