网页中怎样制作虚线表格
<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>
<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>
<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></LEGEND><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>
原文地址
你在本篇停留 
·
谢谢你的来访
|
欢迎光临miaozk2006的博客！
本博资料大部分来自于互联网，其版权归原作者或其他合法者所有。如内容涉及或侵犯了您的权益，请通知本人，我将尽快处理！ 喜欢转载本博客日志的朋友注意！请您点击日志下方的“引用”，再点“-引用此篇日志到我的博客”！请勿删去出处！删除引用链接是剽窃行为，剽窃可耻！！！这是你对你自己人格的污辱，请你自重。要珍惜博主的劳动，尊重他人就是尊重你自己，谢谢你的支持配合！ |
网页中怎样制作虚线表格相关推荐
- html网页虚线怎么做,如何在网页中制作虚线表格-网页设计,HTML/CSS
icech: 在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题. 方法一:作一个1×2的图. 半黑半白,再利用表格作成线.这种方法虽然麻烦,但在任何浏览器中均可浏览,兼容性最 ...
- html表格中加入虚线分割,制作虚线表格三种方法
在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题. 方法一:作一个1X2的图. 半黑半白,再利用表格作成线.这种方法虽然麻烦,但在任何浏览器中均可浏览,兼容性最好. 方法二: ...
- html锚点链接dw怎么做,Dreamweaver网页中如何制作锚点链接
Dreamweaver网页中如何制作锚点链接 锚点链接对站点SEO非常重要,当页面内容过多的时候,我们就会用到锚点链接,庞大繁琐的网页,通过点击命名锚点,可以为访问者提供很大的便利去浏览网页内容,更精 ...
- html锚点链接dw怎么做,Dreamweaver网页中怎样制作锚点链接
Dreamweaver网页中怎样制作锚点链接 锚点链接对站点SEO非常重要,当页面内容过多的时候,我们就会用到锚点链接,庞大繁琐的网页,通过点击命名锚点,可以为访问者提供很大的便利去浏览网页内容,更精 ...
- HTML网页中table居中和表格内容居中
HTML网页中table居中和表格内容居中 1.html中让表格在浏览器中左右居中,可以设置表格的align属性 align三个属性: 居中:center:靠左:left:靠右:right. 2.在表 ...
- html 使table 页面居中,HTML网页中table居中和表格内容居中
HTML网页中table居中和表格内容居中 1.html中让表格在浏览器中左右居中,可以设置表格的align属性 align三个属性: 居中:center:靠左:left:靠右:right. 2.在表 ...
- 在网页中预览excel表格文件
项目需求在前端页面中实现预览excel表格的功能,上网了解之后大致总结为一下几种方法. 1.office文档转换为pdf,再转swf,然后通过网页加载flash进行预览 2.通过 xlsx.js,js ...
- h5页面如何预览excel文件_在网页中预览excel表格文件
项目需求在前端页面中实现预览excel表格的功能,上网了解之后大致总结为一下几种方法. 1.office文档转换为pdf,再转swf,然后通过网页加载flash进行预览 2.通过 xlsx.js,js ...
- php怎么制作虚线表格,excel虚线怎么去掉打印在一页
excel虚线怎么去掉打印在一页?去掉excel打印虚线 去掉预览中的虚线:点击左上角的图标--打印--打印预览,把显示边距的勾去掉,这时打印虚线就不见了. 去掉插入分页符的打印虚线,点击页面布局-- ...
最新文章
- android 时间传递,Android事件传递
- 【转】从网页上下载控件时制作CAB包的方法
- SQLite 函数大全
- 用owncloud 打造自己的云盘
- python树状节点 可拖拽_Python 的 heapq 模块源码分析
- Unix 初步（一）
- Intel:Larrabee浮点运算能力2TFlops
- Android的第一天
- linux增加阵列磁盘空间,Linux Ubuntu系统下通过LVM创建软raid来实现硬盘合并大小
- 关于ECLIPSE中JSP代码无提示
- 第七届 蓝桥杯 省赛 第六题 方格填数（next_permutation）
- C++ 整型所能表示的数据范围
- Hibernate之集合映射
- 中国气象局发布实施细则 推进气象数据安全合规有序开放共享
- 快手短视频的流量及视频推荐算法解析，助你轻松上热门
- linux gtk主题安装教程,如何获取、安装和制作 GTK 主题
- 生活随记-找爸爸的小女孩
- 查看是否安装了VC++ 2015-2019 Redistributeable
- 程序员的算法趣题Q55: 平分蛋糕
- 14. python-es-8.3.3-多词项聚合multi_terms
热门文章
- 常见六大 Web 安全攻防解析 | 技术头条
- 主流芯片架构即将变天！
- 国内滴滴面临“讨伐”，国外Uber日子更难过！活该不？
- 滴滴司机毒打投资人；华为回应自研系统；微信回应被删聊天记录可提取 | 一周业界事...
- Python 人气王，JS 比 Java 更受科技公司青睐！
- 回顾 2017， Java 有哪些值得关注的重大变化？
- 马云：用 10% 大脑创造出来的机器不可能毁灭人类
- onestage方法_FCOS : 找到诀窍了，anchor-free的one-stage目标检测算法也可以很准 | ICCV 2019...
- pandas python2_Python随笔 | Pandas入门（二）
- 赣州师范高等专科学校计算机网络技术,赣州师范高等专科学校2021年招生简章...