用CSS美化表格【前端知识】
使用CSS来美化表格
·
写在前面的话：
- 本章内容：如何使用CSS来美化表格
- 所利用的知识：html中的table标签、CSS的background等知识
今天要模仿的是国内电影票房排行榜(已过时) ，如下图：
1.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>国内电影票房排行榜</title>
</head>
<style>
.top {
width: 700px;
height: 50px;
background-color: #FE6219;
color: white;
/* 设置字体大小 */
font-size: 20px;
/* 设置字间距 */
letter-spacing: 3px;
/* 设置行高与盒子高度一致，实现垂直居中 */
line-height: 50px;
/* 设置水平居中 */
text-align: center;
}
/* 设置表格 */
table {
/* 表格的宽度与top一样 */
width: 700px;
/* 设置表格边框 */
border: 1px solid white;
}
/* 设置表头 */
th {
width: 170px;
height: 45px;
background-color: #FED68F;
border: 0px;
/* 合并相邻的边框 */
border-collapse: collapse;
/* 字体居中对齐 */
text-align: center;
}
/* 单独设置表头中的“影片名” */
.ying-pian {
width: 300px;
}
/* 设置表格中每一个单元格 */
td {
width: 170px;
height: 45px;
/* 设置无边框 */
border: 0px;
/* 字体水平居中 */
text-align: center;
}
/* 设置排名为奇数的一行表格 */
.odd {
background-color: #FFF4E4;
}
/* 设置排名为偶数的一行表格 */
.even {
background-color: #FED68F;
}
</style>
<body>
<div class="top">国内电影票房排行榜</div>
<table>
<th>排名</th> <th class="ying-pian">影片名</th> <th>票房(RMB)</th> <th>豆瓣评分</th> <th>猫眼评分</th> <th>上映时期</th>
<tr class="odd">
<td>1</td>
<td>《战狼Ⅱ》</td>
<td>56.94</td>
<td>7.1</td>
<td>9.7</td>
<td>2017年</td>
</tr>
<tr class="even">
<td>2</td>
<td>《你好，李焕英》</td>
<td>54.13</td>
<td>7.9</td>
<td>9.5</td>
<td>2021年</td>
</tr>
<tr class="odd">
<td>3</td>
<td>《哪吒之魔童降世》</td>
<td>50.36</td>
<td>8.4</td>
<td>9.6</td>
<td>2019年</td>
</tr>
<tr class="even">
<td>4</td>
<td>《流浪地球》</td>
<td>46.86</td>
<td>7.9</td>
<td>9.2</td>
<td>2019年</td>
</tr>
<tr class="odd">
<td>5</td>
<td>《唐人街探案3》</td>
<td>45.23</td>
<td>5.4</td>
<td>8.8</td>
<td>2021年</td>
</tr>
<tr class="even">
<td>6</td>
<td>《红海行动》</td>
<td>36.52</td>
<td>8.2</td>
<td>9.4</td>
<td>2018年</td>
</tr>
</table>
</body>
</html>2.效果截图
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)