The difference between cellspacing and cellpadding in table-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

The difference between cellspacing and cellpadding in table

Guanhui

Jun 28, 2020 pm 06:09 PM

cellpaddingtable

The difference between cellspacing and cellpadding in table

What is table? It is composed of cells. In the table, the number of

depends on the number of cells wrapped in in each row! In addition, the default table table will be displayed in the browser without table lines before adding the css style : A row of a table, as many pairs of tr tables as there are several rows; B.… : A cell of the table. A row contains several pairs of ..., indicating how many columns there are in a row; C....: Header of the table In a cell, table header, the text is bold and displayed in the center by default; D./*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>

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks agoByDDD

Hot Tools

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver CS6

Visual web development tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Hot Topics

Where is the login entrance for gmail email?

7634

CakePHP Tutorial

1390

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

148