php中表格的美化,美化网页中的Table表格样式 - 文章教程
Table表格曾经是网页布局的霸主,可惜现在用的少了,主要还是用在表现表格结构化数据的布局,虽说用得少,但是表格用起来还是很方便的,至少有时候比DIV+CSS更方便,关于如何美化网页中的Table表格样式,这篇文章将为你提供一些方法。
表格的默认样式
表格有一个默认的样式,在不添加任何属性的情况下,基本都很丑:
上面的截图来自下面的代码,这是最基本的表格结构,有边框默认为1px,单元格之间还有间隙,后面我们会介绍如何消除这些丑陋的样式:
去掉单元格之间的间隙
在表格元素上面添加 border=”0″ cellpadding=”0″ cellspacing=”0″ 去掉边框和间隙,这样的话我们得到了一个非常干净的表Table,如果没有内容就是空白的,但是如果在文章里面,可能忘记了给表格添加 border=”0″ cellpadding=”0″ cellspacing=”0″ 那么就只能通过CSS去清除填充和间距了。
table{border-collapse:collapse}
表格边框
如果我们保留表格默认的边框,你会发现是单元格的边框,而且还都不一样,即使消除了间隙,上下单元格都有边框,添加下面的代码,即可以给表格添加一个1px像素的边框:
table{
width:100%;
border-left:#C8B9AE solid 1px;
border-top:#C8B9AE solid 1px;
border-collapse:collapse;
}
table td{
width:25%;
border-right:#C8B9AE solid 1px;
border-bottom:#C8B9AE solid 1px;
padding:10px 10px 6px;
}
上面的代码演示效果:
1
2
3
4
如果是需要上边边框,那么可以给tr设置边框,然后表格设置三个边:
.single-border{
border:#C8B9AE solid 1px;
border-bottom:none;
}
.single-border tr{
border-bottom:#C8B9AE solid 1px;
}
1
2
3
4
表格行隔行换色
隔行换色对于区分和查找单元格都是非常方便的,一般这种显示方式,我们可以使用JavaScript或者是CSS来控制,如果JavaScript方法还是要配合样式来显示。
CSS隔行换色
CSS的选择器有很多,有一类是特别来选择奇数或者是偶数索引的,用法是在样式类名后面加 :nth-child(2n),例如下面的CSS代码所示:
.interlaced-color tr:nth-child(2n) td{
background:#F8F8F8;
}
1
2
3
4
5
6
7
8
9
10
JavaScript隔行换色
JavaScript需要配合CSS完成隔行换色,因为JavaScript主要是控制,当然也可以添加style样式,但是使用CSS类将更加方便,我们先定义一个有背景的类。
.interlaced-td td{
background:#F8F8F8
}
然后通过JavaScript找到我们的元素,然后添加这类,这里我使用jQuery为大家演示下:
$(function(){
$('tr:even').addClass('interlaced-td');
})
php中表格的美化,美化网页中的Table表格样式 - 文章教程相关推荐
- 在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆
原文链接: 在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆 上一篇: tailwindcss 简单场景和官方案例 下一篇: git Submodule 将别人的模型文件通 ...
- HTML中强制换行和自动换行,网页中的纯文本如何强制换行(txt文件)
有的时候需要把文本文件中的内容显示到网页中,显示效果非常糟糕,比txt文本文件还差,不但没有行间距,连段落也没有了,所有段落被合并成一段,可阅读性变得十分差,可能阅读一会就不想读了.通常的处理方法是把 ...
- html批量导入excel表格,html 导入excel表格数据格式-如何将网页中的表格快速复制到EXCEL中...
html读取本地excel文件并展示 我们打开上的一个包含表格内容的页点击菜单栏-文件-另存为. 弹出选择保存路径,将保存类型选为"htm 或Html格式". 在计算机上新建一个E ...
- html怎么弄到excel里,html里导入excel表格数据-如何将网页中的表格快速复制到EXCEL中...
怎么把html文件转成excel 1.首先,我们打开要转换成THML表格文件.(是我用的WPS2019版本的截图,EXCEL软件操作上差不多.) 2.接下来,点击左上角的[文件] 3.在[文件]菜单里 ...
- html怎么复制到Excel表格里,把页面html导出到excel表格数据-如何将网页中的表格快速复制到EXCEL中...
如何将html里面的table导出成excel 使用table2excel插件需要在页面中jquery和jquery.table2excel.js文件. HTML结构 你可以将任何的HTML表格结构的 ...
- 将VS2005中的.CS文件在网页中显示的方法
今天在做AccessMembershipProvider的DEMO时,想把支持Access数据库提供程序的源码在网页中显示出来,可是复制源码后在网页中显示的是不换行的,后来我在尝试了很多办法后,终于有 ...
- 怎样在html中插入广告,如何在网页中插入广告代码。
1.首先通过百度搜索百度地图生成器,进入百度地图生成器的创建地图页面. 2.在创建地图页面第一步输入我们需要生成地图的地址,然后点击查找. 3.如果没有其它设置需求的话,那么就可以直接点击下方的获取代 ...
- android 抓取webview中的所有图片_Python|任意网页中的所有图片下载
参考代码: import requestsfrom bs4 import BeautifulSoupurl = 'https://movie.douban.com/chart' # 设置爬取网址hd ...
- Hexo博客中插入图片,在网页中无法显示:采用图床外链的方法
个人博客:小序的时光机,欢迎访问! 最近在用Hexo搭建博客过程中,发现如果在博文中添加本地图片,网页上的图片无法显示.网上的搜到的方法很多都是利用hexo-asset-image插件,然而该插件还是 ...
最新文章
- 从零开始的ROS四轴机械臂控制-目录
- opensuse使用zypper安装软件
- python打印异常
- nacos 环境切换_Nacos多环境配置
- php import用法,JavaScript中import怎么使用?
- linux centos 的编码格式,Linux/CentOS/fedora下vim显示的字符编码设置
- mysql 数据库连表查询语句_数据库连表查询sql语句
- JavaScript学习(七十五)—图解浅拷贝和深拷贝
- shell 中的参数替换
- mysql 触发器 lod_MySQL--初探触发器的使用和理解
- 【渝粤教育】广东开放大学 财会法规和职业道德 形成性考核 (26)
- csv格式导出,身份证号码显示不全
- 魅族魅蓝6简单打开usb调试模式的经验
- 【LeetCode】347. Top K Frequent Elements 前 K 个高频元素(Medium)(JAVA)
- Evision显示器无法设置1440*900分辨率的问题解决
- 用了MybatisPlus后,我很久没有手写sql了
- Windows打印机驱动开发
- 流量计专用无线物联模块介绍
- java 验证手机号_Java使用正则表达式验证手机号和电话号码的方法
- [UTCTF2020]sstv
热门文章
- 接口幂等性-学习笔记
- win7+ubuntu Kylin 15.10融合之路很简单...so easy
- 我又发现了这几个让人耳目一新的小众App
- [.crt 证书] openssl 查看.crt 证书详细信息
- vimplus快捷键
- 百道IT求职面试宝典,闯进大厂,薪资翻倍!
- Electron中使用sql.js操作SQLite数据库
- 手把手教你完成贪吃蛇的编写(Python)
- Java中4种创建对象的方法
- 如何使用ffmpeg将BDMV(m2ts)转换成MKV、MP4等其他格式的文件