表格

最新推荐文章于 2023-02-08 14:08:50 发布

weixin_46370867

最新推荐文章于 2023-02-08 14:08:50 发布

阅读量1.1k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_46370867/article/details/108176525

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表格

一、什么是表格

表格是一组由行和列组成的结构化数据集，可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系

行：水平方向上的一组数据，一般为某个主题的各种数据内容
列：垂直方向上的一组数据，一般为某一项数据
单元格：表格中的显示某一项数据的方块

二、什么是表格元素

元素：表示一个表格，作为表格的容器。

元素：表示一个表格中的行。元素：表示一个表格中的单元格。

三、表格的基本结构

1、

元素：表示HTML页面中的一个表格，作为表格的容器。

2、元素：表示HTML页面中一个表格的行。一个表格可以拥有一行或多行。

3、元素：表示HTML页面中的一个表格中一行的单元格。一行可以拥有一个单元格或多个单元格。

四、标题单元格

HTML 元素用来定义一组单元格的标题。该元素的用法与元素保持一致，定义在元素中。

元素的scope属性用来定义与该标题单元格相关联的单元格，是一个枚举类型

row：表示当前标题单元格关联一行中的所有单元格。
col：表示当前标题单元格关联一列中的所有单元格。
rowgroup：表示当前标题单元格属于某一个行组并与其中所有单元格相关联
colgroup：表示当前标题单元格属于某一个列组并与其中所有单元格相关联。
auto：由浏览器自动分配。

注意：即使一个单元格中没有任何内容，元素或 元素仍然需要定义，来表示一个空单元格的存在。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本表格（标题）</title>
</head>
<body>
    <table>
        <!-- row：表示当前标题单元格关联一行中的所有单元格 -->
        <!-- col：表示当前标题单元格关联一列中的所有单元格。 -->
        <tr>
            <!-- 姓名 与 姓名的一列关联，所以用"col" -->
            <th scope="col">姓名</th> 
            <th scope="col">学号</th>
            <th scope="col">性别</th>
            <th scope="col">年龄</th>
        </tr>

        <tr>
            <!-- 与张三这个学生的信息关联，张三的信息在一行，用"row"关联 -->
            <th scope="row">张三</th>
            <td>191111</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <th scope="row">李四</th>
            <td>192222</td>
            <td>男</td>
            <td>17</td>
        </tr>
        <tr>
            <th scope="row">王五</th>
            <td>193333</td>
            <td>男</td>
            <td>19</td>
        </tr>
    </table>
</body>
</html>

五、表格的标题

HTML 的元素用来定义 HTML 页面中表格的标题。该元素一般作为

元素的第一个子级元素出现，同时会显示在表格内容中的最前面，并且会在水平方向居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的标题</title>
</head>
<body>
    <table>
        <!-- 表格的标题 -->
        <caption>学生信息表</caption>
        <tr>
            <!-- 姓名 与 填写姓名的一列关联，所以用"col" -->
            <th scope="col">姓名</th> 
            <th scope="col">学号</th>
            <th scope="col">性别</th>
            <th scope="col">年龄</th>
        </tr>

        <tr>
            <!-- 与张三这个学生的信息关联，张三的信息在一行，用"row"关联 -->
            <th scope="row">张三</th>
            <td>191111</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <th scope="row">李四</th>
            <td>192222</td>
            <td>男</td>
            <td>17</td>
        </tr>
        <tr>
            <th scope="row">王五</th>
            <td>193333</td>
            <td>男</td>
            <td>19</td>
        </tr>
    </table>
</body>
</html>

weixin_46370867

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
表格

表格一、什么是表格表格是一组由行和列组成的结构化数据集，可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系行：水平方向上的一组数据，一般为某个主题的各种数据内容列：垂直方向上的一组数据，一般为某一项数据单元格：表格中的显示某一项数据的方块二、什么是表格元素元素：表示一个表格，作为表格的容器。元素：表示一个表格中的行。元素：表示一个表格中的单元格。三、表格的基本结构1、元素：表示HTML页面中的一个表格，作为表格的容器。2、元素：表示HTML页面中一个表格的
复制链接

扫一扫