内蒙古科技大学信息工程学院计算机系
网页colspan《网页设计与制作》实验报告
姓名
谢航宇
学号
1367159137
班级
计算机13级  班
实验日期
第 10 周（星期五 ） 11 月 6 日第 34 节
项目号、实验名称
实验4  表格应用和布局（一）
实
验
要
求
（任课
教
师
提
供）
实验目标：
1. 了解为什么使用表格、表格的基本结构、理解表格的基本语法
2. 掌握表格的跨行属性rowspan、跨列属性colspan
3. 掌握表格的分组标签<thead>、<tbody>、<tfoot>的配合用法
实验所需软件：
Ultra Edit
实验内容：
1. 练习——跨行跨列表格
需求说明：实现一个跨行跨列的商品类目表格，如图1.1所示。
图1.1 跨行跨列的商品分类表格
2. 练习——表格分组标签的使用
需求说明：实现一个按地点和时间汇总的年终报表，如图1.2所示。
图1.2 数据分组的表格
实
验
内
容
（由学
生
填
写）
练习一：
代码：
<hmtl>
<head>
<title>制作表格</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td colspan="3" >商品类目</td>
</tr>
<tr>
<td rowspan="3">虚拟</td>
<td>移动</td>
<td>联通</td>
</tr>
<tr>
<td>充值卡</td>
<td></td>
</tr>
<tr>
<td>梦幻</td>
<td>QQ</td>
</tr>
<tr>
<td rowspan="3">护肤</td>
<td>美容护肤</td>
<td>美体</td>
</tr>
<tr>
<td>彩妆</td>
<td>香水</td>
</tr>
<tr>
<td>个人护理</td>
<td>保健</td>
</tr>
</table>
</body>
</html>
网页：
练习二：
代码：
<html>
<head>
<title>制作年终表</title>
</head>
<body>
<body>
<table width="100%">
<caption>数据表</caption>
<thead >
<tr>
<th>地区</th> <th>1月</th> <th>2月</th> <th>3月</th> <th>小计（RMB）</th>
</tr>
<tbody >
<tr>
<td>北京</td> <td>10</td> <td>10</td> <td>50</td> <td>70</td>
</tr>
<tr>
<td>上海</td> <td>20</td> <td>30</td> <td>70</td> <td>120</td>
</tr>
<tr>
<td>天津</td> <td>30</td> <td>40</td> <td>80</td> <td>150</td>
</tr>
</tbody>
<tfoot >
<tr>
<td>总计(RMB)</td> <td>60</td> <td>80</td> <td>200</td> <td>240</td>
</tr>
</tfoot>
</thead>
</body>
</html>
网页：
实
验
成
绩
说明：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。