大佬们,为什么我设置html表格的单元格外边距无效啊！

我想做的效果

我的代码

<html>

<head>

<title>Document</title>

<style>

body {

border: 3px solid blue;

border-top: 1px solid #000;

width: 1200px;

}

.beijing {

background-color: #c0e4a4;

width: 900px;

height: 630px;

margin-left: 100px;

margin-bottom: 20px;

}

.beijing p {

font-size: 20px;

background: white;

width: 68px;

}

.beijing .baiseifangkuang {

width: 800px;

height: 70px;

margin: auto 52px;

background-color: #fff;

}

table {

border: 2px solid black;

width: 800px;

height: 500px;

margin: 5px 52px auto 52px;

}

td {

border: 1px solid blue;

width: 15px;

height: 5px;

text-align: center;

margin: 80px;

}

td {

margin: 80px;

}

</style>

</head>

<body>

<p>CASIO</p>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

得到的图像

<style>
    .beijing{
        width: 50%;
        background-color: bisque;
        padding:2%;
        border: 3px solid red;
    }
    .beijing p label{
        color: #0004f0;
        font-weight: 600;
        font-family: 'Times New Roman', Times, serif;
        font-size: 40px;
        background-color: rgb(255, 255, 255);
        width: 100px;
    }
    .beijing table{
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }
    tr td{
        border: 1px solid red;
        padding: 20px 0;
        width: 25%;
        
    } 
    .beijing .baiseifangkuang{
        width: 100%;
        background-color: #ffffff;
        height: 40px;
    }
</style>

表格不是本来就这样的吗？？

每个td里面用一个div或者span之类的，隐藏td的边框，使用div或span的边框

参考这个

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>
        body {
            border: 3px solid blue;

            border-top: 1px solid #000;

            width: 1200px;

        }

        .beijing {
            background-color: #c0e4a4;

            width: 900px;

            height: 630px;

            margin-left: 100px;

            margin-bottom: 20px;

        }

        .beijing p {
            font-size: 20px;

            background: white;

            width: 68px;

        }

        .beijing .baiseifangkuang {
            width: 800px;

            height: 70px;

            margin: auto 52px;

            background-color: #fff;

        }

        table {
            border: 2px solid black;

            width: 800px;

            height: 500px;

            margin: 5px 52px auto 52px;

        }

        td {
            /* border: 1px solid blue; */

            /* width: 15px;

            height: 5px; */

            text-align: center;

            /* margin: 80px; */
            width: 25%;


        }

        /* td {
            margin: 80px;

        /* } */
        .btn {
          
            text-align: center;
            border: 1px solid;
            height: 124px;
            line-height: 124px;
            margin: 30px;
        }
    </style>

</head>

<body>

    <div class="beijing">

        <p>CASIO</p>

        <div class="baiseifangkuang"></div>

        <table>

            <tr>

                <td>
                    <div class="btn">1</div>
                </td>

                <td> <div class="btn">2</div></td>

                <td> <div class="btn">3</div></td>

                <td> <div class="btn">+</div></td>

            </tr>

            <tr>

                <td> <div class="btn">4</div></td>

                <td>5</td>

                <td>6</td>

                <td>-</td>

            </tr>

            <tr>

                <td>7</td>

                <td>8</td>

                <td>9</td>

                <td>*</td>

            </tr>

            <tr>

                <td>0</td>

                <td>=</td>

                <td>CE</td>

                <td>/</td>

            </tr>

        </table>

    </div>

</body>

</html>

谢谢