一招惊艳所有人,HTML制作网页成绩表

您所在的位置:网站首页 考试分数表格图片 一招惊艳所有人,HTML制作网页成绩表

一招惊艳所有人,HTML制作网页成绩表

2024-06-24 15:22| 来源: 网络整理| 查看: 265

相信很多人听到要上学了都会发这个表情 相信很多人听到开学的消息,看着还没有完成的作业,不想写是不是照应上面的表情呢?估计没有人会记得上学期的期中成绩了吧,那么下面就怎么一招惊艳所有人,如何制作HTML网页成绩表。

文章目录 认识网页网页的插入HTML网页的插入的分类HTML的表格使用HTML表格方式如何正确写入height和width的值并修改(及合并表格)初始代码(原代码)进行优化的代码

认识网页

网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一页,是超文本标记语言格式。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站(网页的介绍)网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一“页”,是超文本标记语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

网页的插入

我在刚学HTML的时候感觉这是我最感兴趣的章节,所以我大概分享一下个人经验。 要想知道网页的插入就要先知道什么是网页的插入,它具体是干什么用的。 网页的插入也很多,比如图像,标签,表格等。 方式也很简单,就在菜单里就可以找到。

在这里插入图片描述 也可以通过一些快捷方式进行相应的打开使用。

HTML网页的插入的分类

在这里插入图片描述

HTML的表格

表格由 < table > 标签来定义。每个表格均有若干行(由 < tr > 标签定义),每行被分割为若干单元格(由 < td > 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格和边框属性 如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。. 使用边框属性来显示一个带有边框的表格。

表格的表头 表格的表头使用 < th > 标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本

表格中的空单元格 在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

使用HTML表格方式

定义和用法 < table > 标签定义 HTML 表格。 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

快捷键:Ctrl+Alt+T 不知道大家喜不喜欢快捷键呢?

如何正确写入height和width的值并修改(及合并表格)

在这里插入图片描述 在这里我选着的是行数为3,列数为7 标题我们拟一个“期中考试成绩表,然后“确定”。 结果就是这样:

在这里插入图片描述

我们首先要计算好每一个小格子的高和宽。我在这里的width为826,height为270 。

接下来我们把第一行的表格合并一下。(单元格,同上)

鼠标点击第一行方格到最后一个方格,如图:

在这里插入图片描述 接下来就是最枯燥的哈,就是一个一个在单元格中输入相对应的学科及分数。

温馨提示:我们在调表格的height和width的值一定要把实时视图给关掉,在这当中我个人认为以下方法好一些。

初始代码(原代码)

接下来让我们看看源代码吧:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 期中考试成绩表 期中考试表 好好学习,天天向上 语文 数学 英语 网页制作 access 网络 动画制作 90 83 46 82 77 46 56

让我们看看效果吧:

在这里插入图片描述 这是浏览器效果:

在这里插入图片描述

进行优化的代码 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 期中考试成绩表 > 期中考试表 好好学习,天天向上 语文 数学 英语 网页制作 access 网络 动画制作 90 83 46 82 77 46 56

这就是优化后的效果:

在这里插入图片描述 这是浏览器的效果:

在这里插入图片描述

如果哪里有疑问欢迎您的留言——————最后祝大家作业完成!



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3