对于很多初学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. Netty版本升级血泪史之线程篇

    1. 背景 1.1. Netty 3.X系列版本现状 根据对Netty社区部分用户的调查,结合Netty在其它开源项目中的使用情况,我们可以看出目前Netty商用的主流版本集中在3.X和4.X上,其中 ...

  2. android的原理,为什么不需要手动关闭程序

    转自android的原理,为什么不需要手动关闭程序 不用在意剩余内存的大小,其实很多人都是把使用其他系统的习惯带过来来了. Andoird大多应用没有退出的设计其实是有道理的,这和系统对进程的调度机制 ...

  3. Android 小闹钟程序

    最近写了个闹钟的程序,看到SharedPreferences在一个程序中可以共享数据,SharedPreferences是一个轻量级的键值存储机制,只可以存储基本数据类型.我就拿来用用,没想到Shar ...

  4. js中的变量提升

    var v='Hello World'; (function(){ alert(v); var v='I love you'; })() 会出现alert出来的是undefined,原因是因为在函数域 ...

  5. WordPress ‘get_allowed_mime_types’函数安全漏洞(2)

    漏洞名称: WordPress ‘get_allowed_mime_types’函数安全漏洞 CNNVD编号: CNNVD-201309-169 发布时间: 2013-09-13 更新时间: 2013 ...

  6. 【fs】

     先判断是否存在再删除

  7. DirectDraw

    一.DirectDraw接口 DirectDraw接口图如下: 1.IUnknown:所有COM对象都必须从这个基本接口派生 2.IDirectDraw:这是开始使用DirectDraw时必须创建的主 ...

  8. StoryBoard 的使用

    简单入门: http://my.oschina.net/plumsoft/blog/53886 详细操作:http://www.cnblogs.com/buro79xxd/archive/2012/0 ...

  9. OracleL

    DDL  : Data Definition Language (DDL) statements are used to define the database structure or schema ...

  10. fastjson 的简单说明及使用

    fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发. 各个版本jar包下载地址:https://repo1.maven.org/maven2/ ...