HTML中表格边框不显示怎样实现？教你两个方法

HTML中表格边框不显示怎样实现？我们在使用table、th、td元素实现表格的时候，是默认有边框的，那么我们先要去除这个边框要怎样做呢？接下来给大家分享两个方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

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

我们有下面一个表格：

table border="1">
    
	tr>
    
		th>
    姓名/th>
    
		th>
    年龄/th>
    
	/tr>
    
	tr>
    
		td>
    Peter/td>
    
		td>
    20/td>
    
	/tr>
    
	tr>
    
		td>
    Lois/td>
    
		td>
    20/td>
    
	/tr>
    
/table>
    

怎么将这个表格的边框隐藏起来？下面介绍一下方法：

1、给table、th、td元素添加border: none; 样式

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8">
    
	/head>
    

	body>
    
table border="1" style="border: none;
    ">
    
	tr>
    
		th  style="border: none;
    ">
    姓名/th>
    
		th  style="border: none;
    ">
    年龄/th>
    
	/tr>
    
	tr>
    
		td style="border: none;
    ">
    Peter/td>
    
		td style="border: none;
    ">
    20/td>
    
	/tr>
    
	tr>
    
		td style="border: none;
    ">
    Lois/td>
    
		td style="border: none;
    ">
    20/td>
    
	/tr>
    
/table>
    
	/body>
    
/html>
    

2、给table元素添加border-color: transparent; 样式

table border="1" style="border-color: transparent;
    ">
    
	tr>
    
		th>
    姓名/th>
    
		th>
    年龄/th>
    
	/tr>
    
	tr>
    
		td>
    Peter/td>
    
		td>
    20/td>
    
	/tr>
    
	tr>
    
		td>
    Lois/td>
    
		td>
    20/td>
    
	/tr>
    
/table>
    

现在大家对于HTML中表格边框不显示的方法应该都清楚了吧，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多大家可以关注网络其它的相关文章。

文本转载自PHP中文网

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！