一、实验目的
- 掌握制作表格的各种标记及其属性语法。
- 掌握表格行标记的属性及设置方法。
- 掌握表格单元格的各种属性及设置方法。
- 学会利用表格进行Web页面布局设计,设计形式多样、风格各异的页面。
二、实验环境
Windows10系统下的H Builder X
三、实验步骤
项目一：制作成绩登记表
在本项目中，成绩表的功能主要是由表格进行完成，整个成绩表即为一个大的表格。下面进行编程实验。
1、首先创建页面的基本格式：
2、在head中定义表格需要的style样式，在这里对表格中文字对齐的方式以及表格的大小进行了定义，确保表格中的文字可以位置居中，表格大小美观。
3、使用<table>标签定义表格，并对表格中相关元素进行修饰，如大小及背景图片
4、对表格内容进行填充
①表格标题：
②前两行的表头：（此处要注意由于要合并单元格，可以使用rowspan和colspan标签来进行合并）
③进行学生成绩的录入，此处要注意，对成绩在60分以下（未及格）的学生的成绩进行标红色处理，可以用<font>标签进行颜色的设定。
④平均分（与②相同，也要用到colspan进行合并单元格）：
5、源代码及最终效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>董芸豪的项目一</title>
<style type="text/css">
tr{
width: 500px;
text-align: center;
vertical-align: middle;
height: 20px;
}
td{
font-weight: bold;
}
</style>
</head>
<body>
<table bordercolor="#000000" border="1" bgcolor="#99ff00"
background="tu201203092.jpg" align="center" width="600px"
height="300px" frame="border" rules="all" cellspacing="1"
cellpadding="2">
<caption>
<font face="黑体" size="5" color="#000000">
表一： 第一学期成绩表
</font>
</caption>
<tr align="center" valign="middle">
<th rowspan="2"><font color="blue">序号</font></th>
<th rowspan="2"><font color="blue">学号</font></th>
<th rowspan="2"><font color="blue">姓名</font></th>
<th colspan="5"><font color="blue">第一学期成绩</font></th>
</tr>
<tr>
<th><font color="blue">英语</font></th>
<th><font color="blue">高数</font></th>
<th><font color="blue">学科导论</font></th>
<th><font color="blue">就业</font></th>
<th><font color="blue">总分</font></th>
</tr>
<tr>
<th>1</th>
<th>1019200101</th>
<th>李大宇</th>
<th>75</th>
<th>76</th>
<th>76</th>
<th>90</th>
<th>395</th>
</tr>
<tr>
<th>2</th>
<th>1019200102</th>
<th>张子明</th>
<th>60</th>
<th><font color="red">45</font></th>
<th>66</th>
<th><font color="red">55</font></th>
<th>303</th>
</tr>
<tr>
<th>3</th>
<th>1019200103</th>
<th>胡大明</th>
<th><font color="red">55</font></th>
<th>68</th>
<th>64</th>
<th>80</th>
<th>343</th>
</tr>
<tr>
<th>4</th>
<th>1019200104</th>
<th>王不学</th>
<th><font color="red">34</font></th>
<th>87</th>
<th>76</th>
<th><font color="red">45</font></th>
<th>309</th>
</tr>
<tr>
<th>5</th>
<th>1019200105</th>
<th>徐知道</th>
<th>67</th>
<th>95</th>
<th>66</th>
<th>90</th>
<th>363</th>
</tr>
<tr>
<th colspan="3"><font color="blue">课程平均分</font></th>
<th><font color="red">58.2</font></th>
<th><font color="blue">74.2</font></th>
<th><font color="blue">69.6</font></th>
<th><font color="blue">72</font></th>
<th></th>
</tr>
</table>
</body>
</html>
项目二：制作产品宣传页面
在本项目中，产品宣传页面的功能主要是由表格进行完成，整个产品宣传页面即为一个大的表格。下面进行编程实验。
1、首先创建页面的基本格式：
2、在head中设置对应的CSS样式
3、插入表格，对整个页面分析可以得知，整个页面是由外部一个七行两列的外部表格和内部三个两列若干行的内层表格嵌套而成。
①先建立外层大表格
②第一行的表头：
插入图片，并选择两个不同的class设定介绍的第一二行
③小标题（使用colspan进行单元格合并，并选择对应的class进行样式修饰）：
④表格嵌套：
此处通过插入一个N行二列的表格对各个细节信息进行编辑，此处仅对一个进行展示，其余大同小异。
4、源代码及最终效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>董芸豪的项目二</title>
<style type="text/css">
.p1{
font-family: 黑体;
font-size: 20px;
color: #3333ff;
}
.p2{
font-family: 黑体;
font-size: 30px;
color: #3333ff;
}
.bt1{
color: #6600cc;
font-size: 25px;
font-family: 微软雅黑;
background-color: #999900;
}
</style>
</head>
<body>
<table bordercolor="#ffff00" border="1" align="center" bgcolor="#ffff66" width="650px" height="500px">
<tr>
<td>
<img src="notebook.jpg">
</td>
<td>
<font class="p1">产品名称： </font><br />
<font class="p2">惠普 4431s（QG641PA）</font>
</td>
</tr>
<tr>
<td colspan="2" class="bt1">
惠普 4431s（QG641PA） 基本参数
</td>
</tr>
<tr>
<td colspan="2">
<table frame="void">
<tr>
<td>
CPU主频：
</td>
<td>
2400.000
</td>
</tr>
<tr>
<td>
CPU系列：
</td>
<td>
英特尔 酷睿i5 2代系列（Sandy Bridge）
</td>
</tr>
<tr>
<td>
CPU型号：
</td>
<td>
Intel 酷睿i5 2430M
</td>
</tr>
<tr>
<td>
内 存：
</td>
<td>
DDR3 1333MHz 4GB，最大内存容量：16GB
</td>
</tr>
<tr>
<td>
硬 盘：
</td>
<td>
7200转，SATA， 750GB
</td>
</tr>
<tr>
<td>
光 驱：
</td>
<td>
光驱内置DVD刻录机
</td>
</tr>
<tr>
<td>
屏 幕：
</td>
<td>
14.000
</td>
</tr>
<tr>
<td>
显 卡：
</td>
<td>
1GB，GDDR5，AMD Radeon HD 6490M独立显卡
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="bt1">
惠普 4431s（QG641PA） 多媒体设备
</td>
</tr>
<tr>
<td colspan="2">
<table frame="void">
<tr>
<td>
摄 像 头：
</td>
<td>
集成摄像头
</td>
</tr>
<tr>
<td>
音频系统：
</td>
<td>
内置音效芯片纠错
</td>
</tr>
<tr>
<td>
多 媒 体:
</td>
<td>
内置扬声器、麦克风
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="bt1">
惠普 4431s（QG641PA） 网络通信及其它
</td>
</tr>
<tr>
<td colspan="2">
<table frame="void">
<tr>
<td>
无线网卡：
</td>
<td>
支持802.11b/g/n无线协议，Intel WiFi Link
</td>
</tr>
<tr>
<td>
有线网卡：
</td>
<td>
1000Mbps以太网卡
</td>
</tr>
<tr>
<td>
数据接口：
</td>
<td>
3×USB2.0+1×USB3.0
</td>
</tr>
<tr>
<td>
其它接口：
</td>
<td>
RJ45（网络接口），电源接口
</td>
</tr>
<tr>
<td>
指取设备：
</td>
<td>
触摸板
</td>
</tr>
<tr>
<td>
键盘描述：
</td>
<td>
全尺寸悬浮式防溅键盘
</td>
</tr>
<tr>
<td>
电池类型：
</td>
<td>
6芯锂电池
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
项目三：简化版“江苏教育电子政务网站”
在本项目中，简化版“江苏教育电子政务网站”的功能主要是由表格进行完成，整个政务网站即为一个大的表格。下面进行编程实验。
1、首先创建页面的基本格式：
2、在head中编写CSS的样式：
3、编写页面表格：
①编写表格：
②插入顶端图片：
③插入中间索引：
④插入左侧导航栏，此处仅用一个进行举例，其他大同小异：
⑤插入正文的文字说明：
⑥插入页脚版权信息：
4、源代码及最终效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>董芸豪的项目三</title>
<style type="text/css">
td{
color: white;
font-size: 20px;
}
tr{
text-align: center;
}
p{
text-indent: 2em;
font-size: 16px;
}
#nav{
text-align: center;
width: 120px;
}
a:link,a:hover,a:visited,a:active{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<table border="1" width="1002px" align="center" bgcolor="#666699">
<tr align="center">
<td colspan="3" height="80">
<img src="dzzw_banner_01.jpg"/>
</td>
</tr>
<tr >
<td colspan="3">
<a>新闻资讯</a>
<a>领导讲话</a>
<a>行政公文</a>
<a>成果展示</a>
<a>江苏教育网</a>
<a>江苏教育信息网</a>
</td>
</tr>
<tr>
<td>
新闻资讯
</td>
<td rowspan="4" width="330">
<p>7月26日下午，省政府办公厅举办省政府门户网站
内容保障表彰暨培训会。会上，省教育厅办公室和省人
社厅办公室被评为2011年度省政府门户网站内容保障工
作一等奖，省教育厅网站被评为“江苏省优秀政府网站”
，省教育厅电子政务中心崔璨同志被表彰为201...</p>
</td>
<td rowspan="4" width="400">
<p>年度江苏省教育信息化工作领导小组会议顺利
召开7月20日下午，江苏省教育厅召开了2012年度江苏省
教育信息化工作领导小组会议。省教育厅办公室、人事
处、发展规划处、财务处、基础教育处、职业教育处、
社会教育处、高等教育处、研究生教育处、师资处、社
会科学研究与思想政治教育处、科学技术与产业...</p>
</td>
</tr>
<tr>
<td>
行政公文
</td>
</tr>
<tr>
<td>
领导讲话
</td>
</tr>
<tr>
<td>
成果展示
</td>
</tr>
<tr>
<td colspan="3">Web前端开发工作室，版权信息</td>
</tr>
</table>
</body>
</html>
四、结果与分析
三个项目的实验都符合最终结果
- 项目一中通过跨行和跨列进行布局，使页面更简洁
- 项目二中不仅使用了跨行和跨列，也通过表格之间的嵌套来实现了内部页面的对齐，从而使页面更美观
- 项目三中不仅使用了跨行和跨列，也通过对表格宽度的规定来布局，从而使表格更美观。
五、心得体会
与前面几个页面相比，本次实验的三个项目都比较简单，但也是HTML学习中比较重要的部分——表格。通过本次实验，我掌握制作表格的各种标记及其属性语法，并且掌握表格行标记的属性及设置方法、掌握表格单元格的各种属性及设置方法也学会利用表格进行Web页面布局设计,设计形式多样、风格各异的页面，以及如何通过表格实现各种各样的HTML页面样式。
扫一扫
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
