狼翔天地

三種細線表格做法

<table width="100%" border="1" bordercolor="#000000"><br /> <tr bordercolor="#FFFFFF"><br /> <td>表格邊線為1，線色為黑，行線色為白。</td><br /> </tr><br /> </table><br /> <p><br /> </p><table width="100%" border="0" cellspacing="1" bgcolor="#000000"><br /> <tr><br /> <td bgcolor="#FFFFFF">表格邊線為0，間距為1，背景色為黑，行背景色為白。</td><br /> </tr><br /> </table><br /> <table style="border-collapse:collapse;" border="1"><br /> <tr><br /> <td bgcolor="#FFFFFF">style="border-collapse:collapse;" </td><br /> </tr><br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



立體表格

<table border="1" cellspacing="0" width="100%" bordercolorlight="#333333" bordercolordark="#efefef"><br /> <tr bgcolor="#cccccc"><br /> <td>cnbruce</td><br /> <td>cnbruce</td><br /> <td>cnbruce</td><br /> <td>cnbruce</td><br /> </tr><br /> <tr bgcolor="#cccccc"><br /> <td>cnbruce</td><br /> <td>cnbruce</td><br /> <td>cnbruce</td><br /> <td>cnbruce</td><br /> </tr><br /> </table><br /> <center>表格邊線為1，間隔為0，左上為#333333，右下為#efefef,行背景色為#cccccc<br /> </center>

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



表格的邊框不斷在閃

<table border="0" width="280" id="myexample" style="border:1px solid red"><br /> <tr><br /> <td>cnbruce cnbruce cnbruce cnbruce cnbruce cnbruce</td><br /> </tr><br /> </table><br /> <br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



不用嵌套製作同一行放兩個表格

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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



另類圓角表格製作

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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



虛線邊框表格

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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



分類型表格

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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



變色的單元格1，通過a:hover做.

<style><br /> a:link,a:visited,a:hover<br /> {width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}<br /> a:hover{background:#0099ff;color:black}<br /> td{background:#3366cc;color:white;padding:0px}<br /> </style><br /> <table width="100%" cellspacing="1" bgcolor="black"><br /> <tr><br /> <td><a href="#" rel="nofollow ugc noreferrer noopener">CNBruce<br /> </a></td><td><a href="#" rel="nofollow ugc noreferrer noopener">.com<br /> <tr><br /> <td><a href="#" rel="nofollow ugc noreferrer noopener">CNBruce<br /> </a></td><td><a href="#" rel="nofollow ugc noreferrer noopener">.com<br /> <br><br /> <i>[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]</i> <input "runEx('temp82244')" type="button" value="運行代碼"> <br><br /> <br><br /> 變色的單元格2，已經做成了CSS，注意還有透明效果。<br><br /> <textarea class="bk" id="temp49132" style="WIDTH: 90%" rows="12"><style type="text/css"><br /> .aa<br /> { background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}<br /> .bb<br /> { background-color:#3366cc; color:#ffffff}<br /> </style><br /> <table width="100%"><br /> <tr><br /> <td onmouseover="this.className='aa'" "this.className='bb'" class="bb"><center><b>cnbruce</b></center></td><br /> </tr><br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



變色的單元格3，通過mouse事件做.有點微軟的味道。

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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



透明表格

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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



表格邊框顯示外陰影

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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



限製表格的大小。

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)"><br /> <tr><br /> <td><center><img loading="lazy" src="https://imageproxy.pixnet.cc/imgproxy?url=https://www.cnbruce.com/images/cnrose/mi.jpg" alt="" title=""></center></td><br /> </tr><br /> <tr><br /> <td><br /> cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce<br /> </td></tr><br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



VML做圓腳表格

<br /> <style><br /> v\:*{behavior:url(#default#VML)}<br /> </style><br /> <body><br /> <roundrect style="position:relative;width:150;height:240px"><br /> <shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"></shadow><br /> <textbox style="font-size:10.2pt;">VML</textbox><br /> </roundrect><br /> <br /> <br /> <br><br /> <i>[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]</i> <input "runEx('temp30316')" type="button" value="運行代碼"> <br><br /> <br><br /> <textarea class="bk" id="temp54478" style="WIDTH: 90%" rows="12"><br /> <style><br /> v\:*{behavior:url(#default#VML)}<br /> </style><br /> <br /> <roundrect style="position:relative;width:150;height:240px"><br /> <path textpathok="true"></path><br /> <textpath on="true" string="cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"></textpath><br /> <shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"></shadow><br /> <textbox style="font-size:10.2pt;">VML</textbox><br /> </roundrect><br /> <br /> <br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



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

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



表格行換色

a，效果達到了，但應用不大。

<table width="500"><br /> <br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



b,利用腳本來控制

<br /> <table border="0" cellpadding="1" cellspacing="1" id="table1" width="500"><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> <tr><td> </td></tr><br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]

c，表格和控制分開，只需要指定表格 id 即可

<br /> <table width="100" height="100" id="oTable"><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]

d，做成了樣式表

<style><br /> #oTable tr {alternateColor:expression(bgColor=rowIndex%2==0?'#cccccc':'#efefef')}<br /> </style><br /> <table width="500" height="100" border="1" id="oTable"><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> </tr><br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



根據單元格內容加亮

<table border="1" cellspacing="0" width="400" cellpadding="0" id="table1"><br /> <tr><br /> <td width="80">12</td><br /> <td width="80">34</td><br /> <td width="80">56</td><br /> <td width="80">78</td><br /> <td width="80">90</td><br /> </tr><br /> <tr><br /> <td width="80">abc</td><br /> <td width="80">def</td><br /> <td width="80">ghj</td><br /> <td width="80">lop</td><br /> <td width="80">dry</td><br /> </tr><br /> <tr><br /> <td width="80">!@#</td><br /> <td width="80">_(*</td><br /> <td width="80">#$%</td><br /> <td width="80">^$#</td><br /> <td width="80">WWW</td><br /> </tr><br /> </table><br /> <br /> <p align="center"><input type="text" name="txt" value=""><input type="button" value="請輸入要查的字符串." "hightlight_td();"></p><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



單擊表格換色

<br /> <table width="80%" border="1"><br /> <tr "bgChange(this)"><td>a</td><td>a</td></tr><br /> <tr "bgChange(this)"><td>a</td><td>a</td></tr><br /> <tr "bgChange(this)"><td>a</td><td>a</td></tr><br /> </table><br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



動態編輯表格

<br /> <br /> <style><br /> TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}<br /> </style><br /> <br /> <h2>Table Editor</h2><br /> <br><br /> <h3>Single click to select a cell, alt-click to select a row</h3><br /> <br><br /> <div id="TableContainer"><br /> <table id="TheTable" border="1" style="border-collapse: collapse; table-layout: fixed"><br /> <tbody><br /> <tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr><br /> <tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr><br /> <tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr><br /> </tbody><br /> </table><br /> </div><br /> <br><br><br><br /> <input id="ButtonAddRow" style="width: 200px;" type="button" value="Add Row" "addRow()"><br><br /> <input id="ButtonRemoveRow" style="width: 200px;" type="button" value="Remove Row" "removeRow()"><br><br /> <input id="ButtonAddCell" style="width: 200px;" type="button" value="Add Cell" "addCell()"><br><br /> <input id="ButtonRemoveCell" style="width: 200px;" type="button" value="Remove Cell" "removeCell()"><br><br /> <input id="ButtonMoveUp" style="width: 200px;" type="button" value="Move Up" "moveUp()"><br><br /> <input id="ButtonMoveDown" style="width: 200px;" type="button" value="Move Down" "moveDown()"><br><br /> <input id="ButtonMoveLeft" style="width: 200px;" type="button" value="Move Left" "moveLeft()"><br><br /> <input id="ButtonMoveRight" style="width: 200px;" type="button" value="Move Right" "moveRight()"><br><br /> <input id="ButtonEditContents" style="width: 200px;" type="button" value="Edit Contents" "editContents();"><br /> <input type="text" style="display: none; width: 400px;" id="EditCell"><br><br /> <input id="ButtonEditStyle" style="width: 200px;" type="button" value="Edit Table Style" "editStyle();"><br /> <input type="text" style="display: none; width: 400px;" id="EditStyle"><br><br /> <br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]



<br /> <br /> <title>O_O"</title><br /> <style>.navPoint {<br /> COLOR:#ffffff; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt<br /> }<br /> </style><br /> <br /> <br /> <br /> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"><br /> <tbody><br /> <tr><br /> <td align="middle" id="frmTitle" nowrap valign="center" name="frmTitle"><iframe frameborder="0" id="BoardTitle" name="BoardMenu" scrolling="no" src="http://www.blueidea.com/img/common/logo.gif" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 180px; Z-INDEX: 2"></iframe><br /> </td><td bgcolor="#333333" "switchSysBar()" style="WIDTH: 10pt"><span class="navPoint" id="switchPoint" title="關閉/打開菜單">7</span><br /> </td><br /> <td style="WIDTH: 100%"><iframe frameborder="0" id="frmright" name="forum" src="http://www.blueidea.com/bbs/images/reply5.gif" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1"></iframe><br /> </td><br /> </tr><br /> </tbody><br /> </table><br /> <br /> <br />

[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]