于表格加边框都见面起不同之题材。给表格加边框都见面并发不同的问题。

一般的话,给表格加边框都见面油然而生不同之题目,以下是让表格加边框后呈现比较好之艺术

Html-浅谈什么是吃table加边框,html-table

相似的话,给表格加边框都见面面世不同的问题,以下是被表格加边框后见比较好的主意

图片 1

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 2

但是根据不同的消有时候我们得不同之体制,在此地自己就是影响表格边框的要素,做有总与分析

无异于、 <table border=”1″> 表格边框

如图:图片 3,也便是border=1,意思就是是让表格的诸一格,及边框加上1像素的边框

 

其次、 <table border=”1″ cellspacing=”0″> cellspacing单元格间距

如图:图片 4此刻表格大小也:200*118px

 

老三、<table border=”1″ cellspacing=”0″
cellpadding=”0″> cellpadding单元格边距

如图:图片 5 这时表格大小也:200*110px

 

季、去丢表格中table的有着属于性值,当于css中给table设置{border: 1px
solid #151515}

如图:图片 6其一时我们发现,css中的border其实就是深受表格加了一个外乡框而曾

 

五、border-collapse: collapse
边框合并,该属性设置表格的边框是否受联合为一个纯的边框,还是造型在正式的
HTML 中那么分开显示

本条时要我们只是怀念为表格整体加边框,并且不需边距和间隔,其实我们仅仅需要这样写:

图片 7

 <style>
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
    </style>

    <table border="1">
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 8

如图:图片 9(Google)图片 10(firefox)

 

六、我们在上面的希冀中可清楚看见,两独浏览器所分析边框不同。但是事实上她们是平的。他们又还吃边框加了颜色,但是出于我们td和th默认有一个默认的水彩,而我们这里没于他们添加样式去蒙默认的黑色线条,而致了火狐中起的状态,其实这个情况在谷歌中呢发生,只是不明朗,其分析的黑色默认线条被我们的颜料以在了点,你要仔细查看或会意识发黑色边条出现,这个时候我们只有待为th和td加上颜色样式即可

table tr th, table tr td { border-color:#b6ff00; }

如图:图片 11(Google)图片 12(firefox)

 

七、从地方,仔细看,其实还是碰头意识未合拍,谷歌似乎外边框更深了,这实质上要因为,我们同开始在table上面加了border=1的缘由,因为自身即为table加了一个默认的黑色线条样式,就是咱地方说的,th和td以及table都来默认的黑色边线,因此一旦欲彻底解决这个题目,让边框可以健康显示,应该这样写:

图片 13

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 14

 

 

总结一下:

Html中table的属性:

border= “1”:给整个表格(包括表格和每一个单元格)加上1像素之黑色边框,

其二相同于css中的: table,table tr th, table tr td { border:1px solid
#0094ff; }

 

cellpadding=“0”:单元格边距等于0,其默认值为1px,

彼平于css中的:{padding:0;}

 

cellspacing=”0″:单元格间距等于0,其默认值为2px,

其同于css中的:border-collapse:
collapse(边框合并),但与此同时未完全相同,cellspacing仅间隔,而border-collapse使贴近的边线合并成一条边线,也就是避免了cellspacing中边线重合造成边线加粗的题材。所以在这里不提倡用html属性设置表格边框时将cellspacing设置为0,,如果你指望他等于0,更提倡用css样式属性的方去装表格的边框,并使border-collapse:
collapse去联合边线,而休是拿cellspacing设置为0,造成重合边线加粗的题目。

 

总结来说,给表格加边框,有个别种艺术:

1、Html属性,行内加,边框默认为黑色

图片 15

<table border="1" cellpadding="2" cellspacing="0" >
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 16

如图:图片 17,这里就可以看到自我刚所说之重合边线加粗的题材,而下面的主意尽管明确不会见如此了

 

2、Css样式,可以自定义你喜爱的颜色,大小,样式:

图片 18

 <style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}   
    </style>

    <table >
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 19

如图:图片 20

经此总结,我意识众多早晚我都误用了表边框的过多物,实际上,用第一种艺术的当儿就管需用第二种植方式,两种植方法混合在一起使用就会见并发自前面说过多问题。

作者:leona

初稿链接:http://www.cnblogs.com/leona-d/p/5950280.html 

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意要保留这个段子声明,且在文章页面明显位置被起原本文链接

http://www.bkjia.com/HTML5/1234461.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1234461.htmlTechArticleHtml-浅谈如何正确给table加边框,html-table
一般的话,给表格加边框都见面出现不同之问题,以下是让表格加边框后展现比较好之法子
style ta…

图片 21

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 22

不过根据不同之待有时候我们用不同的体,在此我就是影响表格边框的因素,做片总与剖析

同一、 <table border=”1″> 表格边框

如图:图片 23,也便是border=1,意思就是是于表格的各级一格,及边框加上1像素的边框

 

次、 <table border=”1″ cellspacing=”0″> cellspacing单元格间距

如图:图片 24此时表格大小也:200*118px

 

老三、<table border=”1″ cellspacing=”0″
cellpadding=”0″> cellpadding单元格边距

如图:图片 25 这时表格大小也:200*110px

 

季、去丢表格中table的所有属于性值,当在css中被table设置{border: 1px
solid #151515}

如图:图片 26这个时候我们发现,css中之border其实就是叫表格加了一个外地框而曾

 

五、border-collapse: collapse
边框合并,该属性设置表格的边框是否被统一为一个单一的边框,还是造型在正规的
HTML 中那么分开显示

此时段要我们只是怀念被表格整体加边框,并且不待边距和距离,其实我们只是需要这样形容:

图片 27

 <style>
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
    </style>

    <table border="1">
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 28

如图:图片 29(Google)图片 30(firefox)

 

六、我们以方的觊觎中得以清晰看见,两只浏览器所分析边框不同。但是实际上他们是同样的。他们还要都深受边框加了颜色,但是由于我们td和th默认有一个默认的颜色,而我辈这边没有受他俩添加样式去挂默认的黑色线条,而导致了火狐中起的情事,其实这个景在谷歌中也起,只是不强烈,其分析的黑色默认线条被我们的颜料为在了上面,你只要条分缕析查看或会意识有黑色边条出现,这个时咱们无非待吃th和td加上颜色样式即可

table tr th, table tr td { border-color:#b6ff00; }

如图:图片 31(Google)图片 32(firefox)

 

七、从者,仔细看,其实还是会意识未合拍,谷歌似乎外边框更深了,这实质上还是为,我们一致开始以table上面加了border=1的原因,因为自己即给table加了一个默认的黑色线条样式,就是咱地方说之,th和td以及table都发生默认的黑色边线,因此若急需彻底解决这个题目,让边框可以正常显示,应该如此形容:

图片 33

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 34

 

 

总结一下:

Html中table的属性:

border= “1”:给通表格(包括表格和各个一个单元格)加上1像素之黑色边框,

其二同样于css中之: table,table tr th, table tr td { border:1px solid
#0094ff; }

 

cellpadding=“0”:单元格边距等于0,其默认值为1px,

其同于css中的:{padding:0;}

 

cellspacing=”0″:单元格间距等于0,其默认值为2px,

该平于css中的:border-collapse:
collapse(边框合并),但以无完全相同,cellspacing仅间隔,而border-collapse使近的边线合并成为一长条边线,也不怕避免了cellspacing中边线重合造成边线加粗的题目。所以当此不提倡使用html属性设置表格边框时将cellspacing设置为0,,如果您想他等于0,更提倡使用css样式属性的法门去装表格的边框,并采用border-collapse:
collapse去联合边线,而未是将cellspacing设置为0,造成重合边线加粗的题材。

 

小结来说,给表格加边框,有三三两两栽艺术:

1、Html属性,行内加,边框默认为黑色

图片 35

<table border="1" cellpadding="2" cellspacing="0" >
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 36

如图:图片 37,这里就可以看到本人刚所说的重叠边线加粗的题目,而下面的办法就一目了然不见面如此了

 

2、Css样式,可以起定义你爱的水彩,大小,样式:

图片 38

 <style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}   
    </style>

    <table >
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

图片 39

如图:图片 40

经此总结,我意识众多上自己还误用了表边框的很多物,实际上,用第一种办法的时节就是随便需下第二种植艺术,两种植艺术混合在一起使用就会见油然而生自前说过多问题。

作者:leona

初稿链接:http://www.cnblogs.com/leona-d/p/5950280.html 

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意要保留这个段子声明,且当文章页面明显位置被起原先文链接

相关文章