码迷,mamicode.com
首页 > 编程语言 > 详细

用html语言写一个功课表

时间:2014-10-17 23:27:04      阅读:399      评论:0      收藏:0      [点我收藏+]

标签:html   功课表   

      今天在网上看了一个关于html的教程,主要是讲表格,看完之后觉得有必要上机试试,于是就写了下面的一段代码。

bubuko.com,布布扣

<!DOCTYPE html><!--貌似5.0的可以这样写,课本的声明老长老长了-->
<html>
<head>
	<title>功课表</title>
	<meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><!--由于乱码,所以就加了这个-->
</head>
	<body>
		<br /><br /><br /><br /><br /><br /><br /><!--垂直居中-->
		<table border="1px" bordercolor="black" cellspacing="0px" background="http://static.blog.csdn.net/skin/ink/images/head_bg.jpg" width="640px" heigth="248px" align="center">
		<!--每个单元格是80*30,但是课表的上午和下午中间有8像素的高度,所以就是 80*8  * 80*30+8-->
			<tr><!--第1行-->
				<th>项目</th>
				<th colspan="5" width="400px">上课</th>
				<th colspan="2" width="160px">休息</th>
			</tr><!--1-->
			<tr><!--2-->
			   <th>星期</th>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
				<th>星期六</th>
				<th>星期日</th>
			</tr><!--2-->
			<tr><!--3-->
				<td rowspan="4" height="120px">上午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
				<td rowspan="4" height="120px">休息</td>
			</tr><!--3-->
			<tr><!--4-->
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
			</tr><!--4-->
			<tr><!--5-->
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
			</tr><!--5-->
			<tr><!--6-->
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
			</tr><!--6--><tr height="8px"/>
			<tr><!--7-->
				<td rowspan="2" height="60px">下午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
				<td rowspan="2" height="60px">休息</td>
			</tr><!--7-->
			<tr><!--8-->
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
			</tr><!--8-->
		</table>
	</body>
</html>

用html语言写一个功课表

标签:html   功课表   

原文地址:http://blog.csdn.net/li_jun_09_05/article/details/40190401

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!