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

相信很多人听到开学的消息，看着还没有完成的作业，不想写是不是照应上面的表情呢？估计没有人会记得上学期的期中成绩了吧，那么下面就怎么一招惊艳所有人，如何制作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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>期中考试成绩表</title>
</head><body>
<table width="826" height="270" border="1"><caption>期中考试表</caption><tr><td colspan="7"><div align="center">好好学习，天天向上</div></td></tr><tr><td width="118"><div align="center">语文</div></td><td width="118"><div align="center">数学</div></td><td width="118"><div align="center">英语</div></td><td width="118"><div align="center">网页制作</div></td><td width="118"><div align="center">access</div></td><td width="118"><div align="center">网络</div></td><td width="118"><div align="center">动画制作</div></td></tr><tr><td><div align="center">90</div></td><td><div align="center">83</div></td><td><div align="center">46</div></td><td><div align="center">82</div></td><td><div align="center">77</div></td><td><div align="center">46</div></td><td><div align="center">56</div></td></tr>
</table></body>
</html>

让我们看看效果吧：

这是浏览器效果：

进行优化的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>期中考试成绩表</title>
</head><body background="003950-164338799031d6.jpg"; style="background-repeat:no-repeat; background-size:100% 100%; background-attachment:fixed">
>
<table width="826" height="270" border="1"><caption>期中考试表</caption><tr style="color:#F00"><td colspan="7"><div align="center">好好学习，天天向上</div></td></tr><tr><td width="118"><div align="center">语文</div></td><td width="118"><div align="center">数学</div></td><td width="118" style="color:#F00"><div align="center">英语</div></td><td width="118"><div align="center">网页制作</div></td><td width="118"><div align="center">access</div></td><td width="118" style="color:#F00"><div align="center">网络</div></td><td width="118" style="color:#F00"><div align="center">动画制作</div></td></tr><tr><td><div align="center">90</div></td><td><div align="center">83</div></td><td><div align="center">46</div></td><td><div align="center">82</div></td><td><div align="center">77</div></td><td><div align="center">46</div></td><td><div align="center">56</div></td></tr>
</table></body>
</html>

这就是优化后的效果：

这是浏览器的效果：

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

一招惊艳所有人，HTML制作网页成绩表相关推荐

漫画 | 程序员职场屌丝逆袭，一举惊艳所有人！
曾经初入职场的我们都懵懵懂懂是"勤能补拙,天道酬勤"? 还是选择躺平呢? 如今再回首,内心有何感想? 带着这个回忆,一起来看看曾经初入职场的王大拿吧本期漫画情节纯属虚构如有 ...
打工人书单 | 我要悄悄读书然后惊艳所有人
生活里80%的痛苦来源于打工,但是我知道,如果不打工,就会有100%的痛苦来源于没钱,所以在打工和没钱之间,我选择打工. --<打工宣言> "打工人"火了. " ...
打工人，打工魂，打工都是人上人！愿你悄悄打工，然后惊艳所有人！
几乎是一夜之间,打工人火了,甚至还有不少商家把打工人这3个字注册成商标了,果然还是商家精明啊! 打工人一词,是打工.人,而不是打.工人,说白了,打工人和打工仔一个意思,是广大打工者的自嘲和调侃! 以下 ...
冰河常逛的23大学习网站，收藏后悄悄努力，然后惊艳所有人
大家好,我是冰河~~ 小伙伴们有木有这种感觉:假期还没怎么玩就已经过去了?好吧,其实,冰河也有这种感觉:假期还没开始就已经结束了.哎,我们还是把心收回来,好好工作吧! 国庆期间很多小伙伴问我:冰河,你 ...
用html制作学生成绩表格代码,利用Excel制作学生成绩表.doc
利用Excel制作学生成绩表利用Excel制作学生成绩表制作一个学生成绩自动统计表,可以自动统计最高分.最低分.总分.平均分.名次.三率等数据信息,还可以根据自定条件以不同的颜色显示分数.自动统计 ...
计算机应用技能实验报告实验五,实验五excel应用—制作学生成绩表
<实验五excel应用-制作学生成绩表>由会员分享,可在线阅读,更多相关<实验五excel应用-制作学生成绩表(7页珍藏版)>请在技术文库上搜索. 1.计算机基础技能训练 8次 ...
分享6款小众宝藏软件，悄悄成长，然后惊艳所有人
小伙伴们是否在这样的状态中挣扎?想提升自己却不知道从哪开始.别担心!今天小编来给大家分享6款超好用的宝藏软件,工作生活两不误,让自己悄悄成长!惊艳四座! 1. 有道云笔记这是一款多平台记录工具,让我 ...
html制作统计期末成绩,利用Excel制作学生成绩表
用Excel的VBA来制作精美学生成绩条. 解决问题的思路因为每个学生只有一个学号,所以学号是惟一的,根据学号惟一性这一特点,使用VBA里的判断语句,如果学号不同,就在两者之间插入一个空白行,然后再 ...
程序员小志偷偷用30招惊艳公司所有人，迎娶小师姐（第5招）
昨天,老板请全体员工聚餐,为的就是犒劳大家这段时间的辛苦加班!聚餐本来就是一件值得高兴的事情,但是就是因为测试经理老徐的一些话让老板都发脾气了,要不是小志的帮忙,我相信测试经理连年终奖都拿不到!老徐啊 ...