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

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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

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

<htmlxmlns="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>

<br />

<br />

第二种 (通过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>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航