一、表格的常用属性
基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、 bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的背景图片)、 bordercolor(表格边框的颜色),

二、table边框单线的实现方法

现在给出效果图:

1、实现方法一:

<table border="0" cellspacing="1" style="background-color:#a0c6e5">

实现原理:利用table的单元格之间的间距(cellspacing)和table的背景色来实现

2、实现方法二:

<table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;">
<tr>
<td style="border: solid 1px #a0c6e5; height: 20px;"> </td> <td style="border: solid 1px #a0c6e5; height: 20px;"> </td> <td style="border: solid 1px #a0c6e5; height: 20px;"> </td>
</tr>
</table>

实现原理:利用table的border,bordercolor="#a0c6e5"实现table的边框,但是此时的边框太粗,

这时就可以用到style属性里的border-collapse:collapse样式

二、表格内部分隔线的属性

起作用的是rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线,也就是我们只能看到表 格的列;当rules=rows时,就隐藏了纵向的分隔线,也就是我们只能看到表格的行;而当rules=none时,纵向分隔线和横向分隔线将全部隐 藏,我们就只能看到一个表格的外框了。看一下下面的对比效果你就会明白的


三、表格外部分隔线的属性

表格外边框的显示与隐藏,是可以用frame参数来控制的。注意:只对表格的外边框起作用,对内部边、线不起作用
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>

table边框设置的更多相关文章

  1. table边框不显示

    今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...

  2. 解决table边框在打印中不显示的问题

    先了解一下,table边框如何设置 一.只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式.CSS代码: .t ...

  3. HTML小技巧将table边框改为细线

    HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...

  4. table 边框问题

    对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...

  5. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  6. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  7. Qt QGroupBox StyleSheet 边框设置

    /**************************************************************************** * Qt QGroupBox StyleSh ...

  8. Table样式设置

    <table class="listTable"> <tr><th width="40px">序号</th>&l ...

  9. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

随机推荐

  1. PRG(Post/Redirect/Get)

    转自:PRG(Post/Redirect/Get) 摘要: Post/Redirect/Get 简称PRG,是一种用来防止表单重复提交数据的一种Web设计模式 Post/Redirect/Get 简称 ...

  2. 区块链Readme.md

    #Welcome to Azure Blockchain Projects This Repo host Azure related blockchain and distributed ledger ...

  3. dubbo 分布式架构学习视频链接

    http://www.roncoo.com/course/view/f614343765bc4aac8597c6d8b38f06fd 书籍 大型分布式网站架构设计与实践 http://item.jd. ...

  4. MVC5 + EF6酒店项目笔记

    最近项目组准备用MVC5开发酒店模板包括后台.在此第一次学MVC5一个礼拜,看着组长给我的MVC5模板从一脸懵逼到懵懂. 慢慢学习,成长. 未完待续........

  5. MongoDB数据模型(三)

    六.数据模型引用 文档 我们已经知道MongoDB以文档的形式存储数据,而文档是JSON风格的数据结构,由一系列的“字段名-值”对组成,如下所示 { "item": "p ...

  6. js刷新页面不回到顶部

    今天遇到刷新页面不回到顶部的需求 window.location.reload();方法已经解决了问题,但是ie8不支持,后来采用的是锚点这个方法 window.location = '/plan/g ...

  7. log4j.properties文件的配置

    Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使用这三个组件可以轻松 ...

  8. Windows下PHP(Thread Safe与Non Thread Safe)版本说明

    转载“http://www.taoz11.com/archives/300.html” linux下直接下载源码,在服务器上编译即可,发现windows下有4个版本: VC9 x86 Non Thre ...

  9. java 判断大小写、数字出现的次数

    //定义一个字符串 String s = "Hello123World"; //定义三个统计变量 int bigCount = 0; int smallCount = 0; int ...

  10. APP测试--功能测试

    1.1 了解需求 这一点,不但是功能测试,是所有测试都需要的第1步.通过需求文档,与产品经理的沟通,与开发的沟通,用户的使用习惯等各方法,了解APP的需求. 1.2 编写测试用例 当然之前可能是测试计 ...