单线表格实现方法讨论
来源:互联网 发布:淘宝客推广方式大全 编辑:程序博客网 时间:2024/06/11 20:07
在网页设计时,如果用到table,除了隐藏边框的用于实现布局的table外,往往希望能把边框显示出来,而对于显示出来的边框,又往往希望是单线的,因为双线的显得笨拙。本文总结了7种常用的实现单线表格的方法,供大家参考。当然,实现的方法很多,如果您有其它方法的话,也欢迎写出来,供大家一起学习。
1、如果简单的将table的边框设置为1,效果如下,它往往不是我们所喜欢的单线表格:
cell1
cell2
cell4
cell3
代码如下:
<table width=400 cellspacing=0 cellpadding=5 border=1>
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
2、方法一:将table的属性稍微作点修改,就能得到如下的单线表格:
cell1
cell2
cell4
cell3
代码如下:
<table width=400 cellspacing=0 cellpadding=5 border=1 bordercolordark="#ffffff" bordercolorlight="#cc0000">
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
3、方法二:将table的属性稍微作点变化,就能得到如下的单线表格:(此方法是通过颜色重叠实现的,应用是要根据table所在页面的背景色调整)
cell1
cell2
cell4
cell3
代码如下:
<table width=400 cellspacing=1 cellpadding=5 border=0 bgcolor="#cc0000">
<tr bgcolor="#ffffff">
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr bgcolor="#ffffff">
<td colspan=2>
cell3
</td>
</table>
4、方法三:将table的属性稍微作点变化,就能得到如下的单线表格:(此方法是通过颜色重叠实现的,应用是要根据table所在页面的背景色调整)
cell1
cell2
cell4
cell3
代码如下:
<table width=400 cellspacing=1 cellpadding=5 border=0 bgcolor="#cc0000">
<tr>
<td bgcolor="#ffffff">
cell1
</td>
<td bgcolor="#ffffff">
cell2
</td>
<td rowspan=2 bgcolor="#ffffff">
cell4
</td>
<tr bgcolor="#ffffff">
<td colspan=2 bgcolor="#ffffff">
cell3
</td>
</table>
5、方法四:将table的属性稍微作点变化,就能得到如下的单线表格:
cell1
cell2
cell4
cell3
代码如下:
<table width=400 cellspacing=0 cellpadding=5 border=1 style="border-collapse: collapse" bordercolor="#cc0000">
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
6、方法五:将table的属性稍微作点变化,就能得到如下的单虚线表格:
cell1
cell2
cell4
cell3
代码如下:
<table width=400 cellspacing=0 cellpadding=5 style="border-collapse: collapse; border:1px dotted #cc0000" >
<tr>
<td style="border-collapse: collapse; border:1px dotted #cc0000">
cell1
</td>
<td style="border-collapse: collapse; border:1px dotted #cc0000">
cell2
</td>
<td rowspan=2 style="border-collapse: collapse; border:1px dotted #cc0000">
cell4
</td>
<tr>
<td colspan=2 style="border-collapse: collapse; border:1px dotted #cc0000">
cell3
</td>
</table>
7、结合css实现的单线表格如下:
cell1
cell2
cell4
cell3
代码如下:
<style type="text/css">
<!--
#table7{
border-top: 1px solid #cc0000;
border-left: 1px solid #cc0000;
}
#table7 td{
border-bottom:1px solid #cc0000;
border-right: 1px solid #cc0000;
}
-->
</style>
<table width=400 cellspacing=0 cellpadding=5 id=table7>
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
8、结合css实现的单虚线表格如下:
cell1
cell2
cell4
cell3
代码如下:
<style type="text/css">
<!--
#table8{
border-top: 1px dotted #cc0000;
border-left: 1px dotted #cc0000;
}
#table8 td{
border-bottom:1px dotted #cc0000;
border-right: 1px dotted #cc0000;
}
-->
</style>
<table width=400 cellspacing=0 cellpadding=5 id=table8>
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
其实,以上方法也有重复的地方,无非是把css单拿出来,或者放在属性了罢了。只要经过适当的组合和运用,还能产生其它的方法。这也正是网页设计带给我们的乐趣所在,只要能够将各方面的知识灵活运用,有时候真是会感叹:只有想不到,没有做不到。
- 单线表格实现方法讨论
- 单线表格实现方法讨论
- 单线表格实现方法讨论
- 单线表格实现方法
- html实现单线表格
- 使用border-collapse实现表格单线边框
- 实现单线格table的简易方法
- 表格不用border-collapse也能实现单线边框
- html单线表格
- 表格单线边框样式
- 单线表格的css文件
- 通过CSS样式显示单线表格
- 实现table的单线边框的技巧
- 多CPU单线通信原理与实现
- 实现table的单线边框的技巧
- vc实现定时任务的方法讨论
- JavaScript实现表格排序方法
- OpenWrt路由器macvlan单线多拨的方法
- tomcat 下配置多个服务
- Python 5 Module
- poj 1077 Eight
- c++中的私有构造函数
- AOPJDK实现
- 单线表格实现方法讨论
- AOPXML实现
- AOP概念
- 虚继承与虚函数继承
- finally小特性
- 关于在CAknMessageQueryDialog里显示中文的问题
- 两个小异常
- MySQL中字符串函数详细介绍
- 无向图双连通分量