?? biaogezhizuojiaocheng.htm
字號:
<tr align="center">
<td>通</td>
<td>格</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width=200
bgColor=#000000 border=0>
<TBODY>
<TR align=middle bgColor=#ffffff>
<TD bgColor=#ffffff>細</TD>
<TD bgColor=#ffffff>表</TD>
</TR>
<TR align=middle bgColor=#ffffff>
<TD bgColor=#ffffff>線</TD>
<TD
bgColor=#ffffff>格</TD>
</TR>
</TBODY>
</TABLE>
表格加上了漂亮的細線<BR>
(利用cellspacing1像素間隙和表格與單元格背景的不同)</TD>
<TD><TEXTAREA name=textarea rows=4 wrap=VIRTUAL cols=40><table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" >
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FFFFFF">細</td>
<td bgcolor="#FFFFFF">表</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FFFFFF">線</td>
<td bgcolor="#FFFFFF">格</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200>
<TBODY>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">細</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">表</TD>
</TR>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">線</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">格</TD>
</TR>
</TBODY>
</TABLE>
這和上面那個可不一樣，它用的是CSS，效果卻一樣。<BR>
(對單元格border的定義)</TD>
<TD><TEXTAREA name=textarea2 rows=4 wrap=VIRTUAL cols=40><table width="200" cellspacing="0" cellpadding="0">
<tr align="center">
<td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">細</td>
<td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">表</td>
</tr>
<tr align="center">
<td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">線</td>
<td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">格</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200>
<TBODY>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">細</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">表</TD>
</TR>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">線</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">格</TD>
</TR>
</TBODY>
</TABLE>
再進一步，把邊框變成虛線，同樣是CSS的神奇作用。</TD>
<TD><TEXTAREA name=textarea2 rows=4 wrap=VIRTUAL cols=40><table width="200" cellspacing="0" cellpadding="0">
<tr align="center">
<td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">細</td>
<td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td>
</tr>
<td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">線</td>
<td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width=200
border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD
bgColor=#ffffff> </TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD
bgColor=#ffffff> </TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD
bgColor=#ffffff> </TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD
bgColor=#ffffff> </TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>
細線表格的擴展應用，奧妙就是在第個單元格中再套入一個表格。</TD>
<TD><TEXTAREA name=textarea3 rows=4 wrap=VIRTUAL cols=40><table width="200" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 borderColorDark=#ffffff
cellPadding=0 width=200 borderColorLight=#ffffff
border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>立</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>表</TD>
</TR>
<TR align=middle>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>體</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>格</TD>
</TR>
</TBODY>
</TABLE>
立體感的表格<BR>
(簡單的亮暗邊框設置，注意只有IE支持這種效果)</TD>
<TD><TEXTAREA name=textarea4 rows=4 wrap=VIRTUAL cols=40><table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td>
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td>
</tr>
<tr align="center">
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >體</td>
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 200px"
align=center>
<LEGEND>無名表格 </LEGEND>
<P
align=right></P>
</FIELDSET></TD>
</TR>
</TBODY>
</TABLE>
給表格加上一個表頭<BR>
(應用<fieldset>和</legend>標簽)</TD>
<TD><TEXTAREA name=textarea5 rows=4 wrap=VIRTUAL cols=40><table width="200" cellpadding="0" cellspacing="0">
<tr>
<td><fieldset style="width:200" align="center"> <legend> 無名表格 </legend>
<p align="right">
</fieldset></td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200 ?>
<TBODY>
<TR>
<TD>
<FIELDSET
style="WIDTH: 200px; COLOR: #b7b7b7; BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove"
align=center>
<LEGEND
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: blue; BORDER-BOTTOM: #000000 1px solid">表中表效果Ⅰ</LEGEND>
<BR>
</FIELDSET></TD>
</TR>
</TBODY>
</TABLE>
給表頭再加個框<BR>
(用CSS為<legnd>定義一個邊框)</TD>
<TD><TEXTAREA name=textarea6 rows=4 wrap=VIRTUAL cols=40><table width="200"" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center">
<legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend>
<br>
</fieldset>
</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR vAlign=top>
<TD>
<TABLE width=200>
<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 200px"
align=center>
<LEGEND> </legend>
<TABLE
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
height=20 cellSpacing=1 cellPadding=0 width=80>
<TBODY>
<TR>
<TD><FONT
color=blue>表中表效果Ⅱ</FONT></TD>
</TR>
</TBODY>
</TABLE>
<BR>
</FIELDSET></TD>
</TR>
</TBODY>
</TABLE>
看起來和上面的一樣，可是這個才是真正的表中表哦。<BR>
(在<legnd>中插入一個表格)</TD>
<TD><TEXTAREA name=textarea7 rows=4 wrap=VIRTUAL cols=40><table width="200">
<tr>
<td><fieldset style="width:200" align="center"> <legend>
<table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20">
<tr>
<td><font color=blue>表中表效果Ⅱ</font></td>
</tr>
</table>
</legend><br>
</fieldset>
</td>
</tr>
</table></TEXTAREA>
</TD>
</TR>
<TR>
<TD colSpan=2>
<HR color=black SIZE=1>
這一節要靠你自己去發現了，因為這樣學到的東西才是真正屬于自己的（我的一個偷懶的借口）。 我已經在每個表格的下面寫出了重點，并在右邊給出它的源代碼，你可以對照著看。下面還有一 個邊框會自己變顏色閃動的表格，有興趣也研究研究吧 ^o^</TD>
</TR>
</TBODY>
</TABLE>
</DIV></TD>
</TR>
<TR>
<TD vAlign=top align=right><SPAN
class=normalfont><B>編輯: hongmo - 熱浪教程</B> http://www.yeahe.com</SPAN></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -