Html细线表格的实现 打印边框设置

简介: 在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了。               1.1          1.2                    2.1          2.2      < table> 这段代码定义了border = 1pix的表格,但实际上表格的实际边框宽度为2pix, 这是因为表格边框由:表格外边框和单元格边框两部分构成。
在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了。

<table border="1" cellspacing="0" bordercolor="#000000" width = "80%">
     <tr>
         <td>1.1</td>
         <td>1.2</td>
     </tr>
     <tr>
         <td>2.1</td>
         <td>2.2</td>
     </tr>
< table>

这段代码定义了border = 1pix的表格,但实际上表格的实际边框宽度为2pix, 这是因为表格边框由:表格外边框和单元格边框两部分构成。
那么如何定义一个细线表格(实际边宽为1pix) 呢?

1. 使用 cellspacing和背景色技术:
< table border="0" cellspacing="1" bgcolor="#000000" width = "80%">
     <tr bgcolor="#ffffff">
         <td>1.1</td>
         <td>1.2</td>
     </tr>
     <tr bgcolor="#ffffff">
         <td>2.1</td>
         <td>2.2</td>
     </tr>
< table>

2.使用border-collapse属性:
< table border="1" cellspacing="0" bordercolor="#000000" width = "80%" style="border-collapse:collapse;">
     <tr>
         <td>1.1</td>
         <td>1.2</td>
     </tr>
     <tr>
         <td>2.1</td>
         <td>2.2</td>
     </tr>
< table>

提醒: 对于通过方法1制作出来的细线表格,在打印时可能会出现表格边框打印不出来的问题。 而方法2就没有这个问题,推荐使用。
目录
相关文章
N..
|
1月前
|
前端开发 开发者
HTML表格
HTML表格
N..
11 1
|
1月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
49 0
|
1天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
6 1
|
1月前
|
移动开发 HTML5
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
11 0
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0
|
1月前
|
前端开发
编程笔记 html5&css&js 016 HTML表格
编程笔记 html5&css&js 016 HTML表格
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
26 0
|
定位技术 安全 JavaScript
在html中如何去掉热点点击后的边框
找了好多方法,以下的方法是最有效地,只要加上这句就行了: onFocus="this.blur()" 例: 注:这种方法在ie下没有问题,不会再出现那个边框了,但是在火狐下还是会有条小虚线,至于如何解决火狐的方法我还没有找到,感觉是不是需要用js来控制!     html...
1006 0
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
7天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据