Detailed explanation of the difference between cesllspacing and cellpadding in table

What is a table? It is composed of cell cells. In the table, the number of <td> depends on the number of cell cells wrapped in each row of <tr>! In addition, the default table is displayed without table lines in the browser before adding the CSS style <style type="text/css">table tr td,th{border:1px solid #000;};

Common table writing methods in HTML: A. <tr>…</tr>: a row of a table, there are as many rows as the number of tr pairs; B. <td>…</td>: a cell of a table, a row contains several pairs of <td>...</td>, indicating the number of columns in a row; C. <th>…</th>: a cell in the head of a table, the table header, the text is bold and centered by default; D. <table summary="Table introduction text">/*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 enable screen readers to better help special users read the table content. */ E.caption tag, add title and summary to the table. The title is used to describe the table content. The title is displayed at the top of the table.

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

<table border="" cellspacing="" cellpadding="" summary="">
         <caption></caption>
         <tr><th>Today is Friday/th></tr>
         <tr><td>today is Friday</td></tr>
 </table>

Let's get back to the topic. The difference between cellpadding and cellspacing. Let's first look at the comparison between the following set of table pictures and cellspacing code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Differences in cellspacing in table</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>First cell</caption>
        <tr>
            <td>Test 1</td>
            <td>Test 2</td>
            <td>Test 3</td>
        </tr>
    </table>
    <table width="600" cellspacing="20" bordercolor="#333" border="1">
        <caption>The second cell</caption>
        <tr>
            <td>Test 1</td>
            <td>Test 2</td>
            <td>Test 3</td>
        </tr>
    </table>
    <table width="600" bordercolor="#333" border="1" class="ceshi">
        <caption>The third cell</caption>
        <tr>
            <td>Test 1</td>
            <td>Test 2</td>
            <td>Test 3</td>
        </tr>
    </table>
</html>

Comparing the code, the two tables at the top only have different cellspacing settings, one is "0" and the other is "20". 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. Extending: the second table is consistent with the third table, but the third table does not set cellspacing. We find that border-spacing: 20px; has the same result as cellspacing="20", eg Summary: The cellspacing attribute is used to specify the space between cells in a table. The parameter value of this property is a number representing the number of pixels occupied by the cell gap.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Differences in cellpadding in tabl tables</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
            <tr>
                <th>I am a happy cell table</th>
                <th>I am a happy cell table</th>
                <th>I am a happy cell table</th>
            </tr>
        </table>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
            <tr>
                <th>I am a happy cell table</th>
                <th>I am a happy cell table</th>
                <th>I am a happy cell table</th>
            </tr>
        </table>
    </body>
</html>

From the results of running the above code, we can see that the two tables only have different cellpadding code values. In the first table, the words "I am a happy cell table" are 0 pixels away from the cell where they are located, because cellpadding="0" is set; in the second table, the words "I am a happy cell table" are far away from the cell where they are located, because cellpadding="20", which means that 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 determines how much space the cells in the table will retain from their own borders, and the elements in the cells will never enter those spaces. ||Note that the cellpadding attribute is used to specify the size of the blank space between the cell content and the cell border. The parameter value of this property is also a number, which represents the number of pixels occupied by the height of the blank space between the cell content and the upper and lower borders, and the number of pixels occupied by the width of the blank space 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 cell content and border; the former is 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 distance between the table border and the nest padding, which is also the distance between the nest padding

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

Code display:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Difference between colspan and 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>Normal display: one row and three columns</caption>
        <tr>
            <td>What to say, I don't know</td>
            <td>What to say, I don't know</td>
            <td>What to say, I don't know</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>Now I want to display one row and two columns, what should I do? colspan merges across columns</caption>
        <tr>
            <td>What to say, I don't know</td>
            <td colspan="2">What to say, I don't know</td>
            <!-- <td>What to say, I don’t know</td> -->
        </tr>
    </table>
    <!-- ========Ruthless dividing line=============================================================== -->
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>Normal display: two rows and two columns</caption>
        <tr>
            <td>What to say, I don't know</td>
            <td>What to say, I don't know</td>
        </tr>
        <tr>
            <td>What to say, I don't know</td>
            <td>What to say, I don't know</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>Now we need to display one row and two columns, what should we do? Rowspan merges across rows</caption>
        <tr>
            <td rowspan="2">What to say, I don't know</td>
            <td>What to say, I don't know</td>
        </tr>
        <tr>
            <!-- <td>What to say, I don’t know</td> -->
            <td>What to say, I don't know</td>
        </tr>
    </table>
    </body>
</html>

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

<!-- Merge table cells -->
    <style type="text/css">
        table{
            border-collapse: collapse;
            /* border-collapse: separate; */
            /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */
        }
    </style>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
            </tr>
        </tbody>
    </table>

Finally, in the Chrome browser, the system default table border color is grey, the border spacing is 2, etc.

/* user agent stylesheet */
        /* table {
            display: table;
            border-collapse: separate;
            border-spacing: 2px;
            border-color: grey;
        } */
        
/* border="1" defaults to border="1px"
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px; */
        
/* bordercolor returns or sets the border color of the object bordercolor: W3C - String 
        Specifies the color of the border of the element. Specify either a color name or RGB color code. 
*/

This is the end of this article about the detailed explanation of the difference between cesllspacing and cellpadding in tables. For more information about cesllspacing and cellpadding in tables, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Solution to the problem that elements with negative z-index cannot be clicked

>>: Front-end vue+express file upload and download example

How to install MySQL 5.7.17 and set the encoding to utf8 in Windows

Detailed explanation of several practical solutions for quickly deleting large amounts of data (tens of millions) in MySQL

The author recently encountered a performance bot...

Detailed explanation of the difference between cesllspacing and cellpadding in table

How to install MySQL 5.7.17 and set the encoding to utf8 in Windows

How to understand the difference between computed and watch in Vue

HTML markup language - form

Vue implements countdown between specified dates

HTML+CSS project development experience summary (recommended)

TypeScript decorator definition

Three.js sample code for implementing dewdrop animation effect

MySQL 5.7.17 installation and configuration tutorial for Mac

Detailed explanation of Mybatis special character processing

The pitfalls of deploying Angular projects in Nginx

Recommend

Paragraph layout and line breaks in HTML web pages

MySQL fuzzy query usage (regular, wildcard, built-in function)

Example of using CSS to achieve semi-transparent background and opaque text

Automatically load kernel module overlayfs operation at CentOS startup

MySQL Series 11 Logging

WeChat applet implements simple calculator function

Vue implements simple image switching effect

Detailed explanation of the use of MySQL select cache mechanism

Using iframe techniques to obtain visitor QQ implementation ideas and sample code

The most convenient way to build a Zookeeper server in history (recommended)

How to perform query caching in MySQL and how to solve failures

Detailed explanation of several practical solutions for quickly deleting large amounts of data (tens of millions) in MySQL

Practical method of upgrading PHP to 5.6 in Linux

How to allow remote access to open ports in Linux

The best solution for resetting the root password of MySQL 8.0.23