实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的使用</title>
<style type="text/css">
body{
background-color: #fff3e7; /*定义body背景色 */
font-family: 微软雅黑; /* 定义body字体*/
}
table{
width: 1000px; /*定义table表宽度*/
text-align: center; /*设置table水平居中 */
margin: 20px auto; /*定义table上下边距20，左右自动*/
border-collapse: collapse; /*表格设置合并边框*/
}
table caption{
font-size: 2rem; /*设置字体大小*/
font-weight: bolder;/*加粗*/
color: #666; /*字体颜色*/
margin-bottom: 20px; /*设置上下边距20px*/
}
table,th,td{
border:1px solid #666; /*设置边框样式*/
}
table tr td img{
width: 100px; /*定义图片宽度*/
padding: 5px; /*定义上边距5px*/
border-radius: 30px; /*元素添加圆角边框*/
}
table tr td a{
text-decoration-line: none;/*去掉链接显示的下划线*/
width:140px; /* a标签 设置宽度*/
height: 40px; /* a标签 设置高度*/
padding: 5px; /* a标签 设置边框样式*/
border: 1px solid #F25807; /*设置边框样式*/
background-color: #fff3e7; /*设置背景颜色*/
color: #F25807; /*设置字体颜色*/
border-radius: 3px; /*元素添加圆角边框*/
}
table tr:hover{
background-color: #cbefff; /*伪类在鼠标移到元素上时向此元素添加特殊的样式:背景颜色*/
color: #F25807; /*伪类在鼠标移到元素上时向此元素添加特殊的样式:字体颜色*/
}
table tr td a:hover{
background-color: #F25807; /*伪类在鼠标移到元素上时向此元素添加特殊的样式:背景颜色*/
color:#fff; /*伪类在鼠标移到元素上时向此元素添加特殊的样式:字体颜色*/
}
</style>
</head>
<body>
<table> <!-- 表格声明标签 -->
<caption>热销商品明细</caption> <!-- 定义table标题 -->
<tr>
<th>编号</th>
<th>图片</th>
<th>名称</th>
<th>销量(台)</th>
<th>成本(元)</th>
<th>单价(元)</th>
<th>销售额(元)</th>
<th>毛利额(元)</th>
<th>链接</th>
</tr>
<tr>
<td>1</td>
<td><img src="http://i8.mifile.cn/a1/pms_1527735134.03584233!560x560.jpg" alt=""></td>
<td>小米8</td>
<td>124</td>
<td>2599</td>
<td>2699</td>
<td>334676</td>
<td>12400</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="http://i8.mifile.cn/a1/pms_1528718745.83129328!560x560.jpg" alt=""></td>
<td>红米6</td>
<td>1059</td>
<td>649</td>
<td>749</td>
<td>793191</td>
<td>105900</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="http://i8.mifile.cn/b2c-mimall-media/259fb9b0ba83fd9773e2e6b47147ecc8.jpg" alt=""></td>
<td>小米电视4A 55英寸</td>
<td>124</td>
<td>2599</td>
<td>2699</td>
<td>334676</td>
<td>12400</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="https://i8.mifile.cn/b2c-mimall-media/c7042d49da89fcb4e56a2b3aec910eed.jpg" alt=""></td>
<td>13.3"笔记本 四核i5 8G 256G MX150</td>
<td>124</td>
<td>2599</td>
<td>2699</td>
<td>334676</td>
<td>12400</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
<tr>
<td>5</td>
<td><img src="http://i8.mifile.cn/b2c-mimall-media/da79ebc8a836964464e4494f3afb419a.jpg" alt=""></td>
<td>小米净水器（厨下式）</td>
<td>124</td>
<td>2599</td>
<td>2699</td>
<td>334676</td>
<td>12400</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
<tr>
<td>6</td>
<td><img src="http://i8.mifile.cn/b2c-mimall-media/6f57d0965a749154fe29c317e00daad0.jpg" alt=""></td>
<td>米家扫地机器人</td>
<td>124</td>
<td>2599</td>
<td>2699</td>
<td>334676</td>
<td>12400</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
<tr>
<td>7</td>
<td><img src="http://i8.mifile.cn/b2c-mimall-media/7cf606e7065e13f952a87dde0306db3f.jpg" alt=""></td>
<td>九号平衡车</td>
<td>124</td>
<td>2599</td>
<td>2699</td>
<td>334676</td>
<td>12400</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
<tr>
<td>8</td>
<td><img src="http://i8.mifile.cn/b2c-mimall-media/5320f48de779a47a7584bde81473310d.jpg" alt=""></td>
<td>TS偏光太 阳镜米家定制版</td>
<td>1189</td>
<td>89</td>
<td>59</td>
<td>105821</td>
<td>35670</td>
<td><a href="http://www.mi.com/">查看商品</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
问答：
1. 学习PHP为什么必须要掌握HTML?
html是网页的前端显示结果，直接由浏览器解释并执行输出，是最接近用户的；
PHP是后端代码，由服务器上的特殊程序来运行，用来动态生成html代码的，PHP程序运行的结果就是html；
学习PHP语言，需要掌握HTML CSS、JS，只有把前端的基础知识掌握了，学习PHP开发时才能做出更好，更符合浏览器解释的动态html。
2.为什么选择PHP开发动态网站？
选择PHP开发动态网站的主要原因是：快
a、开发速度快
b、学习上手快
c、更新迭代快
php是一种开源的脚本语言，融合了c、java等其他的语言特点，学起来比较快，容易上手；php相对于其他的编程语言来说可以快速的执行动态网页，执行生成的html效率高。PHP具有非常强大的功能，支持几乎所有流行的数据库以及操作系统。更为重要的是PHP可以用C、C++进行程序的扩展！尤其是近几年的发展，促使应用领域广泛，版本迭代快；php框架比较规范，开发效率高。
