博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
table常用范例 转载不了我就复制粘贴前辈，自己整理的
阅读量：5829 次
发布时间：2019-06-18

本文共 12581 字，大约阅读时间需要 41 分钟。

普通table表格样式及代码大全(全)(一)

 

例中能使表格产生单线效果是设置了<table>标记的rules和frame参数，rules参数是对表格的内部边框作显示控制。

rules="none"：表示不加内部边框；
rules="rows"：表示只显示水平方向的边框； 
rules="cols：表示只显示垂直方向上的边框；
rules="all"：则是显示所有方向上的边框，这也是默认值；
frame="void"：表示不加外边框；
frame="above"：表示显示上边的外边框；
frame="below"：表示显示下边的外边框；
frame="lhs" ：表示显示左边的外边框；
frame="rls" ：表示显示右边的外边框；
frame="hsides"：表示显示上下外边框；
frame="vsides"：表示显示左右外边框；
frame="box" 则表示显示所有外边框。

在内部加一条横线：

利用div内嵌套一个hr标签

<div>

<hr size=2 color=#CCCCCC with=80% align=right>
</div>

单实线边框表格

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>

<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

虚线边框表格

 

<TABLE style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>

<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

点线边框表格

 

 

<TABLE style="BORDER-RIGHT: #ff6600 2px dotted; BORDER-TOP: #ff6600 2px dotted; BORDER-LEFT: #ff6600 2px dotted; BORDER-BOTTOM: #ff6600 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#ff6600 height=40 cellPadding=1 width=250 align=center border=2>

<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

双实线边框表格

 

<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>

<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

槽线边框表格

 

<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

脊线边框表格

 

<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

内凹效果边框

 

<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD></TR></TBODY></TABLE>

 

 

外凸效果边框

 

<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD></TR></TBODY></TABLE>

 

 

内虚外实边框

 

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>

<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD></TR></TBODY></TABLE>

 

 

外虚内实边框

 

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>

<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

 

 
无边框表格

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>

<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

隐藏下边框

 

<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>
<TR align=middle>
<TD style="BORDER-BOTTOM: medium none" height=40>隐藏下边框</TD></TR></TBODY></TABLE>

 

 

隐藏上边框

 

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none" height=40>隐藏上边框</TD></TR></TBODY></TABLE>

 

 

隐藏左边框

 

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>
<TR align=middle>
<TD style="BORDER-LEFT: medium none" height=40>隐藏左边框 </TD></TR></TBODY></TABLE>

 

 

隐藏右边框

 

<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none" height=40>隐藏右边框 </TD></TR></TBODY></TABLE>

 

 

隐藏左右边框

 

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none; BORDER-LEFT: medium none" height=40>隐藏左右边框 </TD></TR></TBODY></TABLE>

 

 

隐藏上下边框

 

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none; BORDER-BOTTOM: medium none" height=40>隐藏上下边框</TD></TR></TBODY></TABLE>

 

 

只显示上边框

 

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above>

<TBODY>
<TR align=middle>
<TD height=40>只显示上边框</TD></TR></TBODY></TABLE>

 

 

只显示下边框

 

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below>

<TBODY>
<TR align=middle>
<TD height=40>只显示下边框</TD></TR></TBODY></TABLE>

 

 

只显示左边框

 

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs>

<TBODY>
<TR align=middle>
<TD height=40>只显示左边框</TD></TR></TBODY></TABLE>

 

 

只显示右边框

 

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=rhs>

<TBODY>
<TR align=middle>
<TD height=40>只显示右边框</TD></TR></TBODY></TABLE>

 

 

不显示任何边框

 

<TABLE borderColor=#ff6600 cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbec border=1 frame=void>

<TBODY>
<TR align=middle>
<TD height=40>不显示任何边框</TD></TR></TBODY></TABLE>

 

 

单行单列

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>
<TR>
<TD height=40>
<DIV align=center>单行单列</DIV></TD></TR></TBODY></TABLE>

 

 

一行多列
一行多列
一行多列

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>
<TR>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD></TR></TBODY></TABLE>

 

 

一列多行
一列多行
一列多行

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD></TR></TR></TR></TBODY></TABLE>

多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>
<TR>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD></TR></TR></TR></TBODY></TABLE>

 

 

合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>
<TR>
<TD colSpan=3>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD></TR></TR></TR></TBODY></TABLE>

 

 

合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>
<TR>
<TD width=100 rowSpan=3>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD></TR></TR></TR></TBODY></TABLE>

 

 

复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>
<TR>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TD width=180 colSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD rowSpan=4>
<DIV align=center>复杂表格</DIV></TD>
<TD rowSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD colSpan=3>
<DIV align=center>复杂表格</DIV></TD></TR></TR></TR></TR></TR></TBODY></TABLE>

 

 

隐藏 横向 分隔线
隐藏 横向 分隔线
隐藏 横向 分隔线

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=cols width=300 align=center bgColor=#e1f8ff border=1>

<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>横向</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD></TR></TR></TR></TBODY></TABLE>

 

 

隐藏 纵向 分隔线
隐藏 纵向 分隔线
隐藏 纵向 分隔线

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=rows width=300 align=center bgColor=#e1f8ff border=1>

<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>纵向</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD></TR></TR></TR></TBODY></TABLE>

 

 

隐藏 纵横 分隔线
隐藏 纵横 分隔线
隐藏 纵横 分隔线

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=none width=300 align=center bgColor=#e1f8ff border=1>

<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>纵横</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD></TR></TR></TR></TBODY></TABLE>

 

 

标题
文本内容——标题位于表体外的表格

 

<TABLE width=250 align=center border=0>

<CAPTION>标题</CAPTION>
<TBODY>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体外的表格</DIV></TD></TR></TBODY></TABLE>

 

 

标题
文本内容——标题位于表体内的表格

 

<TABLE width=250 align=center border=0>

<TBODY>
<TR>
<TD bgColor=#999999>
<DIV align=center><FONT color=#ffffff><B>标题</B></FONT></DIV></TD></TR>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体内的表格</DIV></TD></TR></TBODY></TABLE>

 

 

标题
文本内容——标题位于边框上的表格
 

 

<FIELDSET style="WIDTH: 250px" align=center><LEGEND>标题</LEGEND>

<DIV align=center>文本内容——标题位于边框上的表格</DIV>
<DIV align=center>&nbsp;</DIV></FIELDSET>

 

 

表中表

文本内容——表中表效果

 

<TABLE cellSpacing=0 cellPadding=0 width=250 align=center>

<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 250px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" align=center><LEGEND style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; BORDER-LEFT: #808080 1px solid; background-Color: #e1f8ff; BORDER-BOTTOM: #808080 1px solid"><FONT color=#000000>表中表</FONT> </LEGEND>
<P align=center>文本内容——表中表效果</P></FIELDSET> </TD></TR></TBODY></TABLE>

转载于:https://www.cnblogs.com/af826/p/3518442.html

你可能感兴趣的文章
Using RequireJS in AngularJS Applications
查看>>
hdu 2444(二分图最大匹配)
查看>>
【SAP HANA】关于SAP HANA中带层次结构的计算视图Cacultation View创建、激活状况下在系统中生成对象的研究...
查看>>
DevOps 前世今生 | mPaaS 线上直播 CodeHub #1 回顾
查看>>
iOS 解决UITabelView刷新闪动
查看>>
CentOS 7 装vim遇到的问题和解决方法
查看>>
JavaScript基础教程1-20160612
查看>>
【ros】Create a ROS package:package dependencies报错
查看>>
通过容器编排和服务网格来改进Java微服务的可测性
查看>>
re:Invent解读：没想到你是这样的AWS
查看>>
PyTips 0x02 - Python 中的函数式编程
查看>>
使用《Deep Image Prior》来做图像复原
查看>>
Linux基础命令---rmdir
查看>>
Squid 反向代理服务器配置
查看>>
Java I/O操作
查看>>
Tomcat性能调优
查看>>
Android自学--一篇文章基本掌握所有的常用View组件
查看>>
灰度图像和彩色图像
查看>>
FreeMarker-Built-ins for strings
查看>>
argparse - 命令行选项与参数解析（转）
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-12-23 20:38:10   当前IP: 3.144.224.116   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我