HTML5中Table如何消除边框(TD)间距


用html5制作表格时,只是简单的想要实现表格内有边框,结果出现了双边框和单元格**(有间距)的问题。本经验为大家分享一下我的处理过程及解决方法。

方法/步骤

首先为大家展示一下最原始的代码和效果。直接在table中用td划分的表格会默认隐藏边框。

HTML5中Table如何消除边框(TD)间距

HTML5中Table如何消除边框(TD)间距

接下来我们用css来增加样式,为table增加边框。

table {

border: 1px solid #804040;

}

修改后的效果是整个table增加了外边框,table内还是没有边框。

HTML5中Table如何消除边框(TD)间距

HTML5中Table如何消除边框(TD)间距

然后我们用css来为td增加边框。

table td {

border: 1px solid #804040;

}

修改后的效果是每个td都增加了边框,显示效果为table全部显示单边框。

HTML5中Table如何消除边框(TD)间距

HTML5中Table如何消除边框(TD)间距

接下来我采用了网上普遍推荐的方法,即td显示左上两个边,table显示右下两个边,进而实现但边框表格效果。

table {

border-right: 1px solid #804040;

border-bottom: 1px solid #804040;

}

table td {

border-left: 1px solid #804040;

border-top: 1px solid #804040;

}

修改后的效果符合预期,但是内部边框显示不连续,原因是内部单元格之间有间距。

HTML5中Table如何消除边框(TD)间距

HTML5中Table如何消除边框(TD)间距

最后,我们在table中增加css代码:border-collapse:collapse;用来消除单元格间距。

即:

table {

border-right: 1px solid #804040;

border-bottom: 1px solid #804040;

border-collapse:collapse;

}

table td {

border-left: 1px solid #804040;

border-top: 1px solid #804040;

}

修改后单元格间距消除,完美实现效果。

HTML5中Table如何消除边框(TD)间距

HTML5中Table如何消除边框(TD)间距

以上是我的处理方法,希望能帮助到大家。

标签: 边框, 间距
分类: 数码&电脑
时间: 2015-09-16

相关文章

  1. HTML5开初级发经验分享

    本经验为大家分享我最近做的html5的手机网页,希望能对您有所帮助.新手操作,高手请无视. 工具/原料 chrome 方法/步骤 首先为大家展示一下我的目标(图一)和我一天的成果(图二),由于刚上手,很多东西都不懂,所以 ...
  2. HTML5表格基础语法

    学习目标: 1.表格的基本格式 2.<table>标签下的常用属性 3.<table>标签下的边框设置 4.<tr><th><td>标签下的常用属性 5.拆分与 ...
  3. html中将table 样式分离出来

    我们需要经常需要使用table 进行数据的显示与布局,但是table中的样式直接写到页面中难以管理,而且不利于重复使用提高开发效率,这里介绍一下如何使用css管理的table 样式 并且重用. 在Dreamweaver ...
  4. HTML表格边框变细的css样式

    表格在HTML中很多情况的默认样式太难看,设计人员就需要自己设置,在这我和大家分享下表格边框变细的经验,适合css初学者. 工具/原料 Adobe Dreamweave 软件 方法/步骤 首先新建表格,代码如下: < ...
  5. Dreamweaver如何制作table细线表格边框CSS样式

    平时我们在用Dreamweaver CC制作网页的时候经常会用到表格规范一些数据,但是默认的表格边框比较粗,不够美观,那么我们怎么才能快速的制作细线表格边框哪.下面我们通过CSS内嵌样式的方式来制作细线表格边框. 工具/ ...
  6. 怎么用CSS设置html中的表格边框样式

    table表格边框如果不做设置,出来很不美观. 方法/步骤 一个普通的表格如下: 相关设置 单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间 ...
  7. CSS和TABLE网页布局的区别

    基于WEB标准的网站设计的核心在于如何使用众多WEB标准中的各项技术来达到表现与内容的分离,即网站的结构.表现.行为三者分离.只有真正实现了结构分离的网页设计,才是真正意义上的符合WEB标准的网页设计.不排除为了达到表现 ...
  8. html代码基础知识讲解

    字体语法: align=center 字体居中 align=right 字体居右 align=left 字体居左 align=up 字体居上 align=down 字体居下 <"> <&quo ...
  9. 常用语法html5

    _parent 在上一级窗口中打开.一般使用框架页会经常使用 _blank 在新窗口中打开 _self 在同一个帧或窗口中打开,默认 属性 描述 HTML5标准 src 图像的源文件 alt 提示文字 width.hei ...
  10. HTML快速入门【1】

    工具/原料 文本编辑器 IE浏览器 HTML的文档基本结构如下:<html><head>...</head><body>...</body></html& ...
  11. 传统的网页结构及布局方法

    此处介绍的是传统的网页结构组成部分,以及基本的布局方法. 工具/原料 电脑 网页制作工具Dreamwerver CS6 网页组成部分 从上而下,传统的经典网页可以分为基本的页头.主体.页尾三个部分,各个部分又可以细分. ...
  12. HTML标签【②学习笔记之HTML】

    1.个人整理,方便今后使用. 2.纵观大多数网站源码,总结最常见的几个HTML标签:<div><a><p><table><tr><td><br ...
  13. 怎样美化(装扮)博客

    不少朋友喜欢玩博,特别是看到别人制作的精美博客,非常羡慕,想自己也试试.但当看到密密麻麻的代码,又觉得头疼. 美化(装扮)博客,就要学习一点代码知识.所谓代码,就是HTML语言.说白了也是构成博客文档的主要语言.其实学习 ...
  14. Dreamweaver如何制作table细线表格边框CSS样式2

    如何制作table细线表格边框CSS样式,这是本人王臻伟工作中的总结,非常实用,这里介绍3种table表格制作方法,推荐前面2种:1.利用表格单元格边框合并的方法:2.利用表格外边框和单元格内边框合并的方法:3.利用背景 ...
  15. Dreamweaver如何制作table细线表格边框CSS样式1

    如何制作table细线表格边框CSS样式,这是本人王臻伟工作中的总结,非常实用,这里介绍3种table表格制作方法,推荐前面2种: 1.利用表格单元格边框合并的方法: 2.利用表格外边框和单元格内边框合并的方法: 3.利 ...
  16. 如何动手写移动Web网站:[2]HTML中的表格

    工具/原料 一个文本编辑器即可, 这样就可以书写html的代码.还是推荐一个可以语法高亮的编辑器,比方说,notepad++ 表格中使用table这个标签来标识是一个表格内容. 一个完整的表格是由三部分来完成的.分别为: ...
  17. 动态边框制作方法

    边框具有装饰博文的功能.边框是多种多样的,动态边框会给你不一样的感觉.这里介绍动态边框的制作方法. 工具/原料 博客 一组代码: <TABLE border=0 cellSpacing=5 cellPadding= ...
  18. 如何使用HTML 中的表格代码table,tr,td

    如何使用HTML 中的表格代码table,tr,td. 方法/步骤 表格由 <table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> ...
  19. FrontPage编程,网页中如何给table加边框颜色

    网页的漂亮程度由颜色决定,那么你知道在网页中如何给table加上边框颜色吗? 工具/原料 FrontPage编程软件 方法/步骤 打开编程软件,并新建一个空白的网页. 在空白的页面中插入表格,功能选项在顶部的表格那一栏中 ...