HTML园地·表格样式样例 -- 追寻梦想＞编程乐园

表格样式样例

<table border="0" width="100px" bgcolor="#FFFFFF" cellspacing="1" cellpadding="0" height="40px" align="left"> <tr bgcolor="#FF9900"> <td onMouseOver="this.bgColor = '#FFCC00'"onMouseOut="this.bgColor = 'FF9900'"> <div align="center"><a href="javascript:void(0);" onMouseOver="return overlib('This is which we called 1-pixels-thin-border, and it is really different from the border defined to 1 pixel in Dreamweaver or other web editor.',STICKY,FGCOLOR,'#FF9999',BGCOLOR,'#000000',CAPTION ,'1-pixel-border',CAPCOLOR,'#FFFFFF',CAPTIONSIZE,'0',CLOSETEXT,'-exit-',CLOSECOLOR,'#FFCC99',TEXTSIZE,'0',TIMEOUT,'10000')" onMouseOut="nd();" onFocus="if(this.blur)this.blur()">1pixel</a></div> </td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

细边框表格

<table border="0" width="100px" bgcolor="#000000" cellspacing="1" cellpadding="0" height="40px" align="left"> <tr bgcolor="#FFFFFF"> <td onMouseOver="this.bgColor = '#CC0000'" onMouseOut="this.bgColor = 'FFFFFF'"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">细边框表格</a></div> </td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

表格背景变色

<table border="0" width="101px" cellspacing="1" cellpadding="0" height="40px" bgcolor="#00FF00" align="left"> <tr bgcolor="#009900"> <td onMouseOver="this.bgColor = '#006600'" onMouseOut="this.bgColor = '009900'"> <div align="center"><a href="javascript:void(0);" onMouseOver="return overlib('This is which we called exchanging table background color, and it is really different from the hyperlink background color variation defined with CSS in Dreamweaver or other web editor.',LEFT,FGCOLOR,'#990000',BGCOLOR,'#000000',CAPTION ,'Exchanging Table bgcolor',CAPCOLOR,'#999999',CAPTIONSIZE,'0',TEXTCOLOR,'#FFFFFF',TEXTSIZE,'0')" onMouseOut="nd();" onFocus="if(this.blur)this.blur()">表格背景变色</a></div> </td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我	没	有
横	隔	线

<table rules="cols" width="100px" border="1px" cellspacing="0" cellpadding="0" height="40px" bordercolor="#FFFFFF" align="left"> <tr bgcolor="#CC0000"> <td> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">我</a></div> </td> <td> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">没</a></div> </td> <td> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">有</a></div> </td> </tr> <tr bgcolor="#009900"> <td height="15px"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">横</a></div> </td> <td height="15px"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">隔</a></div> </td> <td height="15px"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">线</a></div> </td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我	没	有
竖	隔	线

<table rules="rows" width="100px" border="1px" cellspacing="0" cellpadding="0" height="40px" align="left" bordercolor="#FFFFFF"> <tr bgcolor="#009900"> <td bgcolor="#999900"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">我</a></div> </td> <td bgcolor="#6699CC"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">没</a></div> </td> <td bgcolor="#CC9966"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">有</a></div> </td> </tr> <tr bgcolor="#CC0000"> <td height="15px" bgcolor="#999900"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">竖</a></div> </td> <td height="15px" bgcolor="#6699CC"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">隔</a></div> </td> <td height="15px" bgcolor="#CC9966"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">线</a></div> </td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我	什	么
都	没	有

<table rules="none" width="100px" border="1px" cellspacing="0" cellpadding="0" height="40px" bordercolor="#FFFFFF" align="left"> <tr bgcolor="#009900"> <td bgcolor="#FFFFFF"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">我</a></div> </td> <td bgcolor="#336699"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">什</a></div> </td> <td bgcolor="#CCCC33"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">么</a></div> </td> </tr> <tr bgcolor="#CC0000"> <td height="17px" bgcolor="#CC0000"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">都</a></div> </td> <td height="17px" bgcolor="#666666"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">没</a></div> </td> <td height="17px" bgcolor="#FF9900"> <div align="center"><a href="javascript:;" onFocus="if(this.blur)this.blur()">有</a></div> </td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我闪我闪我闪闪闪...

<table border="0" width="100px" id="flashtable2" style="border:2px solid white" height="40px" bgcolor="#9999FF"> <tr> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">我闪我闪我闪闪闪...</a></td> </tr> </table> <script language="JavaScript1.2"> function flashit(){ if (!document.all) return if (flashtable2.style.borderColor=="white") flashtable2.style.borderColor="#336699" else flashtable2.style.borderColor="white" } setInterval("flashit()", 100) </script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

呼机、手机、商务通，一个都不能要！枪打出头鸟！！

<fieldset style="width:300" align="center">呼机、手机、商务通，一个都不能要！枪打出头鸟！！</fieldset>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<table rules-"none" width="300px" bgcolor="#FF9900" border="1px" cellspacing="0" cellpadding="0"> <tr bgcolor="#FF9900"> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> </tr> <tr bgcolor="#FF9900"> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> </tr> <tr bgcolor="#FF9900"> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> </tr> <tr bgcolor="#FF9900"> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> </tr> <tr bgcolor="#FF9900"> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> </tr> <tr bgcolor="#FF9900"> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> <td onMouseOver="this.bgColor = '#FFCC00'" onMouseOut="this.bgColor = 'FF9900'"> </td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我	脱	得
就	剩	下
一	丝	了

<table style="BORDER-top: rgb(255,255,255) 1px solid; BORDER-bottom: rgb(255,255,255) 1px solid; BORDER-left: rgb(255,255,255) 1px solid; BORDER-right: rgb(255,255,255) 1px solid" width="100px" cellspacing="0" cellpadding="0"> <tr align="center" rules="none" valign="middle"> <td bgcolor="#FF9900"><a href="javascript:;" onFocus="if(this.blur)this.blur()">我</a></td> <td bgcolor="#336699"><a href="javascript:;" onFocus="if(this.blur)this.blur()">脱</a></td> <td bgcolor="#CC0000"><a href="javascript:;" onFocus="if(this.blur)this.blur()">得</a></td> </tr> <tr align="center" valign="middle"> <td bgcolor="#CC0000"><a href="javascript:;" onFocus="if(this.blur)this.blur()">就</a></td> <td bgcolor="#FF9900"><a href="javascript:;" onFocus="if(this.blur)this.blur()">剩</a></td> <td bgcolor="#336699"><a href="javascript:;" onFocus="if(this.blur)this.blur()">下</a></td> </tr> <tr align="center" valign="middle"> <td bgcolor="#336699"><a href="javascript:;" onFocus="if(this.blur)this.blur()">一</a></td> <td bgcolor="#CC0000"><a href="javascript:;" onFocus="if(this.blur)this.blur()">丝</a></td> <td bgcolor="#FF9900"><a href="javascript:;" onFocus="if(this.blur)this.blur()">了</a></td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我	的	心
像	玻	璃
般	透	明

<table style="BORDER-top: rgb(255,255,255) 1px solid; BORDER-bottom: rgb(255,255,255) 1px solid; BORDER-left: rgb(255,255,255) 1px solid; BORDER-right: rgb(255,255,255) 1px solid" width="100px" cellspacing="0" cellpadding="0"> <tr align="center" rules="none" valign="middle"> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">我</a></td> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">的</a></td> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">心</a></td> </tr> <tr align="center" valign="middle"> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">像</a></td> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">玻</a></td> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">璃</a></td> </tr> <tr align="center" valign="middle"> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">般</a></td> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">透</a></td> <td><a href="javascript:;" onFocus="if(this.blur)this.blur()">明</a></td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]