普通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; boeder-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>
            <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>
            <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 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 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> </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>

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

普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
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文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...
如何去掉bootstrap table中表格样式中横线竖线
修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
[转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
BootStrap的table表格，栅格系统，form表单的样式
BootStrap BootStrap的简介 1. 什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2. 为什么使用B ...

随机推荐

JAVA大作业汇总3
JAVA大作业3 代码 ``` package thegreatwork; import java.util.; import java.io.; /Board.java 目的:里面有一些关于如何移动 ...
WPF DateTimePicker 和 TimeSpanPicker 控件发布
原文:WPF DateTimePicker 和 TimeSpanPicker 控件发布根据http://datetimepickerwpf.codeplex.com/ 这个项目重构了一下代码设计了我 ...
C# List集合去重操作注意点
今天调试代码时发现list的distinct方法在对引用类型操作时并没有去重,后来查阅资料发现list去重操作对象集合时比较的是对象的一个个引用地址, 因为集合里的对象都是一个个单独的实例,所以并不会 ...
签名APK后仍然出现INSTALL_PARSE_FAILED_NO_CERTIFICATES的解决方案
修改apk里的dex并且修复后重新打包进apk里,使用signapk.jar签名后安装仍然出现INSTALL_PARSE_FAILED_NO_CERTIFICATES,搜了很久,使用了多种方法签名仍然 ...
「日常训练」 Mike and Frog (CFR305D2C)
题意与分析 (Codeforces 548C) 我开始以为是一条数学题,死活不知道怎么做,无奈看题解,才知这是一条暴力,思维江化了- - 题意大概是这样的: 两个东西的初始高度分别为h1,h2&quo ...
【紫书】（UVa1347）Tour
继续考虑dp题目. 题意分析其实这里只是更加仔细的做一个lrj的复读机(Orz 他分析了一个很重要的结果:如果是一个人从左到右再回来,并且每个点恰经过一次,那么等价于两个人从左到右每个点经过一次地遍 ...
Python 3基础教程18-获取用户键盘输入
有时候,我们需要获取用户的键盘输入的信息,然后得到信息,拿去做一些事情. 请看下面的demo.py # 练习如何通过键盘获取用户输入 x = input('What is your name?') p ...
eclipse返回快捷键
1.图上第一个箭头(Ctrl + Q) 返回上一个编辑点(编辑,修改代码) 2.图上第二个箭头(Alt + Left) 返回上一个操作点(点击进入方法等操作) 3.图上第三个箭头(Alt + Righ ...
Laxcus大数据管理系统2.0（4）- 第一章基础概述 1.3 节点
1.3 节点按照我们给Laxcus集群的设计定义,Laxcus集群被分为内部和外部两个网络环境.内部网络由集群的所有权人负责实施和管理,为保证集群能够有效可靠运行,需要遵守一系列的集群部署和管理规定 ...
Queue模块初识
Queue模块实现了多生产者.多消费者队列.它特别适用于信息必须在多个线程间安全地交换的多线程程序中.这个模块中的Queue类实现了所有必须的锁语义.它依赖于Python中线程支持的可用性:参见thr ...

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

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

随机推荐

热门专题