重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
table tr td /td/tr 1.把td改成td style="border:1px solid red"border后面的第一个参数是边框像素,第二个是边框样式(solid:实线),第三个是边框的颜色2.通过外部css改变td{ border:1px solid red;} 如果你是要在网页中动态的改变边框样式的话,一般配合javascript来实现(比如开始边框颜色为黑色,把鼠标放上去变为红色)
成都创新互联于2013年成立,先为石鼓等服务建站,石鼓等地企业,进行企业商务咨询服务。为石鼓企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
边框样式可以
CSS 参考手册
定义和用法border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
border-widthborder-styleborder-color如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。
默认值:not specified继承性:no版本:CSS1JavaScript 语法:object.style.border="3px solid blue"实例
设置4 个边框的样式:
p { border:5px solid red; }TIY
浏览器支持所有浏览器都支持 border 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值值描述border-width规定边框的宽度。参阅:border-width 中可能的值。border-style规定边框的样式。参阅:border-style 中可能的值。border-color规定边框的颜色。参阅:border-color 中可能的值。
用CSS设置html中的表格边框样式用border设置就可以。
方法如下:
1、参考代码
body
table
tr
td胖迪/td
td胖迪/td
td胖迪/td
/tr
tr
td胖迪/td
td胖迪/td
td胖迪/td
/tr
tr
td胖迪/td
td胖迪/td
td胖迪/td
/tr
/table
style
table {
'设置边框1像素 实线 红色
border:1px solid red;
}
td{
'设置边框1像素 实线 黄色
border: 1px solid yellow;
}
/style
/body
为table的tr、td标签设置边框属性即可
选择器可以使用:
table tr, table td
边框属性名为:border
style
table td {
border: 1px solid #000;
}
/style
用CSS设置表格的每个单元格,边框为1像素的黑色实线
link href="y5u.css" rel="stylesheet" type="text/css" //headbodytable width="363"trtd width="355"img src="模板.jpg" width="333" height="24" //li/td/trtrtdlia href="#"/a北约希望与俄罗斯建立“具有建设性的”关系/li/td/trtrtdlia href="#"/a北约希望与俄罗斯建立“具有建设性的”关系/li/td/trtrtdlia href="#"/a北约希望与俄罗斯建立“具有建设性的”关系/li/td/trtrtdlia href="#"/a北约希望与俄罗斯建立“具有建设性的”关系/li/td/trtrtdlia href="#"/a北约希望与俄罗斯建立“具有建设性的”关系/li/td/trtrtdlia href="#"/a北约希望与俄罗斯建立“具有建设性的”关系/li/td/tr/table/body/html编辑对应的CSS代码,在表格加边框颜色(黑色)。
border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示。
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:
-- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;
-- collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;
-- inherit:规定应该从父元素继承 border-collapse 属性的值。
双线表格边框的实现
html代码:
table
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
/table
css代码:
table,table td{
text-align: center;
border: 1px solid #000;
border-collapse:separate;
}
table td{
padding: 10px 30px;
}
表格边框的双线样式其实很简单,只要同时设置表格外边框和table里的每个单元格的边框,就可以实现了。
因为separate是默认值,就算是不设置border-collapse:separate;表格也会呈现双线效果。
我们主要是来看看border-collapse属性合并边框,实现单线边框的方法,html代码一样,只需设置css样式:
css代码:
table,table tr td {
border: 1px solid #000;
text-align: center;
border-collapse: collapse;
}table tr td {
padding: 10px 30px;
}
单线边框的实现也很简单,它是在双线样式的基础上,设置border-collapse: collapse;
把相邻的两个table边框合并成一个,使得相邻的两条线并在一起,边框就以单线的形式显示了。
总结:表格边框的无论是单线边框样式,还是双线边框样式都在前端页面中应用广泛,大家可以根据自己