相信很多人听到开学的消息,看着还没有完成的作业,不想写是不是照应上面的表情呢?估计没有人会记得上学期的期中成绩了吧,那么下面就怎么一招惊艳所有人,如何制作HTML网页成绩表。
认识网页
网页是一个包含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>
这就是优化后的效果:
这是浏览器的效果:
如果哪里有疑问欢迎您的留言——————最后祝大家作业完成!