效果
代码
<!DOCTYPE html>
<html>
<head>
<style >
body {background-color: white;}
h1 {color: blue;}
p {color: red;}
table{
font-family: arial, sans-serif;
border-collapse:collapse;
text-align:left;
}
th, td{
border: 1px solid #dddddd;
text-align: left;
padding: 10px;
}
th{
background-color:#D3D3D3;
}
tr:nth-child(even){
background-color:#F5F5F5;
}
tr:hover{
background-color:#A9A9A9
}
</style>
</head>
<body>
<h2>Movie App</h2>
<h4>Home</h4>
<h4>Privary</h4>
<table style = "width:100%">
<tr>
<th>img</th>
<th>Title</th>
<th>Release Data</th>
<th>Genre</th>
<th>Price</th>
</tr>
<tr></tr>
<tr>
<td>
<img src = "sun.png" alt = "1.jpg" style = "width:20px;height:20px;”>""
</td>
<td>
<a href = "https://www.baidu.com/s?wd=速度与激情">速度与激情
</td>
<td>2015/11/19</td>
<td>Crime</td>
<td>2.99</td>
</tr>
<tr>
<td>
<img src = "sun.png" alt = "2.jpg" style = "width:20px;height:20px;>""
</td>
<td>
<a href = "https://www.baidu.com/s?wd=夏洛特烦恼">夏洛特烦恼</td>
<td>2017/12/6</td>
<td>Comedy</td>
<td>1.99</td>
</tr>
<tr>
<td>
<img src = "sun.png" alt = "3.jpg" style = "width:20px;height:20px;>""
</td>
<td>
<a href = "https://www.baidu.com/s?wd=同桌的你">同桌的你</td>
<td>2014/6/8</td>
<td>Love</td>
<td>1.99</td>
</tr>
<tr>
<td>
<img src = "sun.png" alt = "4.jpg" style = "width:20px;height:20px;>""
</td>
<td>
<a href = "https://www.baidu.com/s?wd=小时代">小时代</td>
<td>2013/8/25</td>
<td>Love</td>
<td>1.99</td>
</tr>
</table>
</body>
</html>
知识点
html
< tr >：table row 每行
< td >：table data 每项数据
< a herf >：插入链接
< img src alt >：插入图片，若显示不出图片 显示alt
css
font-family：字体格式
border-collapse：表格边框折叠为单个边框
text-align：水平对齐
padding：控制边框和表格内容之间的空间
border-bottom：水平分割线
:hover：悬停
:nth-child(even)：条纹
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
