用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.效果截图
点击阅读全文
更多推荐
已为社区贡献1条内容
活动日历
查看更多
直播时间 2025-01-08 16:30:00
DTT年度收官盛典:华为开发者空间大咖汇,共探云端开发创新
直播时间 2024-12-11 16:30:00
华为云数字人,助力行业数字化业务创新
直播时间 2024-11-27 16:30:00
企业数据治理一站式解决方案及应用实践
直播时间 2024-11-21 16:30:00
轻松构建AIoT智能场景应用
直播时间 2024-10-23 16:30:00
鲲鹏DevKit,助力开发者基于鲲鹏服务器实现一站式应用开发
所有评论(0)