|
三种细线表格做法
<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 style="border-collapse:collapse;" border="1">
<tr>
<td bgcolor="#FFFFFF">style="border-collapse:collapse;" </td>
</tr>
</table>
立体表格 <table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef>
<tr bgcolor=#cccccc>
<td>nxyc163</td>
<td>nxyc163</td>
<td>nxyc163</td>
<td>nxyc163</td>
</tr>
<tr bgcolor=#cccccc>
<td>nxyc163</td>
<td>nxyc163</td>
<td>nxyc163</td>
<td>cnxyc163</td>
</tr>
</table>
<center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc
表格的边框不断在闪
<table border="0" width="280" id="myexample" style="border:1px solid red">
<tr>
<td>nxyc163 nxyc163 nxyc163 nxyc163 nxyc163 nxyc163</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>nxyc163</td>
</tr>
</table>
<table border=1 align="right">
<tr>
<td>nxyc163.com</td>
</tr>
</table>
<br><br><br>
<table border=1 align=left>
<tr>
<td>nxyc163</td>
</tr>
</table>
<table border=1 align="center">
<tr>
<td>nxyc163.com</td>
</tr>
</table>
<br><br><br>
<table border="1" align="left" width="50%" height="100px">
<tr>
<td>nxyc163</td>
</tr>
</table>
<table border="1" align="right" width="50%">
<tr>
<td>nxyc163.com</td>
</tr>
</table>
<br><br><br><br><br><br>
<table border=1 align=left>
<tr>
<td>nxyc163</td>
</tr>
</table>
<table border=1>
<td>nxyc163.com</td>
</tr>
</table>
虚线边框表格
<style type="text/css">
.tb{BORDER: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tb"><center>www.nxyc163.com</td>
</tr>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">
表格行换色
a，效果达到了，但应用不大。
<table width=500>
<script>
for(i=0;i<10;i++){
i%2==1?document.write('<tr><td align=center bgcolor=#cccccc>'+i+'</td></tr>'):document.write('<tr><td align=center bgcolor=#efefef>'+i+'</td></tr>');
}
</script>
</table>
b,利用脚本来控制
<SCRIPT LANGUAGE="JavaScript">
window.onload = function() {
doubleBgColor(document.getElementById("table1"),"#cecece","#ececec")
}
function doubleBgColor(Table,Bg1,Bg2) {
for (var i=0;i<Table.rows.length;i++) Table.rows[i].bgColor=i%2?Bg2:Bg1;
}
</SCRIPT>
<TABLE border=0 cellpadding=1 cellspacing=1 id="table1" width="500">
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
</TABLE>
c，表格和控制分开，只需要指定表格 id 即可
<script defer>
for(i=0;i<oTable.rows.length;i++){
if(i%2==0){
oTable.rows[i].bgColor="#cccccc";
}else{
oTable.rows[i].bgColor="#efefef";
}
}
</script>
<table width=100 height=100 ID="oTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
d，做成了样式表
<style>
#oTable tr {alternateColor:expression(bgColor=rowIndex%2==0?'#cccccc':'#efefef')}
</style>
<table width=500 height=100 border=1 ID="oTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></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.nxyc163.com</td>
</tr>
</table>
透明表格
<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>
<tr><td><center>nxyc163</td></ |
