【表格】特效整理

源码 2005-9-29 3:23

两种细线表格做法

<table  width="100%"  border="1"  bordercolor="#000000">
    <tr  bordercolor="#FFFFFF">
        <td>表格边线为1，线色为黑，行线色为白。</td>
    </tr>
</table>
<p>
<table  width="100%"  border="0"  cellspacing="1"  bgcolor="#000000">
    <tr>
        <td  bgcolor="#FFFFFF">表格边线为0，间距为1，背景色为黑，行背景色为白。</td>
    </tr>
</table>

立体表格

<table    border=1  cellspacing=0    width=100%  bordercolorlight=#333333  bordercolordark=#efefef>
<tr  bgcolor=#cccccc>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
</tr>
<tr  bgcolor=#cccccc>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
</tr>
</table>
<center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc

表格的边框不断在闪

<table  border="0"  width="280"  id="myexample"  style="border:1px  solid  red">
<tr>
<td>cnbruce  cnbruce  cnbruce  cnbruce  cnbruce  cnbruce</td>
</tr>
</table>
<script  language="JavaScript1.2">
<!--
function  flashit(){
if  (!document.all)
return
if  (myexample.style.borderColor=="blue")
myexample.style.borderColor="red"
else
myexample.style.borderColor="blue"
} 
setInterval("flashit()",  500)
//-->
</script>

不用嵌套制作同一行放两个表格

<table  border=1  align=left>
<tr>
<td>-1</td>
</tr>
</table>
<table  border=1  align="right">
<tr>
<td>1</td>
</tr>
</table>


<br><br><br>


<table  border=1  align=left>
<tr>
<td>-1</td>
</tr>
</table>
<table  border=1  align="center">
<tr>
<td>1</td>
</tr>
</table>


<br><br><br>


<table  border="1"  align="left"  width="50%"  height="100px">
<tr>
<td>hhh</td>
</tr>
</table>
<table  border="1"  align="right"  width="50%">
<tr>
<td>nnn</td>
</tr>
</table>


<br><br><br><br><br><br>


<table  border=1  align=left>
<tr>
<td>-1</td>
</tr>
</table>
<table  border=1>
<td>1</td>
</tr>
</table>

另类圆角表格制作

原图：
<table  cellpadding=0  cellspacing=0  border=0  width=282  align=center>
    <tr  height=1>
        <td  rowspan=4  width=1></td>
        <td  rowspan=3  width=1></td>
        <td  rowspan=2  width=1></td>
        <td  width=2></td>
        <td  bgcolor=#43B5C9></td>
        <td  width=2></td>
        <td  rowspan=2  width=1></td>
        <td  rowspan=3  width=1></td>
        <td  rowspan=4  width=1></td>
    </tr>
    <tr  height=1>
        <td  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
    </tr>
    <tr  height=1>
        <td  bgcolor=#43B5C9></td>
        <td  colspan=3  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
    </tr>
    <tr  height=2>
        <td  bgcolor=#43B5C9></td>
        <td  colspan=5  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
    </tr>
</table>
<p>放大
<table  cellpadding=0  cellspacing=0  border=1  width=282  align=center>
    <tr  height=10>
        <td  rowspan=4  width=10></td>
        <td  rowspan=3  width=10></td>
        <td  rowspan=2  width=10></td>
        <td  width=20></td>
        <td  bgcolor=#43B5C9></td>
        <td  width=20></td>
        <td  rowspan=2  width=10></td>
        <td  rowspan=3  width=10></td>
        <td  rowspan=4  width=10></td>
    </tr>
    <tr  height=10>
        <td  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
    </tr>
    <tr  height=10>
        <td  bgcolor=#43B5C9></td>
        <td  colspan=3  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
    </tr>
    <tr  height=20>
        <td  bgcolor=#43B5C9></td>
        <td  colspan=5  bgcolor=#43B5C9></td>
        <td  bgcolor=#43B5C9></td>
    </tr>
</table>

虚线边框表格

<style  type="text/css">
.tb{BORDER-BOTTOM:  #000000  1px  dotted;BORDER-top:  #000000  1px  dotted;BORDER-LEFT:  #000000  1px  dotted;BORDER-RIGHT:  #000000  1px  dotted;}
</style>
<table  width="100%"  border="0"  cellspacing="0"  cellpadding="0">
    <tr>
        <td  class="tb"><center>www.cnbruce.com</td>
    </tr>
</table>
<p>
虚线直线1
<hr  size=1  style="border:1px  dotted  #001403;">
虚线直线2
<p  size=1  style="border:1px  dotted  #001403;">

分类型表格

<fieldset>
<legend>item</legend>
content
</fieldset>

变色的单元格1，通过a:hover做.

<style>
a:link,a:visited,a:hover
{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}
a:hover{background:#0099ff;color:black}
td{background:#3366cc;color:white;padding:0px}
</style>

<TABLE  width=100%  cellspacing=1  bgcolor=black  >
<TR>
	<TD><a  href="#">CNBruce
	<TD><a  href="#">.com
<TR>
	<TD><a  href="#">CNBruce
	<TD><a  href="#">.com

变色的单元格2，已经做成了CSS，注意还有透明效果。

<style  type="text/css">
.aa
{  background-color:#0000ff;  color:#ff0000;filter:  alpha(opacity=50)}
.bb
{  background-color:#3366cc;  color:#ffffff}
</style>

<table    width="100%">
    <tr>
        <td    onmouseover="this.className='aa'"  onmouseout="this.className='bb'"  class="bb"><center><b>cnbruce</td>
      </tr>
</table>

变色的单元格3，通过mouse事件做.有点微软的味道。

<table  width="100%"  border="1"  cellpadding="3"  cellspacing="0"  bordercolor="#efefef"  bgcolor="#efefef">
    <tr>
        <td  onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";  onMouseOver="this.bgColor='#cccccc';  this.borderColor='#000033'"><div  align="left">cnbruce</div></td>
    </tr>
    <tr>
        <td  onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";  onMouseOver="this.bgColor='#cccccc';  this.borderColor='#000033'">cnbruce</td>
    </tr>
</table>

透明表格

<table  bgcolor=#ececec  style="filter:alpha(opacity=50)"  width=200  height=100  border=0>
<tr><td><center>cnbruce</td></tr>
</table>

表格边框显示外阴影

<table    align=center    width=200    height=100    bgcolor=#f3f3f3  style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)">
<tr>
<td><center>www.cnbruce.com</td>
</tr>
</table>

限制表格的大小。
style="table-layout:fixed;word-break:break-all"
无论大图还是文字，一律限制。

<table        align=center        width=200        height=100        bgcolor=#f3f3f3    style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)"  style="table-layout:fixed;word-break:break-all"  >
<tr>
<td><center><img    src="http://www.cnbruce.com/images/cnrose/mi.jpg"></td>
</tr>
<tr>
<td>
cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce
</td></tr>
</table>

根据单元格内容加亮

<table    border="1"    cellspacing="0"    width="400"    cellpadding="0"    id="table1">
                <tr>
                        <td    width="80">12</td>
                        <td    width="80">34</td>
                        <td    width="80">56</td>
                        <td    width="80">78</td>
                        <td    width="80">90</td>
                </tr>
                <tr>
                        <td    width="80">abc</td>
                        <td    width="80">def</td>
                        <td    width="80">ghj</td>
                        <td    width="80">lop</td>
                        <td    width="80">dry</td>
                </tr>
                <tr>
                        <td    width="80">!@#</td>
                        <td    width="80">_(*</td>
                        <td    width="80">#$%</td>
                        <td    width="80">^$#</td>
                        <td    width="80">WWW</td>
                </tr>
        </table>

<SCRIPT>
var    ids;
var    idstext;
function    hightlight_td(){
var    text=txt.value;
TDs=document.all.table1.all.tags("TD")
//使用iframe时:
//TDs=iframe的name.document.all.table1.all.tags("TD")
	if    (text!="")
	{
		for    (var    i    =    0;    i    <    TDs.length;    i++)
		{
			obj=TDs[i];
			idstext=obj.innerText;
			idnum=idstext.indexOf(text);
			if    (idnum!=-1)
			{
				obj.style.background="red";
			}
			else
			{
				obj.style.background="#FFFFFF";
			}
		}
	}
	else
	{
		alert("没有输入");
	}
}
</SCRIPT>
<p    align="center"><input    type="text"    name="txt"    value=""><input    type="button"    value="请输入要查的字符串."    onClick="hightlight_td();"></p>

VML做圆脚表格运行代码框

<html  xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
      <v:RoundRect  style="position:relative;width:150;height:240px">
        <v:shadow  on="T"  type="single"  color="#b3b3b3"  offset="3px,3px"/>
        <v:TextBox  style="font-size:10.2pt;">VML</v:TextBox>
        </v:RoundRect>
</body>
</html>

运行代码框

<html    xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
            <v:RoundRect    style="position:relative;width:150;height:240px">
<v:path    textpathok="true"    />
            <v:textpath    on="true"    string="cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"    />
                <v:shadow    on="T"    type="single"    color="#b3b3b3"    offset="3px,3px"/>
                <v:TextBox    style="font-size:10.2pt;">VML</v:TextBox>
                </v:RoundRect>
</body>
</html>

运行代码框

<html  xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
      <v:RoundRect  style="position:relative;width:150;height:240px"  arcsize=0.5>
        <v:shadow  on="T"  type="single"  color="#b3b3b3"  offset="3px,3px"/>
        <v:TextBox  style="font-size:10.2pt;">VML</v:TextBox>
        </v:RoundRect>
</body>
</html>

武曲貪狼

日志分类Categories

日历表calendar

最新发表Latest Posts

最近推荐Highlights

最新回复Comments

统计信息Total info

日志搜索Search

友情链接My Friends

其他信息Other

【表格】特效整理

回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}