table边框设置
一、表格的常用属性
基本属性有: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边框设置的更多相关文章
- table边框不显示
今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...
- 解决table边框在打印中不显示的问题
先了解一下,table边框如何设置 一.只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式.CSS代码: .t ...
- HTML小技巧将table边框改为细线
HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...
- table 边框问题
对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- 借助JavaScript中的时间函数改变Html中Table边框的颜色
借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...
- Qt QGroupBox StyleSheet 边框设置
/**************************************************************************** * Qt QGroupBox StyleSh ...
- Table样式设置
<table class="listTable"> <tr><th width="40px">序号</th>&l ...
- 表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...
随机推荐
- jQuery 截取double数据 重新赋值
$('.prioritySort').each(function(i){ $(this).text($(this).text().substring(0,$(this).text().indexOf( ...
- 【转发】彻底理解 JS 中 this 的指向
为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章,当然如果你有兴趣也可以看看,毕竟这是js中必须要掌握的东西. 例子1: f ...
- HttpPost与HttpVerbs.Post属性的区别
1. the HttpPost attribute is a short for the HttpVerbs.Post one but since MVC 2.0. 从MVC 2.0之后HttpPos ...
- HTML5 学习总结
1,h5比原来的h4.0版本的页面头部更为简化, <!doctype html> <meta charset="utf-8"/>sublime中快速生成格式 ...
- Java I/O 操作的一些基本知识
1.文件类:File ,也是唯一的单独的文件类.可以对文件进行操作.其方法有:exists(),delete(),isDirectory(),createNewFile(),getName(),get ...
- 万航单位换算器 V1.0 绿色版
软件名称: 万航单位换算器软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 347KB图片预览: 软件简介:万航单位换算器是一个可以随意转换单位的绿色软件,这个软件 ...
- 1010 Robot Motion
Problem Description A robot has been programmed to follow the instructions in its path. Instructions ...
- js 禁止重复提交
/*分享按钮*/ var flag = true; $(".recommed a").click(function() { if (flag == true) { getServe ...
- PMP培训感想
终于等到了C打头的邮件,等了几个星期,悬着的心终于放了.1P4M,基本跟平时模块成绩一致.当初模考时,第一次考了126,还算比较满意,毕竟还没开始苦逼看嘛,悲剧的是不管后面再怎么努力,成绩始终在1 ...
- web开发路径问题
1. web开发路径问题总结: http://www.cnblogs.com/tianguook/archive/2012/08/31/2665755.html 2. JSP/SERVLET 路径问题 ...