对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。

一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:

ID NAME GENDER
1001 mike male

可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,大家看到的宽应该是<td>之间有间隙所致。因此只需 要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:

ID NAME GENDER
1001 mike male

但是,好像宽度还是没有我们想象的那样:只有一个像素的宽,其实,上图大家看到的其实是两个像素的宽,为什么呢,这是因为<td>之间的边框没有重合所致。修改表格的border-collapse属性即可,

即<table border="1px" cellspacing="0px" style="border-collapse:collapse">

ID NAME GENDER
1001 mike male

再给表格加个颜色,<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">

ID NAME GENDER
1001 mike male

如下面所示

 <table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
<tr bgcolor="#ADCCF5" align="center">
<td width="5%" height="30">编号</td>
<td width="50%" height="30">标题</td>
</tr>
<tr>
<td width="5%" height="30"></td>
<td width="50%" height="30"></td>
</tr>
</table>

其中tr是行,td是列。

HTML表格边框的设置小技巧-表格的更多相关文章

  1. HTML表格边框的设置小技巧

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...

  2. (转)HTML表格边框的设置小技巧

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...

  3. css学习の第六弹—样式设置小技巧

    一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...

  4. html 表格边框的设置

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  5. Xshell远程连接的具体操作和Xshell多会话设置小技巧

    前几天给大家分享了Xshell的安装教程,今天给大家分享如何在Xshell中进行远程连接,并且分享一下如何设置一条命令可以发送多个终端,这里以Xshell6为例进行说明,具体的教程如下. 1.依次点击 ...

  6. 超 Nice 的表格响应式布局小技巧

    今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...

  7. 从零开始学习html(十五)css样式设置小技巧——下

    六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...

  8. CSS设置小技巧

    水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...

  9. CSS样式设置小技巧

    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...

随机推荐

  1. WPF中静态引用资源与动态引用资源的区别

    WPF中静态引用资源与动态引用资源的区别   WPF中引用资源分为静态引用与动态引用,两者的区别在哪里呢?我们通过一个小的例子来理解. 点击“Update”按钮,第2个按钮的文字会变成“更上一层楼”, ...

  2. ReactiveX序列——RxSwift 浅析

      ReactiveX序列——RxSwift Swift是苹果公司新推出的一门现代化的编程语言,并且将其开源出来了,Swift具有很多的优点,这也使得这门语言推出的短时间引起了很大反应的原因,在最近的 ...

  3. 学习笔记——观察者模式Observer

    观察者模式,当事件发生时,调用相应观察者的方法进行“通知”.Subject中使用一个数据结构存储需要通知的观察者对象,执行Notify时,执行所有观察者的Update方法.

  4. Light OJ 1006 - Hex-a-bonacci

    题目链接:http://acm.hust.edu.cn/vjudge/contest/121396#problem/G http://lightoj.com/volume_showproblem.ph ...

  5. android性能优化优秀文章

    郭霖最近整理的文章: 合理管理内存 分析编码过程中如何避免过多内存占用,以及如何实现高性能的内存使用. 尽可能使用intentService; 当界面不可见时释放内存; 当内存紧张时释放内存; 避免b ...

  6. 删除正在登录的SQL账号

    exec sp_who '用户名' kill @spid sp_droplogin 用户名

  7. ArrayList遍历的同时删除--- 删除还是用迭代器的比较好,其它的都会有问题.

    http://javag.iteye.com/blog/403097 ArrayList遍历的同时删除-- 删除还是用迭代器的比较好,其它的都会有问题.     博客分类: 随笔 Javathread ...

  8. 剑指offer之有序二维数组查找

    大多数人注意到元素是行列有序的,会马上想到对每行(或列)进行二分查找,每行(或列)需要logN时间,N行(或列)共需要NlogN时间,很容易写出如下代码 1 2 3 4 5 6 7 8 9 10 11 ...

  9. 浅谈ssh(struts,spring,hibernate三大框架)整合的意义及其精髓

    hibernate工作原理 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Sesssion 4.创建事务Transation 5.持久化操作 6.提 ...

  10. JSP标准标签库(JSTL)--XML标签库 x

    ³在开发中XML解析的操作是非常烦琐的,幸运的是在JSTL中专门提供了用于XML解析的操作,这样用户就可以不用费力的去研究SAX或DOM等操作的使用,就可以轻松的进行XML文件的解析处理.  XML标 ...