由合并细线表格而产生的疑问与解答

Posted jaelynl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了由合并细线表格而产生的疑问与解答相关的知识,希望对你有一定的参考价值。

由合并细线表格而产生的疑问与解答

一、背景

学习CSS之前制作的表格边框效果单一,且产生对于border属性的疑问,私下查找资料、写代码举例子,做总结。

二、深度理解table 中border 的定义

如下一个简单普通表格,代码如下:

<body>
    <table  bordercolor="red"  border="1px"  width="300px" height="100px">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>
</body>

表格效果如下图1:

从代码中可以看出,使用行内式的方法给 table标签设置了 border 属性,值为1px, 除了围绕表格的边框,单元格也应用了该边框。

下面我改变 border 的属性值,看一下效果会如何变化,让 border="3px",其他值不变。

<table  bordercolor="red"  border="3px"  width="300px" height="100px">

如上效果图2, border 的值发生变化之后,表格的边框宽度变成3px,而单元格的边框仍然为1px。

经过查找资料,多次变换属性值亲自实践之后,得出一个结论:

  • border 属性规定围绕表格的边框的宽度,即外部大边框
  • border 属性会为每个单元格也应用边框,但是,如果border属性的值发生变化,那么就只有表格周围边框(外部大边框)宽度发生变化,单元格边框则仍为1px宽。这就意味着无论 border 属性值是几(0除外),单元格边框始终为1px。
  • border="0",表格边框和单元格边框均不显示。

二、疑问二:使用行内式给td添加样式 无效???

我将 border 属性添加给了 td 标签,其他不变

<table  bordercolor="blue"  width="300px" height="100px">
        <tr >
            <td border="1px" >123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>

实现效果如下图3 :

添加了 border属性的td并没有边框,,而table 中的的 bordercolor="blue" 反而实现了效果。

查资料整理后最后得出结论二:

  • table标签有border属性,而 td 和th 标签没有 border属性。
  • 不设置border属性的时候, 默认的border为3px,solid,#fff,(不同浏览器的默认宽度不一样)。在没有给 table 设置宽度的情况下,因为设置了边框颜色,所以边框显示了 。

三、使用style属性设置border 样式

只用css设置样式,样式如下:分别给table和td设置了border属性:

<style>
        table{
            border:1px solid red;/*给外边框设置1像素,红色,和td的颜色不同,便于查看*/
            width:300px;
            height: 100px;
        }
        td{
            border:3px solid blue; /*给td 设置3像素的边框,颜色为蓝色*/
        }
    </style>

实现效果如下图4:很明显,在使用行内添加属性的方式得不到的效果,style属性可以帮我实现了。并且两者的效果都完美的变成了我设置的样式,互不干扰。

  • 上接一,如实想要单独设置td的样式可以使用style属性,例如:

    表格1

  • 在以后学习了更多的css属性之后,会尽量使用css来设置样式,只有你想不到的,没有css做不到的!

四、合并单元格

在日常工作学习当中,我们一般不会见到像 图1 一样的表格(有内外边框), 也很少见到像图3那样的表格,太丑了,而且达不到统计数据预期的效果。

我们经常见到的是单线的表格,像excel那样的效果。这个时候我会想到 table 的一个属性:cellspacing。

cellspacing 设置单元格与单元格边框之间的空白间距。

当把cellspacing="0",

    <table cellspacing="0"  cellpadding="0" border="1px"  width="300px" bordercolor="blue"          height="100px" >    <!-- cellpadding="0" 设置单元格内容与单元格之间的空隙 -->
        <tr >
            <td>表格2</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>
    <br>
    <table  cellpadding="0" border="1px"  width="300px" bordercolor="blue" height="100px" >
        <tr >
            <td>表格1</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>

请看效果图6(表格2):使用cellspacing="0"的表格成功的把边框合并了,但是仔细看,发现了吗,边框的宽度已经不是1像素,而是2像素了(与表格1对比很容易看出来)。

因为他实际是把 表格边框和单元格的边框紧紧挨到一起了(就相当于两个边框相加1px+1px=2px),而不是重叠,这样 视觉上 显示边框为2像素了。

注意:这个时候就需要强大的CSS,来合并单元格。

只需一个属性border-collapse即可实现(表格3)。

<table  cellpadding="0" border="1px"  width="300px" bordercolor="blue" height="100px" style="border-collapse: collapse;" >   /*表格3*/

表格3才是真正的合并细线表格(边框的合并),合并之后边框是1px。

图6:

五、心得

学习当中随着只是知识点的增多,有时候并不能立马完全理解透,会产生各种疑问,我经过思考,把疑问列出来,一点一点的查资料、问大神、自己实践,并把解答过程总结写出来,写总结的过程就是疑问解开的过程,而且加深了自己的理解。
















































































以上是关于由合并细线表格而产生的疑问与解答的主要内容,如果未能解决你的问题,请参考以下文章

如何在表格单元格之间创建细线

table表格高级用法

如何在html的表格中加入边框线

表格和列表样式

求高手解答,vb中如何合并grid指定位置的表格?(例如:第一行的,第二行的3.4列)

网页中的表格怎样才能让他的边框显示为一条细线?