实例
使用表格实现了一份购物清单，清晰明了的展示出来购物所有信息。同一类事物需要有序的列出来应该使用列表标签ul，如果需要进一步详细的描述多个类似信息应该使用表格table。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<!--如果要对一组相关的事物具体描述，应该使用表格标签-->
<!--横向合并colspan="2" 竖向合并rowspan="2"-->
<style type="text/css">
table {
width: 700px;
text-align: center;
margin: 20px auto;
border-collapse: collapse; /*与在table标签后面直接加属性 cellspacing="0"(属于标签属性，css没有改属性，css属性是border...) 功能一样，但不能直接写在css里*/
}
table caption {
font-size: 3rem; /*此处1rem=16px;HTML中默认字体大小为16px，一般浏览器最小识别字体大小为12px，小于12无效*/
font-weight: bolder;
color: #666;
margin-bottom: 20px;
}
table,th,td {
border:1px solid #666;
}
table tr:first-child {
background-color: lightgreen;
}
table tr:hover {
background-color: #efefef;
color: coral;
}
table tr td img {
padding: 5px;
border-radius: 10px;
}
/*将a标签模拟成按钮*/
table tr td a {
/*去掉下划线*/
text-decoration-line: none;
/*width: 140px;*/
/*height: 40px;*/
padding: 5px;
border: 1px solid black;
color: red;
background-color: lightblue;
border-radius: 8px;
}
table tr td a:hover {
background-color: red;
/*font-size: 1.1rem;*/
color: black;
}
</style>
<table cellspacing="0">
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>牌牌</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td> <!--横向合并colspan 竖向合并rowspan-->
<td>果果</td>
<td>红富士</td>
<td>5斤</td>
<td><img src="images/milk.jpg" width="100" alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
<tr>
<td>2</td>
<td>牛奶</td>
<td>伊犁</td>
<td>1箱</td>
<td><img src="images/apple.jpg" width="100" alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>美的</td>
<td>1台</td>
<td><img src="images/fan.jpg" width="100" alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
1、网页的表格跟办公的execl有点类似，可以详细明了的描述一个事物。表格内可以放任何标签，跟再网页中写是一样的。
2、表格可引入图片和链接
