Html table、thead、tr、th、td 标签

时间：2025-02-26 10:04:14

Html table、thead、tr、th、td 标签

案例一

<!-- table 表格标签，配置表格使用、border="1" 添加表格框架 -->

<table border="1">

     <!-- thead 设置表头 -->

    <thead>

        <!-- tr 指定表行标签-->

        <tr>

            <!-- th 设置表头内容，默认加粗-->

            <th>表头1</th>

            <th>表头2</th>

        </tr>

    </thead>

    <!-- tbody 设置表内容 -->

    <tbody>

        <!-- tr 指定报表行标签-->

        <tr>

            <!-- td 指定表列标签-->

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <td>2</td>

            <td>2</td>

        </tr>

    </tbody>

</table>

案例二

<!-- table 表格标签，配置表格使用、border="1" 添加表格框架 -->

<table border="1">

    <!-- thead 设置表头 -->

    <thead>

    <!-- tr 指定表行标签-->

        <tr>

            <!-- th 设置表头内容，默认加粗-->

            <th>表头1</th>

            <th>表头2</th>

            <th>表头3</th>

        </tr>

    </thead>

    <!-- tbody 设置表内容 -->

    <tbody>

        <tr>

            <!-- rowspan="2" 纵向 列 合并两个表格空间，等号后面是拼接数-->

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

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <!-- rowspan="2" 横向 行 合并接两个表格空间，等号后面是拼接数-->

            <td colspan="2">1</td>

        </tr>

    </tbody>

</table>

效果：案例一

表头1 表头2
1 1
2 2

效果：案例二

表头1 表头2 表头3
1 1 1
1

相关文章