Community Learn Tools Library Leisure
search
English
Home > List of blog posts > table仿QQ音乐
Blogger Information
Blog 65
fans 3
comment 4
visits 67728
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
table仿QQ音乐
无耻的鱼
Original
976 people have browsed it
border=1
cellspacing=0
cellpadding=1  内填充（呼吸）
colspan 列合并
rowspan 行合并
span 设置列的颜色

其他实际的看我的代码

效果图：

table仿QQ音乐.png


代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="张建武设计table格式的QQ音乐">
	<meta name="description" content="张建武设计table格式的QQ音乐">

	<title>table表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="4" bgcolor="#ecf1f3" align="center"> 
	<caption><h1>table-仿qq音乐</h1></caption>
	<thead>
		<tr>
			<!-- 左边侧边栏 -->
			<th colspan="4" >QQ音乐播放器</th>
			<!-- 主体 -->
			<th colspan="6">搜索  <input type="text" name="" style="border-radius: 3px"></th>
			<th colspan="2">
				<a href="">信息</a>
				<a href="">设置</a>
				<a href="">外观</a>
				
			</th>
			<th colspan="1">VIP</th>
			<th><a href="">X</a></th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td colspan="4" rowspan="3" >
				<img src="image/modie (2).png" width="150" alt="播放图标" align="center">
				<p align="center">
					<a href="">
						<strong>登录</strong>
					</a>
				</p>
			</td>
			<td colspan="10" rowspan="2">
				<img src="image/1.jpeg" width="100" style="display: inline-block; float: left;">
				<p>
				<h3 style="text-indent: 2em">  弓长剑舞</h3>
				<strong>  音乐口味：流行、重金属、欧美电子</strong><br>
				<strong>粉丝：0 /关注：12 / 好友：23</strong></p>
			</td>
		</tr>
		<tr>
			
		</tr>
		<tr bgcolor="#fff">
			<td colspan="2">我喜欢</td>
			<td colspan="2">创建的歌单</td>
			<td colspan="6">上传视频</td>
		</tr>
		<tr>
			<td colspan="4" >音乐馆</td>
			<td colspan="3" bgcolor="#fff">播放全部</td>
			<td colspan="3" bgcolor="#fff">下载</td>
			<td colspan="3" bgcolor="#fff">搜索</td>
			<td bgcolor="#fff">排序</td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3"><strong>在线音乐</strong></td>
			<td colspan="3">歌曲</td>
			<td colspan="3">歌手</td>
			<td colspan="3">专辑</td>
			<td><a href="">删除</a></td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3"><strong>个性电台</strong></td>
			<td colspan="3">空空如也</td>
			<td colspan="3">胡66</td>
			<td colspan="3">空空如也</td>
			<td><a href="">删除</a></td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3">我的音乐</td>
			<td colspan="3">林中鸟</td>
			<td colspan="3">葛林</td>
			<td colspan="3">林中鸟</td>
			<td><a href="">删除</a></td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3"><strong>我的歌单</strong></td>
			<td colspan="3">空城</td>
			<td colspan="3">杨坤</td>
			<td colspan="3">空城</td>
			<td><a href="">删除</a></td>
		</tr>
	</tbody>

	<tfoot bgcolor="#fff">
		<tr>
			<td colspan="4" rowspan="2" bgcolor="#fff">
				<p align="center">
					<a href="#"><img src="image/3.png" width="30" alt="图标"></a>
					<a href="#"><img src="image/5.png" width="50" alt="图标"></a>
					<a href="#"><img src="image/2.png" width="30" alt="图标"></a>
				</p>
			</td>
			<td colspan="2" rowspan="2" bgcolor="#fff" align="center">
				<img src="image/6.png" cellpadding="0" width="50">
			</td>
			<td rowspan="2" colspan="6">				
				<p>
					<h5>林中鸟<small>葛林</small></h5> 
					<hr>
				</p>
			</td>
			<td colspan="2" rowspan="2" align="center"><a href="#"><img src="image/4.png" width="50" alt="图标"></a></td>
		</tr>
		<tr>
		</tr>
	</tfoot>
</table>
</body>
</html>






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