Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格的简单布局与制作
Blogger Information
Blog 65
fans 3
comment 4
visits 67787
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格的简单布局与制作
无耻的鱼
Original
836 people have browsed it

周日写了个仿QQ音乐播放器 地址如下：

仿QQ音乐

总结：

  • caption 表格头

  • border=1 align=center cellspacing=0 cellspadding=3   

  • 表格 边框为1 文本居中    表格间隙为0 填充为3

  • 表格合并

  • colspan rowspan 

  • 列的选择

  • <colgroup span="2" bgcolor="#daf1ec"></colgroup>

  • 设置前两列的颜色



实例
<!DOCTYPE html>
<html>
<head>
	<title>table</title>
<style type="text/css">
	.div1{
		width: 1000px;
		height: 600px;
		/*background-image: url(image/timg.jpg);		
		background-repeat: no-repeat;*/
		/*显示一张图片*/
		background: url(image/timg.jpg) no-repeat;
		background-size: 100% 100%;
	}
	.color{
		color:#fff;
	}
	table{
		border-radius: 3px;
		box-shadow: 0px 0px 30px #ccc;
		border:2px solid #ccc;
	}
</style>
</head>

<body>
<div class="div1">
	<table border="1px" align="center" cellspacing="0" cellpadding="10" bgcolor="#fff">
		<caption class="color"><h1>人员信息 </h1></caption>
		<colgroup span="2" bgcolor="#daf1ec"></colgroup>
		<colgroup span="1" bgcolor="#fff"></colgroup>
		<colgroup span="2" bgcolor="#daf1ec"></colgroup>

		<thead>
			<tr>
				<th colspan="5" bgcolor="#fff">人员信息</th>
				<th colspan="2" rowspan="2">修改<small><a href="http://www.php.cn" target="_blank">增</a></small></th>
			</tr>
			<tr bgcolor="#fff">
				<th>编号</th>
				<th>姓名</th>
				<th>照片</th>
				<th>年龄</th>
				<th>零花钱</th>
			</tr>
		</thead>

		<tbody align="center">
			<tr>
				<td>001</td>
				<td>小三</td>
				<td><img src="image/1.jpeg" width="30" alt="头像"></td>
				<td>05</td>
				<td><strong>一个亿</strong></td>
				<td>修改</td>
				<td><a href="">删除</a></td>

			</tr>
			<tr>
				<td>002</td>
				<td>小斯</td>
				<td><img src="image/2.jpeg" width="30" alt="头像"></td>
				<td>05</td>
				<td>没有</td>
				<td>修改</td>
				<td><em>删除</em></td>
			</tr>
		</tbody>

		<tfoot>			
		<tr>
			<td colspan="7"><p><strong>说明：</strong> 即日起，凡那啥啥，就那啥啥！！！</p></td>
		</tr>
		</tfoot>

	</table>
</div>

</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例

效果：

效果.png

手写：

1.jpg2.jpg3.jpg4.jpg




Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post