零基础HTML入门教程(14)——表格

最新推荐文章于 2023-10-21 11:38:05 发布

程序员大宁

最新推荐文章于 2023-10-21 11:38:05 发布

阅读量534

点赞数 1

分类专栏： HTML篇文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_61808806/article/details/128207305

版权

HTML篇专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本章目录

1.任务目标

我们生活处处离不开表格，我们比如说，成绩单，菜单，等。都是用表格做出来的，表格在我们生活中是必不可少的，生活处处离不开表格，所以我们这一小结学习一下表格的使用。

2.表格介绍

标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个、元素定义表格行，

或	元素组成表格结构；其中：
元素定义表头，	元素定义表格单元。为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解；

3.表格的标签

在HTML定义表格的时候，有以下标签供我们使用

表格标签

用处

table

定义表格，生成的表格在一对table/table中；

caption

定义表格标题，当表格需要标题时，使用caption表格标题caption

thead

定义表格的页眉

tbody

定义表格的主体

tfoot

定义表格的页脚

定义表格的表头，一般是表头中的内容会被加黑；

定义表格的行

定义表格单元格

col

定义用于表格列的属性

colgroup
11
单元格边框(border)

4.代码演示

<!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>
<!--可以用width=""设置表格的宽度，可以用height=""设置表格的高度-->
<body>
    <!--table是表格的标签，tr表格每行可包裹td，td是用于写每行表格内容，table > tr > td,border可以设置表格边框大小，如果没有border 表格将没有边框-->
    <table border="1">
        <caption> <b>学生成绩单</b></caption>
        <!--thead表示表格头部-->
        <thead>
            <!--th一般用于标签头部可以表示一列标题，他可以默认文字加粗-->
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
            <tr>
        </thead>
        <!--tbody表示表格内容-->
        <tbody>
            <td>张三</td>
            <td>男</td>
            <td>56</td>

            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>96</td>

            </tr>
            <tr>
                <td>赵五</td>
                <td>男</td>
                <td>97</td>
            </tr>
        </tbody>
        <!--tfoot表示表格结尾-->
        <tfoot>
            <tr>
                <td>总结</td>
                <td>成绩很满意都考得不错</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

效果如下
在这里插入图片描述

5.小结

我们生活中处处离不开表格，表格在我们日常生活或者再代码中非常受欢迎我么要熟练运用表格。

程序员大宁

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
零基础HTML入门教程(14)——表格

我们生活处处离不开表格，我们比如说，成绩单，菜单，等。都是用表格做出来的，表格在我们生活中是必不可少的，生活处处离不开表格，所以我们这一小结学习一下表格的使用。在HTML定义表格的时候，有以下标签供我们使用NO表格标签用处1table定义表格，生成的表格在一对table/table中；2caption定义表格标题，当表格需要标题时，使用caption表格标题caption3thead定义表格的页眉4tbody定义表格的主体5tfoot定义表格的页脚6th定义表格的表头，一般是表头中的内容会被加黑；7tr定义
复制链接

扫一扫

专栏目录