初级前端的自我救赎【HTML+CSS篇】：2.表格元素及相关标签属性

努力更加努力

于 2021-09-26 17:42:15 发布

阅读量137

点赞数

文章标签： html html5 css

本文链接：https://blog.youkuaiyun.com/weixin_44088319/article/details/120493745

版权

表格元素：表格主要用来展示数据
表格元素的容器使用table标签
其他表格元素的标签：thead,tbody,th,tr,td等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表格元素的容器是table -->
    <table border="1">
        <!-- 表头:thead -->
        <thead>
            <th>班级</th>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </thead>
        <!-- 表体 -->
        <tbody>
            <!-- tr标签是行 -->
            <!-- colspan 占多少列 -->
            <!-- rowspan占多少行 -->
            <tr>
                <td colspan="4">学生列表</td>
            </tr>
            <tr>
                <td rowspan="3">1班</td>
                <td>1</td>
                <td>小红</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小亮</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>
</body>
</html>