最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】如何写html的table代码,以实现实体细边框的效果

CSS crifan 6923浏览 0评论

【背景】

对于html中的table,默认的效果,不论是在普通的网页中,还是此处的wlw中,都是这种:

灰色的,且比较粗的边框,

default html table

 

对此,很不喜欢,希望弄成这样的,细的,实体的边框:

expected slim border table

【折腾过程】

1.此处是在wlw中。

去看了看各自对应的html代码:

灰色的粗的边框的html:

<table cellspacing="0" cellpadding="2" width="800" border="1"><tbody>
    <tr>
      <td valign="top" width="800">特殊值True和None更让人感兴趣。 True匹配给定属性为任意值的标签,None匹配那些给定的属性值为空的标签。</td>
    </tr>
  </tbody></table>

细的实体的边框的html:

<table class="MsoTableGrid" style="border-top: medium none; border-right: medium none; border-collapse: collapse; border-bottom: medium none; border-left: medium none; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 1184; mso-padding-alt: 0in 5.4pt 0in 5.4pt" cellspacing="0" cellpadding="0" width="531" border="1"><tbody>
    <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-yfti-lastrow: yes">
      <td style="border-top: windowtext 1pt solid; border-right: windowtext 1pt solid; border-bottom: windowtext 1pt solid; padding-bottom: 0in; padding-top: 0in; padding-left: 5.4pt; border-left: windowtext 1pt solid; padding-right: 5.4pt; mso-border-alt: solid windowtext .5pt" valign="top" width="529">
        <p class="MsoNormal" style="margin: 0in 0in 0pt"><span lang="ZH-CN" style="font-family: ; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: 微软雅黑"><font face="宋体">特殊值</font></span>True<span lang="ZH-CN" style="font-family: ; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: 微软雅黑"><font face="宋体">和</font></span>None<span lang="ZH-CN" style="font-family: ; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: 微软雅黑"><font face="宋体">更让人感兴趣。</font></span> True<span lang="ZH-CN" style="font-family: ; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: 微软雅黑"><font face="宋体">匹配给定属性为任意值的标签,</font></span>None<span lang="ZH-CN" style="font-family: ; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: 微软雅黑"><font face="宋体">匹配那些给定的属性值为空的标签。</font></span></p>
      </td>
    </tr>
  </tbody></table>

2.想办法,手动改改,看看能否把:

灰色的粗的边框

改为:

细的实体的边框

发现有点繁琐。

3.google搜:

html table slim border

找到:

How to create a table with a thin (1 pixel) border

其是用css全局控制的:

<head>
<style type="text/css">
 table.mystyle
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: solid;
}

.mystyle td, .mystyle th
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    border-style: solid;
}
</style>
</head>
<body>
 <table class="mystyle">
  <tr>
   <th>One</th><th>Two</th><th>Three</th>
  </tr>
  <tr>
    <td>Cell 1,1</td><td>Cell 1,2</td><td></td>
  </tr>
  <tr>
    <td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td>
  </tr>
 </table>
</body>

这样的控制,等抽空去网站上弄个全局的css再说。

4.参考:

html table slim border

去试试:

<table style="border:solid 1px;"><tbody>
    <tr>
      <td valign="top" width="800">特殊值True和None更让人感兴趣。 True匹配给定属性为任意值的标签,None匹配那些给定的属性值为空的标签。</td>
    </tr>
  </tbody></table>

看看效果,结果变成虚线边框了:

table border become double slash

并且wlw中切换到html源码,也变成了:

<table style="border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-left: 1px solid"><tbody>

5.再去试试:

<table frame="void" rules="rows" border="1"><tbody>
    <tr>
      <td valign="top" width="800">特殊值True和None更让人感兴趣。 True匹配给定属性为任意值的标签,None匹配那些给定的属性值为空的标签。</td>
    </tr>
  </tbody></table>

效果为:

border can not see

完全看不见边框了。

6.再去试试:

<table style="border:1px solid #cccccc;"><tbody>

效果为:

still point slash border style

即,还是和之前的一样的,虚线边框。

注意到,html也自动被wlw处理变为:

<table style="border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid"><tbody>

但是,打算发布到我的wordpress网站上,看看firefox显示出来的效果如何。

结果还是无边框的效果:

pulished still no border

同时,正常的,有边框的效果是:

published normal with border

7.参考:

Super-thin table borders in html?

去试试:

<table cellspacing="0" cellpadding="0" width="800" border="1" bgcolor="#000000"><tbody>

效果为:

background all black

即,全黑背景,根本不合适。

8.再去试试:

<table cellspacing="0" cellpadding="0" width="800" border="1"><tbody>

效果,和最原始的没区别。

9.还是参考上面的那个全局css控制的,去试试:

<style type="text/css">
 table.mystyle
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: solid;
}

.mystyle td, .mystyle th
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    border-style: solid;
}
</style>

...
<table class="mystyle"><tbody>
    <tr>
      <td valign="top" width="800">特殊值True和None更让人感兴趣。 True匹配给定属性为任意值的标签,None匹配那些给定的属性值为空的标签。</td>
    </tr>
  </tbody></table>

效果是,在wlw中,没效果。

估计是,需要在全局的css中设置一下,才可以的。

这方面的折腾,就只有有空再去弄了。

 

【总结】

暂时没搞定。

但是还想像抱怨的是:

为何html设计者,最原始的表格被设计为,那个看起来就很难看的,粗体的,虚的边框,而不是直接内置默认就是细的实体的边框呢???

在我看来,至少这个是脑残的设计啊。。。

转载请注明:在路上 » 【记录】如何写html的table代码,以实现实体细边框的效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.173 seconds, using 22.15MB memory