行元素和块元素的display属性是不同的:display:block;(块)display:inline;(行)
两者可以转换，想让块元素以行来显示例子：ul {display：inline；}
以下练习会用到
练习一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{display: inline;}
ul li{list-style: none;display: inline;} /*行元素和块元素的display属性是不同的:display:block;(块)display:inline;(行)*/
</style>
<body>
<table border="1" bordercolor="#7ffcc" align="center">
<tr>
<td colspan="3">
<img src="img/fdf1e1eecbcfd96d-802f56c62cb41c07-7e37d902a74948c41364ba0d1ccccaee.jpg" width="800" height="200" />
</td>
</tr>
<tr>
<td>
<h3>我的站点<sup><img src="img/HBuilder.png" width="10"/></sup></h3>
</td>
<td colspan="2" align="right">
<u>在这选择你需要的频道</u>：
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">购物</a></li>
<li><a href="#">读书</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">友情链接<sub>（百度）</sub></a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ol>
<h4>所有商品</h4>
<li><a href="#">牛奶</a></li>
<li><a href="#">咖啡</a></li>
<li><a href="#">啤酒</a></li>
<li><del>茶(已经下架)</del></li>
</ol>
</td>
<td>
<dl>
<h4>各大知识体系列表</h4>
<dt>前端语言</dt>
<dd>html5</dd>
<dd>CSS3</dd>
<dd><font color="red">JavaScript</font></dd>
</dl>
<dl>
<dt>服务器端语言</dt>
<dd>note.js</dd>
<dd>Java</dd>
<dd>PHP</dd>
</dl>
</td>
<td>
<p><i>请扫描以下<em>'尚学堂'</em>二维码</i></p>
<img src="img/QQ图片20150808221236.png" title="二维码" alt="图片未显示" width="100" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<address>版权所有©<strong>北京尚学堂</strong>科技有限公司</address>
</td>
</tr>
</table>
</body>
</html>
显示如下：
练习2：
用table表格做出上面的东西：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{color: #fff; text-decoration: none; font-size: 18px; font-family: "microsoft yahei"}
td{width: 80px; text-align: center;}
</style>
</head>
<body>
<table bgcolor="#BD0101" border="0" align="center" height="50">
<tr>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
<td><a href="#">即可头条</a></td>
</tr>
</table>
</body>
</html>
如下：
