The difference between cellspacing and cellpadding in table

What is table? It is composed of cells. In the table, the number of b6c5a531a458a2e790c1fd6421739d1c depends on the number of cells wrapped in a34de1251f0d9fe1e645927f19a896e8 in each row! In addition, the default table table will be displayed in the browser without table lines before adding the css style 080b747a20f9163200dd0a7d304ba388table tr td,th{border:1px solid #000;};

Common table writing methods in html: A.a34de1251f0d9fe1e645927f19a896e8…fd273fcf5bcad3dfdad3c41bd81ad3e5: A row of a table, as many pairs of tr tables as there are several rows; B.b6c5a531a458a2e790c1fd6421739d1c…b90dd5946f0946207856a8a37f441edf : A cell of the table. A row contains several pairs of b6c5a531a458a2e790c1fd6421739d1c...b90dd5946f0946207856a8a37f441edf, indicating how many columns there are in a row; C.b4d429308760b6c2d20d6300079ed38e...01c3ce868d2b3d9bce8da5c1b7e41e5b: Header of the table In a cell, table header, the text is bold and displayed in the center by default; D.fc5289d1a8ae23fdb076564106473cf3/*The content of the summary will not be displayed in the browser. Its function is to increase the readability (semanticization) of the table, enable search engines to better understand the table content, and also enable screen readers to better help special users read the table content. / Comparison of cellspacing codes:

 <table border="" cellspacing="" cellpadding="">
    <tr><th>Header</th></tr>
     <tr><td>Data</td></tr>
 </table>

Comparison of codes, the top two tables only have different settings for cellspacing, one is "0", the other is "20", the displayed The result is that the distance between each cell in the first table is 0, and the distance between each cell in the second table is 20; extension: the second table is consistent with the third table, but the The three tables do not have cellspacing set. We found that border-spacing: 20px; has the same result as cellspacing="20". e.g. Summary: The cellspacing attribute is used to specify the gap between cells in the table. The parameter value of this property is a number, indicating the number of pixels occupied by the cell gap.

<table border="" cellspacing="" cellpadding="" summary="">
         <caption></caption>
         <tr><th>今天星期五/th></tr>
         <tr><td>today is Friday</td></tr>
 </table>

Judging from the results of running the above code: the two tables only have different cellpadding code values. In the first table, the words "I am a happy cell table" The word "I am a happy cell table" in the second table is far away from the cell where it is located. That is because cellpadding="0" is set. , that's because cellpadding="20", that is to say, the distance between "I am a happy cell table" and the border of the cell where it is located is 20 pixels. Simply put, the value of cellpadding is equal to how much blank space the cells in the table retain inward from their own boundaries. The elements in the cell will never enter those blank spaces. ||Note that the cellpadding attribute is used to specify the size of the blank distance between the cell content and the cell boundary. The parameter value of this attribute is also a number, which represents the number of pixels occupied by the height of the blank distance between the cell content and the upper and lower borders and the number of pixels occupied by the width of the blank distance between the cell content and the left and right borders.

e.g Summary: cellspacing represents the distance between cells, and cellpadding represents the distance between the cell content and the border; the former is understood like margin, and the latter is like padding; nest (cell) --The content of the table; nest padding (table filling) (cellpadding)--represents a distance outside the nest, used to separate the nest and the nest space; nest space (table spacing) (cellspacing)--represents the table border and nest padding The distance is also the distance between nest fillers

Extension 1: How to merge the rows and columns of the table? colspan merges across columns, rowspan merges across rows

Code display:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>table中cellspacing的区别</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
            .ceshi{
                border-spacing: 20px;
                /*Specifies the distance between the borders of adjoining cells in a table. */
            }
        </style>
    </head>
    <table width="600" cellspacing="0" bordercolor="#333" border="1">
        <caption>第一个单元格</caption>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
            <td>测试3</td>
        </tr>
    </table>
    <table width="600" cellspacing="20" bordercolor="#333" border="1">
        <caption>第二个单元格</caption>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
            <td>测试3</td>
        </tr>
    </table>
    <table width="600" bordercolor="#333" border="1" class="ceshi">
        <caption>第三个单元格</caption>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
            <td>测试3</td>
        </tr>
    </table>
</html>

Expansion 2: How to merge table borders? border-collapse: collapse;

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>tabl表格中cellpadding的区别</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
            <tr>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
            </tr>
        </table>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
            <tr>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
            </tr>
        </table>
    </body>
</html>

Finally, in the chrome browser, the system default table border color is gray, the border spacing is 2, etc.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>colspan与rowspan的区别</title>
        <style type="text/css">
            table{
                margin: 0 auto;
                margin-bottom: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>正常展示：一行三列</caption>
        <tr>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>现在要展示一行二列,怎么办？colspan跨列合并</caption>
        <tr>
            <td>说点啥了,不知道</td>
            <td colspan="2">说点啥了,不知道</td>
            <!-- <td>说点啥了,不知道</td> -->
        </tr>
    </table>
    <!-- ========无情分割线========================================================== -->
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>正常展示：二行二列</caption>
        <tr>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
        <tr>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>现在要展示一行二列,怎么办?rowspan跨行合并</caption>
        <tr>
            <td rowspan="2">说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
        <tr>
            <!-- <td>说点啥了,不知道</td> -->
            <td>说点啥了,不知道</td>
        </tr>
    </table>
    </body>
</html>

Recommended Tutorial: "

CSS Tutorial

"

The above is the detailed content of The difference between cellspacing and cellpadding in table. For more information, please follow other related articles on the PHP Chinese website!