在网页制作中，细边框这个制作方法是必不可少的。这里介绍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>

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

表格细边框的两种CSS实现方法的更多相关文章

  1. 设置HTML表格细边框

    简介:WEB前端|这是关于怎么设置HTML表格细边框的问题,把表格边框设置为细小的线条边框一般我们用表格的时候总会给它个border属性,比如:<tableborder="1" ...

  2. table 表格 细边框 最简单样式

    table 表格细边框的效果实现方法虽然不难,但网上简单有效的方法却很少,在此记录一下 css 样式 /** table 细边框 **/ table{border-collapse: collapse ...

  3. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

  4. GET和POST两种基本请求方法(转自博主--在途中#)

    GET和POST两种基本请求方法的区别 GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过req ...

  5. 转：GET和POST两种基本请求方法的区别

    原文地址:GET和POST两种基本请求方法的区别 原文如下: GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL ...

  6. 两种HTTP请求方法：GET和POST的区别

    之前在一些开发者平台使用网页调用API时,一再提到两种请求方法GET和POST,所以就去了解了下.那么这又不得不提到HTTP了! 一.什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户 ...

  7. 修改linux 两种时间的方法

    1,整理了一下怎么修改linux 两种时间的方法. 硬件时间:hwclock 或者clock,设置的方法是 hwclock --set --date="05/12/2018 12:30:50 ...

  8. IE、W3C两种CSS盒子模型

    利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都 ...

  9. 两种ajax的方法

    两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...

随机推荐

  1. HTTP、 TCP、 IP、 Socket、 XMPP

    网络自下而上分为: 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 HTTP:应用层协议,主要解决如何包装数据 XMPP:应用层协议 TCP:传输层协议,主要解决数据如何在网络中传输 IP ...

  2. tips: javascript 参数传递含有空格怎么办？

    js 方法传参有时候会遇到空格,空格会报错,因为它会默认空格后是元素 解决方法就是使用 escape 和 unescape html: var title = escape(rowObject.tit ...

  3. 利用javapns对IOS进行推送

    start package com.jynine.javapns; import java.io.FileNotFoundException; import java.io.IOException; ...

  4. schema的作用

    1,如果schema中定义的字段类型和数据库中该字段存储值的类型不一致(可以不定义,但定义的时候类型必须一致),则该字段查找不到,mongoose不会返回该字段的数据 2,如果数据库中有字段a,而sc ...

  5. FFmpeg(7)-av_read_frame()读取帧数据AVPacket和av_seek_frame()改变播放进度

    一.av_read_frame() 该函数用于读取具体的音/视频帧数据 int av_read_frame(AVFormatContext *s, AVPacket *pkt); 参数说明: AVFo ...

  6. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  7. 在IIS服务器上屏蔽IP的访问

    今天就跟大家分享一下在IIS服务器上如何屏蔽特定IP的访问,希望对大家有所帮助. 第一种方法:通过iis中的ip地址和域名限制. 此方法简单有效,建议使用 点击网站--右键属性--目录安全性--IP地 ...

  8. 使用nginx搭建tomcat集群配置

    软件准备: (1)jdk-8u73-linux-x64.tar.gz (2)apache-tomcat-7.0.57.tar.gz (3)nginx-1.7.7.tar.gz 准备3台Linux机器, ...

  9. Zookeeper session超时

    1.会话概述 在ZooKeeper中,客户端和服务端建立连接后,会话随之建立,生成一个全局唯一的会话ID(Session ID).服务器和客户端之间维持的是一个长连接,在SESSION_TIMEOUT ...

  10. JSch远程执行脚本

    JSch远程执行脚本 2017-02-24 在自动化测试的时候,需要远程操控服务器做一些操作,比如切日.起服务器.执行某些脚本.如何实现? 我们可以利用JSch,远程执行脚本.JSch是Java Se ...