网页中有关表格的处理-完美生活

表格复选、复选变色、以及行的间隔行
用Hotmail的时候注意下，就是这个效果
以下内容为程序代码：

限制表格的大小

style=" table-layout:fixed;word-break:break-all" '關鍵就是這句了
如果是只要限制td大小可以

无论大图还是文字，一律限制。
以下内容为程序代码：

<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=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">

</script>

虚线表格

分类型表格

<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，注意还有透明效果。

<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 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>

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>

根据单元格内容加亮

<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>