怎么用CSS设置html中的表格边框样式

怎么用CSS设置html中的表格边框样式,第1张

border-style:边框样式

边框样式值如下:

none :无边框。与任何指定的border-width值无关

hidden :隐藏边框。IE不支持

dotted :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为点线。否则为实线(常用)

dashed :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为虚线。否则为实线(常用)

solid :实线边框(常用)

double :双线边框。两条单线与其间隔的和等于指定的border-width值

groove :根据border-color的值画3D凹槽

ridge :根据border-color的值画菱形边框

inset :根据border-color的值画3D凹边

outset :根据border-color的值画3D凸

呵呵

当然会

因为你的相邻的边框颜色不同

他们的重叠处就会一半是其中一种颜色

而另一半是另一种颜色!

所以才会是斜的了

css就是用这个原理来做出三角型的!

1、相关设置

单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。

具体代码如下:

<table border='1'cellspacing="0" cellpadding="0" > <tr> <td width="200">1</td> <td width="200">2</td> <td width="200">3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>中国</td> <td></td> <td></td> </tr> </table>

2、文字居中

代码如下:

<style type="text/css">onecenter{text-align:center;width:200px;}</style><table border='1'cellspacing="0" cellpadding="0" > <tr> <td class='onecenter'>1</td> <td class='onecenter'>2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter'> b</td> <td class='onecenter' > c</td> </tr > <tr> <td class='onecenter' ></td> <td class='onecenter' ></td> <td class='onecenter' ></td> </tr> </table>

3、每一个表格都是一个完整的方框,如果想要线条更细。

看如下代码:

<style type="text/css">onecentertext-align:center;width:200px;height:50px;}#sebackground-color:#006699 ;padding:20px;color:#FFF;}</style><table border='1'cellspacing="0" cellpadding="20" > <tr> <td class='onecenter'>1</td> <td class='onecenter' style='border-left:0px;border-right:0px;' >2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter' style='border:0px'> b</td> <td class='onecenter' > c</td> </tr > <tr id='se'> <td class='onecenter' ></td> <td class='onecenter' ></td> <td class='onecenter' ></td> </tr> </table>

你这是写给table的样式吧?你还得给td写,关键是td,否则不会有边框的。你试试在css里加上如下:

td{

border-left:1px solid #ccc;

border-right:1px solid #ccc;

}

这样的话,第一个文字的前面和最后一个文字的后面也会有边框,你再写一个样式,去掉它们边框就行了。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/12180391.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存