biaogezhizuojiaocheng.htm
来自「网页中各类表格的制作方法大全,细线制作 无边框制作技巧等」· HTM 代码 · 共 680 行 · 第 1/2 页
HTM
680 行
<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 + =
减小字号Ctrl + -
显示快捷键?