这篇博客介绍了如何使用HTML创建一个期中考试成绩表，包括表格的基本结构、单元格的合并以及样式优化。通过实例展示了HTML的<table>标签、<caption>、<th>、<td>等元素的使用，并提供了源代码和优化后的代码展示。
相信很多人听到开学的消息，看着还没有完成的作业，不想写是不是照应上面的表情呢？估计没有人会记得上学期的期中成绩了吧，那么下面就怎么一招惊艳所有人，如何制作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>
这就是优化后的效果：
这是浏览器的效果：
如果哪里有疑问欢迎您的留言——————最后祝大家作业完成！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
