一款表格

2015/12/07 44930

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!--
        一款素雅的表格.html
        
        Copyright 2011 杨俊业 <ggiiss@qq.com>
        功能：
        1.练习表格（table）标签，着重于col和colgrounp属性的练习；
        2.表格和css的联合使用；
        疑问：
        1.td标签的height属性支持的浏览器有哪些，可不可以再css样式表中用padding代替；
        2.颜色的选取，选取好的颜色能达到很好的艺术效果；

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>素雅的表格</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
	td{font-size:12px;color:#666699;text-align:center;}
	
	.odd{background-color:#EFF2FF;width:100px;}
	.even{background-color:#E8EDFF;width:80px;}
	
	th.head1,.head2{font-size:14px;color:#003399;font-weight:normal;}
	th.head1{background:#dce4ff;}
	th.head2{background:#d0dafd;}
	</style>
</head>

<body>
<h1>表格练习——分组</h1>
<hr />
<table border="0" cellspacing="0">
<colgroup>
<col class="odd" />
<col class="even" />
<col class="odd" />
<col class="even" />
</colgroup>
	<tr>
		<th height="30px"class="head1">科幻</th>
		<th class="head2">恐怖</th>
		<th class="head1">邪典</th>
		<th class="head2">爱情</th>
	</tr>
	<tr>
		<td height="30px">盗梦空间</td><td>电据惊魂</td><td>美梦之安魂曲</td><td>怦然心动</td>
	</tr>
	<tr>
		<td height="30px">阿凡达</td><td>闪灵</td><td>猜火车</td><td>初恋这件小事</td>
	</tr>
	<tr>
		<td height="30px">瓦力</td><td>孤儿</td><td>买凶拍人</td><td>想爱就爱</td>
	</tr>
	<tr>
		<td height="30px">钢铁苍穹</td><td>万能钥匙</td><td>维多利亚一号</td><td>志明和春娇</td>
	</tr>
</table>	
</body>
</html>