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

对于很多初学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

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

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

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

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

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

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

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

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

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

  5. html 表格边框的设置

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

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

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

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

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

  8. CSS设置小技巧

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

  9. CSS样式设置小技巧

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

随机推荐

  1. uva 11136 - Hoax or what

    用两个优先队列来实现,因为队列只能从一头出去: 所以维护一个数组,来标记这个队列的已经出列而另外一个队列没有出列的元素: 到时候再把他们删了就行: #include<cstdio> #in ...

  2. iOS9 App Thinning(应用瘦身)功能介绍

    iOS9 发布后,产生了一个使 App Thinning 无法正常运行的 bug.在iOS9.0.2 版本中,这个 bug 已经被修复,App Thinning 已经可以正常使用.当你从应用商店(Ap ...

  3. Android 进入另外一个窗体的两种方法

    方法一: Intent intent = new Intent(); intent.setClassName(this, "com.wuyou.twoactivity.OtherActivi ...

  4. Android 使用HttpClient方式提交GET请求

    public void httpClientGet(View view) { final String username = usernameEditText.getText().toString() ...

  5. AVOIR发票的三种作用

    1. 开错了发票,应收多写了,应该抵消掉一部分应收2. 客户临时有变化,比如只买一部分产品,取消了另一部分,那么也是开AVOIR抵消了一部分应收3. 退钱给客户的时候,也要开一张AVOIR发票 注意, ...

  6. 将数组转换成List

    采用比较好的方法Collections.addAll(arrayList, arr); arrayList是一个List arr是一个数组 并且要求arrayList与arr的类型是相同的  或    ...

  7. 使用VisualStudio进行单元测试之四 顺序测试

    前文中所提到的测试都是针对一个方法进行的独立测试,即使是同事测试多个方法,他们之间也没有影响.但是在实际的生产过程中,更多的情况是方法与方法之间是存在相互的逻辑关系的,所以也就有了今天要介绍的顺序测试 ...

  8. 几款常用Eclipse java插件

    以下是我最近常用的几款Eclipse java插件: ADT Plugin https://dl-ssl.google.com/android/eclipse/ WindowBuilder Pro  ...

  9. 【转】Markus Persson:Minecraft 游戏背后的奇才

    转自酷勤网 Markus Persson是沙盒游戏Minecraft的开发者,在游戏中以Notch的名字为众多玩家所知,是游戏界绝对的巨星.美国<滚石>杂志的专栏作家David Peisn ...

  10. 2013=7=29 nyist 13题

    Fibonacci数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1 描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递归地 ...