![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
html+css的学习与运用之列表和表格处理
1、学习PHP为什么必须要掌握HTML?
因为PHP是动态创建html的，展示结果是也是html。要动态创建html，就必须掌握html的知识，包括标签如何使用以及编写规则等。举个例子吧，我们买了面包机做面包，必须掌握的除了如何使用面包机，还要掌握，制作面包需要什么原料，以及原料的比例。就是如此。
2、为什么选择PHP开发动态网站？
因为PHP各方面都快！入门快，上手快，开发快，更新迭代快。开发快使得我们能很快拿出成品展现给领导以及kehu，入门快、上手快使得我们的代码质量得到保证，而更新迭代快，可以让我们更快的使用新的技术开发出新功能的产品，或者更好的实现我们现有的功能。
3、html+css的学习与运用之列表和表格处理，举例说明：
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
<style type="text/css">
table,tr,th,td{
border:1px solid #666;
border-collapse:collapse;
text-align:center;
padding:10px;
}
td.inventory{
text-align:left;
}
.introduce{
overflow:hidden;
}
.introduce:hover{
overflow:visible;
}
.content{
width:200px;
height:160px;
overflow: hidden;
}
.content:hover{
overflow: visible;
}
a{
text-decoration: none;
border:1px solid #666;
border-radius:10px;
padding:5px;
}
img{
width:300px;
height:200px;
}
</style>
</head>
<body>
<table>
<caption><h1>我的购物车</h1></caption>
<tr>
<th><h2>序号</h2></th>
<th><h2>名称</h2></th>
<th><h2>缩略图</h2></th>
<th><h2>数量</h2></th>
<th><h2>包装清单</h2></th>
<th><h2>介绍</h2></th>
<th><h2>操作</h2></th>
</tr>
<tr>
<td>1</td>
<td>appleX</td>
<td><img src="images/applex.jpg"></td>
<td>6</td>
<td class="inventory">
<ul>
<li>主机 x 1部</li>
<li>电源 x 1套</li>
<li>保修卡 x 1张</li>
<li>赠送手机壳 x 1个</li><li>赠送钢化膜 x 1个</li>
</ul>
</td>
<td class="introduce"><div class="content"><p>apple X是美国Apple（apple公司）于北京时间2017年9月13日凌晨1点，在Apple Park新总部的史蒂夫·乔布斯剧院会上发布的新机型。</p><p>apple X属于高端版机型，采用全新设计，分为64GB、256GB两个版本，2017年10月27日预售，11月3号正式开卖。</p></div></td>
<td><a href="#">点击buy</a</td>
</tr>
<tr>
<td>2</td>
<td>iPadPro</td>
<td><img src="images/ipadpro.jpg"></td>
<td>8</td>
<td class="inventory">
<ul>
<li>主机 x 1台</li>
<li>电源 x 1套</li>
<li>手写笔 x 1根</li>
<li>保修卡 x 1张</li>
</ul>
</td>
<td class="introduce"><div class="content"><p>iPad Pro是apple公司于2015年9月11号凌晨的apple发布会上正式发布。</p><p>2015年11月11日，iPad Pro在中国、美国等全球40个地区接受网上订购。</p><p>2016年3月21日，apple发布了9.7英寸的iPad Pro。该iPad Pro的性能与之前12.9英寸的iPad Pro性能一样。</p></div></td>
<td><a href="#">点击buy</a</td>
</tr>
<tr>
<td>3</td>
<td>MacBookPro</td>
<td><img src="images/macbookpro.jpg"></td>
<td>2</td>
<td class="inventory">
<ul>
<li>主机 x 1台</li>
<li>电源 x 1套</li>
<li>保修卡 x 1张</li>
</ul>
</td>
<td class="introduce"><div class="content"><p>MacBook Pro是apple公司于2006年1月11日由史蒂夫·乔布斯在MacWorld 2006大会上发布的笔记本，用来取代PowerBook G4产品线。MacBook Pro与新iMac（酷睿）同为第一款转换为英特尔核心的产品。</p><p>2016年10月28日，加入Touch Bar的新款MacBook Pro发布，售价13888元起。</p><p>2018年7月12日，新版MacBook Pro发布，2018款MacBook Pro全系配备英特尔第八代酷睿处理器，配合True Tone技术的屏幕和Apple T2片，用户体验有了显著提升。</p></div></td>
<td><a href="#">点击buy</a</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
执行结果：
通过使用列表和表格的相关标签，可以让我们更好的展现有关联、规律性的东西。
4、总结
列表标签有ul、li，表格标签有table、tr、th、td等，通常li标签包在ul标签内，表格标签最外层是table标签，接下来必须展现的是tr标签，然后是th或td标签，而非必须展现的是tbody标签，因为浏览器或自动填充tbody标签，与之对应的还有thead和tfoot标签，分别表示表头和表底（表格最后一行），但是就表现形式来说，通过使用css样式，普通的tr和td标签的组合也可以很容易达到thead和tfoot的展现效果。
