关于html中表格边框更精细的一点分享

关于html中表格边框的一点分享

小白今天在复习html表格的标签的时候发现仅用html做的表格边框线很粗糙,然后无意间发现一个巧妙的窍门可以使html制作的表格边框线更精致一点(不采用div等什么其他方法,只用html语言)(大神可以直接pass了…)
首先来看一下直接用html制作的表格边框:粗糙的
这是对应的代码demo
< table width=“458” border=“1” cellspacing=“0” cellpadding=“8” align=“center”>
< tr>
< td>
< div align=“center”>< font color="#FF0000">border设置为最小值1,,很粗糙的边框< /font>< /div>
< /td>
< /tr>
< /table>(这个代码中border属性值已经取最小值1,可感觉边框还是没有达到想要的效果
然后再先来看下处理后的边框:
更精致点

对应的代码demo
< table width=“458” border=“0” cellspacing=“1” cellpadding=“8” align=“center” bgcolor="#000000">
< tr bgcolor="#FFFFFF">
< td>
< div align=“center”>< font color="#FF0000">border设置为0,却有较精致的边框< /font>< /div>
< /td>
< /tr>
< /table>
下面这个代码的巧妙之处在于table中设置border属性值为0,实际效果还是可以出现表格边框。
原因是table中定义了表格背景颜色#000000(黑色),且设置了cellspacing(单元格间距)为1而后又在定义行标签tr中定义了这一行背景颜色为#ffffff(白色)那么我们看到的“边框”其实就是这个值为1的单元格间距所产生的效果了^ - ^.
纯属个人兴趣的分享,不喜勿喷哦,ლ(°◕‵ƹ′◕ლ)

发布了5 篇原创文章 · 获赞 1 · 访问量 2146

猜你喜欢

转载自blog.csdn.net/front_endxiaobaia/article/details/82775791