border=1 cellspacing=0 cellpadding=1 内填充（呼吸） colspan 列合并 rowspan 行合并 span 设置列的颜色 其他实际的看我的代码
效果图：
代码如下：
<!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>
