手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS实现表格细边框的两种方法
CSS实现表格细边框的两种方法
摘要:在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。表格细边框的两种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>

<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>

<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>

【CSS实现表格细边框的两种方法】相关文章:

css实现鼠标悬停时滑出层提示的方法

CSS基础教程:Borders 边框

用CSS设置表格边框的语法详解

使用CSS中的meta实现web定时刷新或跳转的方法

给表格设置不重叠的边框(单线边框)的2种方法

CSS隐藏文字的方法

CSS实现左图右文混排布局的方法

CSS在表格边框上的美学应用

CSS DIV实现Yahoo搜索框的制作

使用CSS代码的空格实现中文对齐的方法

精品推荐
分类导航