html:
    （1）

    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <!-- <link rel="stylesheet" href="../css/reset.css"> -->
    8.     <link rel="stylesheet" href="../css/98表格的样式.css">
    10. </head>
    11. <body>
    12.     <div class="box1">
    13.         <div class="box2"></div>
    14.     </div>
    16.     <table class="collapse">
    17.         <tr>
    18.             <td>姓名</td>
    19.             <td>性别</td>
    20.             <td>年龄</td>
    21.             <td>户口</td>
    22.         </tr>
    24.         <tr>
    25.             <td>孙悟空</td>
    26.             <td>男</td>
    27.             <td>500</td>
    28.             <td>花果山</td>
    29.         </tr>
    31.         <tr>
    32.             <td>猪八戒</td>
    33.             <td>男</td>
    34.             <td>150</td>
    35.             <td>高老庄</td>
    36.         </tr>
    38.         <tr>
    39.             <td>沙僧</td>
    40.             <td>男</td>
    41.             <td>100</td>
    42.             <td>流沙河</td>
    43.         </tr>
    45.         <tr>
    46.             <td>姓名</td>
    47.             <td>性别</td>
    48.             <td>年龄</td>
    49.             <td>户口</td>
    50.         </tr>
    52.         <tr>
    53.             <td>孙悟空</td>
    54.             <td>男</td>
    55.             <td>500</td>
    56.             <td>花果山</td>
    57.         </tr>
    59.         <tr>
    60.             <td>猪八戒</td>
    61.             <td>男</td>
    62.             <td>150</td>
    63.             <td>高老庄</td>
    64.         </tr>
    66.         <tr>
    67.             <td>沙僧</td>
    68.             <td>男</td>
    69.             <td>100</td>
    70.             <td>流沙河</td>
    71.         </tr>
    73.         <tr>
    74.             <td>姓名</td>
    75.             <td>性别</td>
    76.             <td>年龄</td>
    77.             <td>户口</td>
    78.         </tr>
    80.         <tr>
    81.             <td>孙悟空</td>
    82.             <td>男</td>
    83.             <td>500</td>
    84.             <td>花果山</td>
    85.         </tr>
    87.         <tr>
    88.             <td>猪八戒</td>
    89.             <td>男</td>
    90.             <td>150</td>
    91.             <td>高老庄</td>
    92.         </tr>
    94.         <tr>
    95.             <td>沙僧</td>
    96.             <td>男</td>
    97.             <td>100</td>
    98.             <td>流沙河</td>
    99.         </tr>
    100.     </table>
    101. </body>
    102. </html>

    css:
    （1）在table的css属性设置中，设置border-collapse: collapse;可以使得两个border边框合并
    （2)当两个父子类同时出现时，将父类块元素设置为table-cell,则会可此时可以在父类中设置子块的垂直方位，
    vertcal-align: middle; ,在子块中使用 margin: 0 auto;设置水平居中

    .box1 {
    width: 300px;
    height: 300px;
    background-color: pink;
    display: table-cell;
    vertical-align: middle;

}

.box2 {
    width: 100px;
    height: 100px;
    background-color: saddlebrown;
    margin: 0 auto;
    /* vertical-align: middle; */
}   

table {
    border: 1px solid black;
    margin: 100px auto;
}

/* tr {
    border: 1px solid black;
} */

td {
    border: 1px solid black;
    height: 100px;
    vertical-align: middle;
    text-align: center;
}

table tbody tr:nth-child(odd) {
    color: rgba(15,244,0,0.3);
}

.collapse {
    border-collapse: collapse;
}

    image.png