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

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

单实线边框表格

<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 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 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>

普通table表格样式及代码大全(全)的更多相关文章

普通table表格样式及代码大全
普通table表格样式及代码大全(全)(一) 单实线边框表格 <table style="border-collapse: collapse" borderColor=#0 ...
ueditor 百度编辑器粘贴的table表格样式边线
粘贴html的table表格会有间隔大,黑色边线,可以在: ueditor.all.js 里找到以下处,修改里面的样式即可 me.ready(function () { utils.cssRule( ...
ANT 的Table表格样式修改方法
注:(大家在给页面添加参数或者方法的时候,记得写上注释,方便别人查看) 1.表格行选中样式添加:(可以去beijing,精子库质控统计查看例子) (咱们以前页面上的表格都是在hover时显示选中效果, ...
关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境问题描述:1. vue里 ...
Table Generator 表格样式生成代码
<style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;} .tg td{font ...
怎么设置table(表格)手机端自适应宽度
我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...
html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
如何去掉bootstrap table中表格样式中横线竖线
修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
[转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

随机推荐

admob广告开始个人资料网址
最近植入广告,数据收集,简单易学. ios http://www.rover12421.com/2013/05/08/ios-add-admob-ads-test-xcode-project-test ...
内核代码架构图：systemtap函数选择点
Qt 学习之路：元素布局
上一章我们介绍了 QML 中用于定位的几种元素,被称为定位器.除了定位器,QML 还提供了另外一种用于布局的机制.我们将这种机制成为锚点(anchor).锚点允许我们灵活地设置两个元素的相对位置.它使 ...
SQLite的 SQL语法总结
SQLite库可以解析大部分标准SQL语言.但它也省去了一些特性并且加入了一些自己的新特性.这篇文档就是试图描述那些SQLite支持/不支持的SQL语法的.查看关键字列表. 如下语法表格中,纯文本用蓝 ...
小结 iOS 中的 copy
预备知识 : 内存的栈区 : 由编译器自动分配释放, 存放函数的参数值, 局部变量的值等. 其操作方式类似于数据结构中的栈. 内存的堆区 : 一般由程序员分配释放, 若程序员不释放, 程序结束时可能 ...
动态添加子视图 UIView 的正确方法
很多时候哥比较喜欢用代码添加视图,特别是要同时加很多UIView时,而且跟 xib 比起来代码更容易管理,在多人的项目中代码不容易 conflict. 但小牛哥最近发现很多新人都不太清楚正确的使用方法 ...
Java源码中的发现：快速判断一个int值是几位数
判断一个int值是几位数,要是我自己实现,估计又会想到除法和模运算了,偶然在java标准API源码中发现的写法,很强大. public class Test { final static int[] ...
Oracle修改被占用的临时表结构
这两天在修改临时表的类型时,提示”attempt to create,alter or drop an index on temporary table already in use“的错误,由于临时 ...
用Javascript进行HTML转义（分享）
众所周知页面上的字符内容通常都需要进行HTML转义才能正确显示,尤其对于Input,Textarea提交的内容,更是要进行转义以防止javascript注入攻击. 通常的HTML转义主要是针对 ...
transition的四个属性
transition-property 规定设置过渡效果的 CSS 属性的名称. transition-duration 规定完成过渡效果需要多少秒或毫秒. transition-timing-fun ...

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

普通table表格样式及代码大全(全)的更多相关文章

随机推荐

热门专题