整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5的表格使用方法

喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

志同道合的小伙伴跟我一起学习交流哦!

因为在的编辑中“<”和“>”中的内容都会被识别为代码,显示不出来内容,所以,在文本中会省略“<”和“>”,图片中的“<”和“>”不会省略。

第一阶段 01 HTML5

07表格

1 表格table(会使用)

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

2 表格的注意事项

1 tr和 /tr中只能嵌套td和/td标签

2 td和/td标签,他就像一个容器,可以容纳所有的元素

3 表格属性

使用方法:

4 表头标签

只需用表头标记th和/th替代相应的单元格标记td和/td即可。

显示效果为加粗和居中。

5 表格结构(了解)

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:

1 thead和/ thead:用于定义表格的头部。

2 必须位于table和/ table标签中,一般包含网页的logo和导航等头部信息

3 tbody和/ tbody:用于定义表格的主体。

4 位于

标签中,一般包含网页中除头部和底部之外的其他内容。

6 浏览器审查HTML标签元素

浏览器页面按F12打开

左边显示为HTML,右边显示为CSS(后面会学到)

7 表格标题标签

表格的标题:caption

caption元素定义表格标题。

caption标签必须紧随table标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

8 合并单元格

跨行合并:rowspan

跨列合并:colspan

“2”表示合并两个单元格,数值是多少就合并多少个单元格。

看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。

本章已结束,下篇文章将分享《08 表单和表单控件》小伙伴们不要错过哟!上述内容是作者本人的学习笔记,需要原视频学习资料可以在公众号回复关键词“前端资料”

页编程之表格样式。

同学们好,我是一名免费的少儿编程老师。今天我要分享的内容是以列为单位设置表格样式。在插入表格课程中,我已经讲解了HTML中没有单独的列标签,列是由对应的单元格组成的行形成的。虽然如此,但列这个概念仍然是存在的。

让我们来看一下今天的示例效果。这个网页上有一个3行3列的表格,其中3列分别是姓名、科目和分数,而3行分别是表头行、字体加粗的内容和两行。第一列和第二列的背景颜色是绿色,第三列的背景颜色是灰色。在一列中,每一个单元格的样式都是统一的。

接下来,让我们看看实现的代码。以列为单位设置表格样式,实际上是通过这两个标签来实现的,分别是colgroup和col。colgroup翻译过来就是“列”的意思,而colgroup则是“列主”的意思。

首先,让我们来看看colgroup标签。这个标签是一个无属性的围堵标签,它的作用只有一个,即声明这个标签内包含的是本表格列的样式。通过这个标签,我们可以向整个列应用样式,而不需要为每一个单元格或每一行设置样式。

这个标签必须在table标签内,如果有caption标签,则必须在thead标签之前使用。如果不明白各标签的先后顺序,可以看看上节课的内容。colgroup标签仅仅是声明,具体的样式是要使用col标签来实现的。col标签的数量应该与TDTH的标签数量一致,一一对应地设置。第1行的col标签对应第1列的样式,第2行的col标签对应第2列的样式,以此类推。

有些同学会问,老师,你这里的表格有三列,但是你只写了两个col标签,这时候就要讲到col标签在HTML5中的两个常用属性,一个是col属性,说明了这一行的col标签的样式可以跨几列。

例如,在这里将第一行的col标签的Span属性设置为2,这就意味着这个样式在当前位置跨了两列。换句话说,让第一列和第二列使用了同一个样式。

第二个属性是它的style标签。这个style标签的内容是CSS的一段代码,通过这个属性我们可以为列添加各种效果。严格来说,style并不是卡标签的一个专用属性,而是HTML的全局属性之一。所谓的全局属性就是只要是HTML标签都自带这一个属性。对于各位同学来说,这是一个新概念,你们只需要记住就可以了。通过使用colgroup标签和col标签的配合,我们不仅能够灵活快速地为表格添加样式,进行美化,还能大幅减少代码量,提高页面加载速度。

以上就是今天的分享,希望各位同学能够牢记在心,并在下一次练习中做到不看视频也能够写出代码。如果需要获取相关案例和文档,可以向我提问。我们下期再见。如果你对网页编程、服务端编程、数据库、算法等感兴趣,欢迎点赞、关注!

建立一个新网站时,有一个良好的前端开发基础很重要。

本文将解释什么是HTML5,以及如何创建一个项目中使用的HTML5基本模板。

下面我们来看一下最基本的HTML5代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
		文档内容......
</body>
 
</html>

注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。

HTML 中的 doctype 是什么

HTML 代码中的第一行应该是 doctype 声明。doctype 告诉浏览器页面是用什么版本的 HTML 编写的。

<!DOCTYPE html>

什么是 HTML 根元素

<html> 标签是 HTML 文件最顶层的元素。你需要把 <head> <body> 标签嵌套在它里面。

HTML 里的 head 标签

head 元素是所有头部元素的容器。位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息,等等。

下面是可用在 head 部分的标签:

<base>
<link>
<meta>
<script>
<style>
<title>

什么是 UTF-8 字符编码?

UTF-8 是网页中使用的标准字符编码。这通常是元素中显示的第一个标记。<head><meta charset="utf-8">

根据万维网联盟的说法:

基于 Unicode 的编码(如 UTF-8)可以支持多种语言,并且可以容纳这些语言的任何混合的页面和表单。它的使用还消除了服务器端逻辑的需要,即单独确定所服务的每个页面或每个传入表单提交的字符编码。

什么是 HTML 标题标签?

标记是网页的标题。此文本显示在浏览器的标题栏中。<title>

<title>文档标题</title>

什么是 HTML 文档主体元素标签?

<body> 标签定义文档的主体。

HTML 文档的元数据和文档信息包装在 head 元素中,文档的内容则包装在 body 元素中。

body 元素总是紧跟在 head 元素之后,它是 html 元素的第二个子元素。

<body> 元素包含 HTML 文档的所有内容,例如标题、段落、图像、超链接、表格、列表等。

注意:一个 HTML 文档中只能有一个 <body> 元素


因此:HTML 5 样板添加到每个 HTML 页面。此起始代码包含重要信息,如文档类型、元数据、外部样式表和脚本标签。