HTML表格结构标签

最新推荐文章于 2024-07-12 00:07:26 发布

CodeDoraemon

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量232

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_40417070/article/details/113078723

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

表格结构标签

使用的场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两个部分;
** 表格的头部区域

表格的主体区域** 可以更好的分清表格结构,使得语义更加的明确 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210124121145912.png) # 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <table>
        <thead><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr></thead>
        <!-- 表格的头部区域 -->

        <tbody>
            <!-- 表格的主体区域 -->
            <tr><td>赵</td> <td>男</td>   <td> 66 </td></tr>
            <tr><td>王</td> <td>男</td>   <td> 64 </td></tr>
            <tr><td>李</td> <td>女</td>   <td> 28 </td></tr>
            <tr><td>刘</td> <td>男</td>   <td> 20 </td></tr>    
        </tbody>

    </table>
    <!-- 此为表格的基本语法，使得显示的十分清晰 -->
    <!-- 表格是嵌套关系 -->
    <!-- 用来展示数据 -->


    <!-- table 表示这是一个表格 -->
    <!-- tr 表示这是一行 -->
    <!-- td 表示每一行中的每一个元素 -->
</body>
</html>

运行结果

在这里插入图片描述

CodeDoraemon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格结构标签

表格结构标签使用的场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两个部分;** 表格的头部区域表格的主体区域**可以更好的分清表格结构,使得语义更加的明确![在这里插入图片描述](https://img-blog.csdnimg.cn/20210124121145912.png)# 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫

专栏目录