Web开发及人机交互导论 实验六 表格
Posted 上山打老虎D
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发及人机交互导论 实验六 表格相关的知识，希望对你有一定的参考价值。
一、实验目的
- 掌握制作表格的各种标记及其属性语法。
- 掌握表格行标记的属性及设置方法。
- 掌握表格单元格的各种属性及设置方法。
- 学会利用表格进行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>
以上是关于Web开发及人机交互导论 实验六 表格的主要内容，如果未能解决你的问题，请参考以下文章