当前位置:首页 > 网建

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

2014-10-19 01:57:12 来源: 作者:
标签:

在网页制作中,细边框这个制作方法是必不可少的。这里好佳网络介绍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>
                                好佳网络
                        </td>
                        <td>
                                好佳网络
                        </td>
                </tr>
                <tr>
                        <td>
                                好佳网络
                        </td>
                        <td>
                                好佳网络
                        </td>
                </tr>
        </table>
        <br />
        <br />
        第二种 (通过XHTML验证)
        <table class="tab2">
                <thead>
                        <tr>
                                <th>
                                        表头
                                </th>
                                <th>
                                        表头
                                </th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>
                                        好佳网络
                                </td>
                                <td>
                                        好佳网络
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        好佳网络
                                </td>
                                <td>
                                        好佳网络
                                </td>
                        </tr>
                </tbody>
        </table>
</body>
</html>

上一篇《 HTML页面Meta介绍
下一篇》 无
Copyright@2008-2014 24KTOO设计 All Right Reserved 所有标签