在网页制作中,细边框这个制作方法是必不可少的。这里介绍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>
复制代码代码如下:
<!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>
标签:
表格,细边框
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“CSS实现表格细边框的两种方法”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 齐豫.2003-THE.UNHEARD.OF.CHYI.3CD【苏活音乐】【WAV+CUE】
- 黄乙玲1986-讲什么山盟海誓[日本东芝版][WAV+CUE]
- 曾庆瑜1991-柔情陷阱[台湾派森东芝版][WAV+CUE]
- 陈建江《享受男声》DTS-ES6.1【WAV】
- 群星《闪光的夏天 第5期》[FLAC/分轨][392.38MB]
- 徐小凤《三洋母带》1:1母盘直刻[WAV+CUE][981M]
- 王菲1995《菲靡靡之音》[香港首版][WAV+CUE][1G]
- 《双城之战》主题小游戏现已上线 扮演金克丝探索秘密基地
- 《霍格沃茨之遗》PS5Pro画面对比:光追性能显著提升
- 《怪猎荒野》PS5Pro主机版对比:B测性能都不稳定
- 黄宝欣.1992-黄宝欣金装精选2CD【HOMERUN】【WAV+CUE】
- 群星.1996-宝丽金流行爆弹精丫宝丽金】【WAV+CUE】
- 杜德伟.2005-独领风骚新歌精选辑3CD【滚石】【WAV+CUE】
- 安与骑兵《心无疆界》[低速原抓WAV+CUE]
- 柏菲唱片-群星〈胭花四乐〉2CD[原抓WAV+CUE]