jQuery技术

HTML表格边框的设置小技巧

字号+ 作者:H5之家 来源:H5之家 2015-10-14 14:34 我要评论( )

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

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

·上一篇:PS教程:调制人物的淡紫彩妆效果
·下一篇:最好的真正解决下拉菜单被flash挡住的解决方法

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • snabbt.js 强大的jQuery动画库插件 -HTML5功能

    snabbt.js 强大的jQuery动画库插件 -HTML5功能

    2016-01-19 11:05

  • Jquery学习,一道笔试题:关于表格【最近记】

    Jquery学习,一道笔试题:关于表格【最近记】

    2016-01-18 11:02

  • jQuery的ready方法详解

    jQuery的ready方法详解

    2016-01-16 11:21

  • 学习JQUERY,写的简单下拉菜单!

    学习JQUERY,写的简单下拉菜单!

    2016-01-16 09:04

网友点评
2