biaogezhizuojiaocheng.htm
来自「网页中各类表格的制作方法大全,细线制作 无边框制作技巧等」· HTM 代码 · 共 680 行 · 第 1/2 页
HTM
680 行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-image: url(../../images/bj1.jpg);
}
.content { FONT-SIZE: 12px; LINE-HEIGHT: 220%; FONT-FAMILY: Tahoma,MS Shell Dlg,宋体
}
.normalfont { FONT-SIZE: 12px; FONT-FAMILY: Tahoma,MS Shell Dlg,宋体
}
.subhead { FONT-SIZE: 14px; COLOR: #ff6600; FONT-FAMILY: Tahoma,MS Shell Dlg,宋体
}
.style1 {
font-size: 16px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<TABLE cellSpacing=1 cellPadding=5 width="100%"
align=center border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle>
<SCRIPT language=JavaScript
src="../热浪网络%20-%20表格边框魔鬼教程.files/adv5_1.htm"
type=text/JavaScript></SCRIPT>
</TD>
</TR>
<TR>
<TD vAlign=top>
<DIV class=subhead>
<div align="center" class="style1">表格边框魔鬼教程</div>
</DIV></TD>
</TR>
<TR>
<TD vAlign=top>
<DIV class=content><FONT size=3> </FONT>
<TABLE height=30 cellSpacing=0 cellPadding=0
width="100%" border=0>
<TBODY>
<TR>
<TD><B>一、表格中单元格之间分隔线的隐藏方法</B></TD>
</TR>
</TBODY>
</TABLE>
<TABLE class=t cellSpacing=0 cellPadding=8
width="100%" border=0>
<TBODY>
<TR>
<TD width=220>
<TABLE cellSpacing=0 cellPadding=0 rules=cols
width=200 border=1>
<TBODY>
<TR align=middle>
<TD>第</TD>
<TD>一</TD>
<TD>行</TD>
</TR>
<TR align=middle>
<TD>第</TD>
<TD>二</TD>
<TD>行</TD>
</TR>
<TR align=middle>
<TD>第</TD>
<TD>三</TD>
<TD>行</TD>
</TR>
</TBODY>
</TABLE></TD>
<TD width=380>这个表格去掉了单元格之间的纵向分隔线</TD>
</TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 rules=rows
width=200 border=1>
<TBODY>
<TR align=middle>
<TD>第</TD>
<TD>第</TD>
<TD>第</TD>
</TR>
<TR align=middle>
<TD>一</TD>
<TD>二</TD>
<TD>三</TD>
</TR>
<TR align=middle>
<TD>列</TD>
<TD>列</TD>
<TD>列</TD>
</TR>
</TBODY>
</TABLE>
<BR></TD>
<TD>这个表格去掉了单元格之间的横向分隔线</TD>
</TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 rules=none
width=200 border=1>
<TBODY>
<TR align=middle>
<TD>横</TD>
<TD> </TD>
<TD>线</TD>
</TR>
<TR align=middle>
<TD>竖</TD>
<TD> </TD>
<TD>线</TD>
</TR>
<TR align=middle>
<TD>都</TD>
<TD>没</TD>
<TD>了</TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>这个表格去掉了单元格之间的纵向分隔线和横向分隔线</TD>
</TR>
<TR>
<TD colSpan=2>
<HR color=black SIZE=1>
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<BR>
<BR>
<TABLE height=30 cellSpacing=0 cellPadding=0
width="100%" border=0>
<TBODY>
<TR>
<TD><B>二、表格边框的隐藏</B></TD>
</TR>
</TBODY>
</TABLE>
<TABLE class=t cellSpacing=0 cellPadding=8
width="100%" border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1>
<TBODY>
<TR align=middle>
<TD>普</TD>
<TD>表</TD>
</TR>
<TR align=middle>
<TD>通</TD>
<TD>格</TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>这是一普通的表格</TD>
</TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1 frame=above>
<TBODY>
<TR align=middle>
<TD>不怕</TD>
<TD>下雨</TD>
</TR>
<TR align=middle>
<TD> </TD>
<TD> </TD>
</TR>
</TBODY>
</TABLE>
<BR></TD>
<TD>只显示上边框</TD>
</TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1 frame=below>
<TBODY>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD align=middle>下起雨来</TD>
<TD
align=middle>该怎么办</TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>只显示下边框</TD>
</TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1 frame=vsides>
<TBODY>
<TR>
<TD align=middle>上不着天</TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD
align=middle>下不着地</TD>
</TR>
</TBODY>
</TABLE>
<BR></TD>
<TD>只显示左、右边框</TD>
</TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1 frame=hsides>
<TBODY>
<TR>
<TD> </TD>
<TD align=middle>两边走开</TD>
</TR>
<TR>
<TD align=middle>老子姓王</TD>
<TD> </TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>只显示上、下边框</TD>
</TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1 frame=lhs>
<TBODY>
<TR>
<TD width=100>左右</TD>
<TD width=100> </TD>
</TR>
<TR>
<TD>为难</TD>
<TD> </TD>
</TR>
</TBODY>
</TABLE>
<BR></TD>
<TD>只显示左边框</TD>
</TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1 frame=rhs>
<TBODY>
<TR>
<TD width=100> </TD>
<TD align=right width=100>左右</TD>
</TR>
<TR>
<TD> </TD>
<TD
align=right>为难</TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>只显示右边框</TD>
</TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1 frame=void>
<TBODY>
<TR>
<TD align=right>光秃秃</TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD
align=left>全脱了</TD>
</TR>
</TBODY>
</TABLE></TD>
<TD>不显示任何边框</TD>
</TR>
<TR>
<TD colSpan=2>
<HR color=black SIZE=1>
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。<BR>
只显示上边框 <table frame=above><BR>
只显示下边框 <table frame=below> <BR>
只显示左、右边框 <table frame=vsides><BR>
只显示上、下边框 <table frame=hsides><BR>
只显示左边框 <table frame=lhs><BR>
只显示右边框 <table frame=rhs><BR>
不显示任何边框 <table frame=void></TD>
</TR>
</TBODY>
</TABLE>
<P> </P>
<TABLE height=30 cellSpacing=0 cellPadding=0
width="100%" border=0>
<TBODY>
<TR>
<TD><B>三、表格边框</B></TD>
</TR>
</TBODY>
</TABLE>
<TABLE class=t cellSpacing=0 cellPadding=8
width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200
border=1>
<TBODY>
<TR align=middle>
<TD>普</TD>
<TD>表</TD>
</TR>
<TR align=middle>
<TD>通</TD>
<TD>格</TD>
</TR>
</TBODY>
</TABLE>
这是一普通的表格</TD>
<TD><TEXTAREA name=textfield rows=4 wrap=VIRTUAL cols=40><table border="1" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td>普</td>
<td>表</td>
</tr>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?