App下載

HTML怎么用table寫計(jì)算器？ 怎么用HTML代碼制作計(jì)算器？

猿友 2021-03-09 14:37:30 瀏覽數(shù) (6569)
反饋

HTML代碼在日常生活中有許多有趣的應(yīng)用，今天w3cschool小編教大家使用HTML中的table標(biāo)簽，來(lái)制作一個(gè)簡(jiǎn)易的計(jì)算器外觀，注意這里只是外觀并不具備計(jì)算器功能。

設(shè)計(jì)思路：增加表格外部邊框于單元格之間的間距，為了使成品更像計(jì)算器，需要將單元格的寬高設(shè)定為相同數(shù)值，并填充一些顏色。

成品預(yù)覽：

HTML用table做計(jì)算器

HTML用table標(biāo)簽寫計(jì)算器代碼如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title>用table寫計(jì)算器 - 編程獅(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小編為大家?guī)?lái)的，HTML怎么用table寫計(jì)算器的全部?jī)?nèi)容了，更多編程的學(xué)習(xí)請(qǐng)關(guān)注 W3Cschool 官網(wǎng)。


HTML

2 人點(diǎn)贊