css表格设置边框的方法:1、使用border属性给table元素添加边框,语法“table{border:宽度 样式 颜色;}”;2、使用border属性给td元素添加边框,语法“td{border:宽度 样式 颜色;}”。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

默认表格是没有边框的

<table>
	<tr>
		<td>商品</td>
		<td>价格</td>
	</tr>
	<tr>
		<td>T恤</td>
		<td>¥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>¥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>¥150</td>
	</tr>
</table>

我们可以通过css来给表格添加边框。

方法1:只对表格table标签设置边框

只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。

语法:

table{
	border: 1px solid red;
}

效果图:

方法2:对td设置边框

对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。

语法:

td{
border: 1px solid red;
}

效果图:

如果觉得双线效果不好看。可以设置:

table {
        border-collapse: collapse;
        
}

为表格(table)设置合并边框模型(合并边框),效果图:

(学习视频分享:css视频教程)

以上就是css怎么给表格设置边框的详细内容!

 
  • 本站名称:清风资源网
  • 本站永久地址:www.mcoxn.com
  • 本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,请大家谅解!
  • 本站资源解压密码一般都为www.mcoxn.com如发现链接失效,请联系在线客服更新。
  • 本站所有代码模板仅供学习交流使用,请勿用于商业用途,及违法侵权行为使用均与本站无关。
  • 源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。
  • 本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
  • 本站所有资源来源于公开互联网搜集和网友投稿提供,仅供个人学习研究使用,若本站收录的内容对您的版权或者利益造成损害,请提供相应的资质证明发邮件至kakbga@qq.com我们将于3个工作日内予以删除。