加载中…HTML：table表格画线控制
(2011-10-10 13:27:48)
标签：
html：table表格画线控制it |
分类： 编程语言 |
一、表格中单元格之间分隔线的隐藏方法
|
这个表格去掉了单元格之间的纵向分隔线 | |||||||||
|
这个表格去掉了单元格之间的横向分隔线 | |||||||||
|
这个表格去掉了单元格之间的纵向分隔线和横向分隔线 | |||||||||
|
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有 rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules= rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。 |
||||||||||
| 二、表格边框的隐藏 |
|
这是一普通的表格 | ||||
|
只显示上边框 | ||||
|
只显示下边框 | ||||
|
只显示左、右边框 | ||||
|
只显示上、下边框 | ||||
|
只显示左边框 | ||||
|
只显示右边框 | ||||
|
不显示任何边框 | ||||
|
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。 只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> 只显示上、下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=rhs> 不显示任何边框 <table frame=void> |
|||||
| 三、表格边框 |
|
<table border="1" width="200" cellpadding="0"
cellspacing="0"> <tr
align="center"> |
||||||||
(利用cellspacing1像素间隙和表格与单元格背景的不同) |
<table border="0" width="200" cellspacing="1"
cellpadding="0" bgcolor="#000000" >
<tr align="center"
bgcolor="#FFFFFF"> |
||||||||
(对单元格border的定义) |
<table width="200" cellspacing="0"
cellpadding="0"> <tr
align="center"> |
||||||||
|
<table width="200" cellspacing="0"
cellpadding="0"> <tr
align="center"> |
||||||||
|
<table width="200" border="0" cellspacing="2"
cellpadding="0">
<tr> |
||||||||
(简单的亮暗边框设置，注意只有IE支持这种效果) |
<table border="1" bordercolorlight="#ffffff"
bordercolordark="#ffffff" width="200" cellpadding="0"
cellspacing="0"> <tr
align="center"> |
||||||||
|
(应用<fieldset>和</legend>标签) |
<table width="200" cellpadding="0"
cellspacing="0">
<tr> |
||||||||
|
(用CSS为<legnd>定义一个边框) |
<table width="200"" cellspacing="0"
cellpadding="0">
<tr> |
||||||||
|
(在<legnd>中插入一个表格) |
<table width="200">
<tr> |
||||||||
|
这一节要靠你自己去发现了，因为这样学到的东西才是真正属于自己的（我的一个偷懒的借口）。 我已经在每个表格的下面写出了重点，并在右边给出它的源代码，你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格，有兴趣也研究研究吧 ^o^ |
|||||||||
|
下面来讲讲如何来快速的实现细线表格拉 。。其实很简单啊。。只要在标题那边嵌入一段小小的CSS就可以实现啦。虽然只能实现细线表格。。但是一目了然。嘻嘻 |
|||||||||
| <style type="text/css"> .table1{background:#000000;} .table1 td, .table1 th{background:#FFFFFF} </style> 这边你也可以定义背景为图片啦。不一样的图片会产生不一样的边框样式哦 |
<table cellpadding="3" cellspacing="1" border="0"
width="200" height="50" class="table1"> 这边的表格结构是不是很清楚啦。。其中关键的是要设置cellspacing为"1"还有就是定义它的class为"table1"。。关键的俩个千万不能忘了哦，不然效果出不来的哦。。 |
||||||||
喜欢
0
赠金笔