在html5中不支持<table>的cellpadding 和 cellspacing的替代方案

最新推荐文章于 2024-07-12 00:07:26 发布

Quincylk

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量8.4k

点赞数 3

分类专栏： HTML5 CSS 文章标签： HTML5 table cellpadding

CSS 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML5

16 篇文章 0 订阅

订阅专栏

原文：https://www.cnblogs.com/cbza/p/7147214.html

在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

1.初始:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cellspacing的css实现</title>
    <style type="text/css">

        table {
            border: 1px solid red;
        }
        td {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

    <table>
        <tr>
            <td>单元格1-1</td>
            <td>单元格1-2</td>
        </tr>
        <tr>
            <td>单元格2-2</td>
            <td>单元格2-2</td>
        </tr>
        <tr>
            <td>单元格3-1</td>
            <td>单元格3-2</td>
        </tr>
    </table>

</body>
</html>

效果:

2. 通过css实现: cellspacing = 0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cellspacing的css实现</title>
    <style type="text/css">

        table {
            border: 1px solid red;
            border-collapse: collapse;
        }
        td {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

    <table>
        <tr>
            <td>单元格1-1</td>
            <td>单元格1-2</td>
        </tr>
        <tr>
            <td>单元格2-2</td>
            <td>单元格2-2</td>
        </tr>
        <tr>
            <td>单元格3-1</td>
            <td>单元格3-2</td>
        </tr>
    </table>

</body>
</html>

border-collapse: collapse; 是针对 <table>元素的.

效果:

3. css实现 cellspacing = xx;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cellspacing的css实现</title>
    <style type="text/css">

        table {
            border: 1px solid red;
            border-collapse: collapse;
        }
        td {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

    <table>
        <tr>
            <td>单元格1-1</td>
            <td>单元格1-2</td>
        </tr>
        <tr>
            <td>单元格2-2</td>
            <td>单元格2-2</td>
        </tr>
        <tr>
            <td>单元格3-1</td>
            <td>单元格3-2</td>
        </tr>
    </table>

</body>
</html>

10             border-collapse: separate;
11             border-spacing: 20px;

1--  border-spacing 只有在 border-collapse : separate 时 才会起作用.
2--  border-collapse,  border-spacing 都是 针对  <table>元素的.

4. css实现 cellpadding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cellspacing的css实现</title>
    <style type="text/css">

        table {
            border: 1px solid red;
            border-collapse: collapse;


        }
        td {
            border: 1px solid red;
            padding: 20px;
        }
    </style>
</head>
<body>
<h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

    <table>
        <tr>
            <td>单元格1-1</td>
            <td>单元格1-2</td>
        </tr>
        <tr>
            <td>单元格2-2</td>
            <td>单元格2-2</td>
        </tr>
        <tr>
            <td>单元格3-1</td>
            <td>单元格3-2</td>
        </tr>
    </table>

</body>
</html>

1-- border-collapse 是针对 <table>元素的. padding 是针对 td 元素的.

5. tr, th 有border . 没有 padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cellspacing的css实现</title>
    <style type="text/css">

        table {
            border: 1px solid red;
            border-collapse: collapse;


        }
        tr {
            border: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
<h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

    <table>
        <tr>
            <td>单元格1-1</td>
            <td>单元格1-2</td>
        </tr>
        <tr>
            <td>单元格2-2</td>
            <td>单元格2-2</td>
        </tr>
        <tr>
            <td>单元格3-1</td>
            <td>单元格3-2</td>
        </tr>
    </table>

</body>
</html>

效果: