HTML中的表格-CSDN博客

本文链接：https://blog.csdn.net/yunanxxx/article/details/128311923

<body>

    <!-- 表格标签 table -->



    <!-- 表格的属性

        border是边框，属性值为一个数字，3像素（px）

        cellpadding是表格中的数字与最近的边框之间的距离，间隔。调整数据观察数字4  （padding：填充物）

        cellspacing是填充物与最外层边框的距离

    -->

    <table border="3" cellpadding="6" cellspacing="10">

        <thead><!--表格的头-->

            <!-- tr代表行，每个tr中的td个数一定要相同 -->

            <tr>

                <!-- th用于加粗表格中的文字 -->

                <th>姓名</td>

                <th>性别</td>

                <th>民族</td>

            </tr>

        </thead>

        <tbody><!--表格的身体-->

                <tr >

                    <!-- td代表列，必须放在tr中 -->

                    <td>1</td>

                    <td>2</td>

                    <td>3</td>

                </tr>

        <!-- style="text-align: center;使表格中的文字居中 -->

        <tr style="text-align: center;">

            <!-- td代表列，必须放在tr中 -->

            <td colspan="3">合并单元格，合并列</td>

        </tr>

        <tr>

            <!-- td代表列，必须放在tr中 -->

            <td>4</td>

            <td>5</td>

            <td>6</td>

        </tr>

    </tbody>

    <tfoot><!--表格的脚-->

        <tr>

            <!-- td代表列，必须放在tr中 -->

            <td>7</td>

            <td>8</td>

            <td>9</td>

        </tr>

        <tr ><!-- rowspan合并行 -->

            <td rowspan="2">7</td>

            <!-- 合并下一个tr中的第一个td，和下一行共用第一个td -->

            <td>8</td>

            <td>9</td>

        </tr>

        <tr ><!-- rowspan合并行 -->

            <!-- 删除和上一行共用的单元格 -->

            <td>8</td>

            <td>9</td>

        </tr>

    </tfoot>  

       

    </table>

</body>

效果图：