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.效果截图

用CSS美化表格【前端知识】相关推荐

html表格边框美化,CSS美化表格边框汇总与效果
用css美化表格边框1 2 3 4 5 6 7 8 9 ...
怎么用css打表格框,怎么用css美化表格的边框
我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. ...
利用HTML+CSS美化表格
HTML+CSS美化表格: 效果如下: 实现代码: <!doctype html> <html lang="en"> <head> <me ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
HTML使用CSS美化表格
效果图: 示例代码: <!DOCTYPE html> <html><head><title></title><style type=& ...
html css 表头,css固定表格表头(各浏览器通用)
固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12p ...
html写表格标记,HTML表格标记教程(48):CSS修饰表格
HTML表格标记教程(48):CSS修饰表格互联网发布时间:2008-10-17 18:56:54 作者:佚名我要评论现在我们来看看怎样巧妙运用css语法美化表格. 注:除非特殊声 ...
html边框定义css设置,表格边框的css语法
表格边框的css语法更新时间:2006年09月21日 00:00:00 作者: 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下 ...
前端知识-表格知识+美化表格样式项目
表格table 构成: caption表名+thead表头+tbody+tr行+td表格+tfoot表尾常用属性 colspan="2" rowspan="2" ...
css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...

用CSS美化表格【前端知识】

1.代码

2.效果截图

用CSS美化表格【前端知识】相关推荐

最新文章

热门文章