您的位置
主页 > 网站技术 > CSS/HTML > » 正文

CSS实现表格细边框的两种方法

来源: 站长圈 点击:

点评:细边框这个制作方法是必不可少的,使用css就可以轻松实现,方法还不止一个,本文为大家介绍两个不错的方法,希望对大家有所帮助!

在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。 

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>表格细边框的两种CSS实现方法</title> 

<style type="text/css"> 

/* 利用表格样式 border-collapse: collapse 实现细边框 */ 

.tab1 

width: 300px; 

height: 200px; 

border: 1px solid #ccc; 

border-collapse: collapse; 

.tab1 td, .tab1 th 

border: 1px solid #ccc; 

padding: 5px; 

/* 利用表格样式 border-spacing:0px; 和表格与单元格背景色的不同来实现细边框。 

IE7及更早浏览器不支持border-spacing属性,可以通过table的标签属性cellspacing来替代。*/ 

.tab2 

width: 300px; 

height: 200px; 

background-color: #ccc; 

border-spacing: 1px; 

.tab2 td, .tab2 th 

background-color: #fff; 

</style> 

</head> 

<body> 

第一种 (通过XHTML验证) 

<table class="tab1"> 

<thead> 

<tr> 

<th> 

表头 

</th> 

<th> 

表头 

</th> 

</tr> 

</thead> 

<tr> 

<td> 

Admin10000.com 

</td> 

<td> 

Admin10000.com 

</td> 

</tr> 

<tr> 

<td> 

Admin10000.com 

</td> 

<td> 

Admin10000.com 

</td> 

</tr> 

</table> 

第二种 (通过XHTML验证) 

<table class="tab2"> 

<thead> 

<tr> 

<th> 

表头 

</th> 

<th> 

表头 

</th> 

</tr> 

</thead> 

<tbody> 

<tr> 

<td> 

Admin10000.com 

</td> 

<td> 

Admin10000.com 

</td> 

</tr> 

<tr> 

<td> 

Admin10000.com 

</td> 

<td> 

Admin10000.com 

</td> 

</tr> 

</tbody> 

</table> 

</body> 

</html> 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明