美化网页中的Table表格样式
Table表格曾经是网页布局的霸主,可惜现在用的少了,主要还是用在表现表格结构化数据的布局,虽说用得少,但是表格用起来还是很方便的,至少有时候比DIV+CSS更方便,关于如何美化网页中的Table表格样式,这篇文章将为你提供一些方法。
表格的默认样式
表格有一个默认的样式,在不添加任何属性的情况下,基本都很丑:
上面的截图来自下面的代码,这是最基本的表格结构,有边框默认为1px,单元格之间还有间隙,后面我们会介绍如何消除这些丑陋的样式:
<table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>
去掉单元格之间的间隙
在表格元素上面添加 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'); })
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
下一篇: 限制文本框只能输入数字的解决方法
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论