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 <tr>! In addition, the default table table has no table line displayed in the browser before the css style is added;
Common table writing methods in html: A.<tr>…</tr>: A row of a table, there are several pairs of tr, and there are several rows; B.<td>…</td>: A cell of a table, which contains several pairs of <td>…</td>, which means there are several columns in a row; C.<th>…</th>: A cell at the head of the table, the table header, and the text is bold and displayed in the center; 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 also enable screen readers to better help special users to read the table content. */ E.caption tag, add a title and summary to the table, the title is used to describe the content of the table, the display location of the title: above the table
<table border= cellpacing= cellpadding=> <tr><th>Header</th></tr> <tr><td>Data</td></tr> </table>
<table border= cellpacing= cellpadding= summary=> <caption></caption> <tr><th>Today is Friday</td></tr> </table>
Back to the topic, let’s get back to the point where the difference between cellpadding and cellpacing is the comparison between the following set of table pictures and cellpacing code:
<!DOCTYPE HTML><html> <head> <meta charset=utf-8> <title>Differences in cellpacing 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 cellpacing=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 cellpacing=20 bordercolor=#333 border=1> <caption>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>Third cell</caption> <tr> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> </tr> </table></html>Comparing the code, the two top tables have different settings, one is 0 and the other is 20. The displayed 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. Extended: the second table is consistent with the third table, but the third table does not have cell spacing. We found that this border-spacing: 20px; is the same as the result of cell spacing=20. eg summary: the cell spacing attribute is used to specify the gap between cells of the table. The parameter value of this property is a number, indicating the number of pixel points occupied by the cell gap.
<!DOCTYPE HTML><html> <head> <meta charset=utf-8> <title>Differences in cellpadding in 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=#cc cellpadding=20> <tr> <th>I am a happy cell form</th> <th>I am a happy cell form</th> <th>I am a happy cell form</th> <th>I am a happy cell form</th> </tr> </table> </body></html>Judging from the above code running results: the two tables have different values of cellpadding codes. In the first table, the words "I am happy cell" are 0 from the cell where it is located, that is because cellpadding=0 is set; in the second table, the words "I am happy cell" are far from the cell where it is located, that is, the distance between the cell where I am happy cell is 20 pixels. Simply put, how much is the value of cellpadding equal to, how many blanks are left inward from the boundary of the cells in the table, and the elements in the cell will never enter those blanks. ||Note that the cellpadding property is used to specify the size of the blank distance between the cell content and the cell boundary. The parameter value of this property is also a number, indicating the number of pixels occupied by the height of the blank distance between the cell content and the upper and lower boundaries and the number of pixels occupied by the width of the blank distance between the cell content and the left and right boundaries.
eg summary: cellpacing represents the distance between cells, cellpading represents the distance between cell content and border; the former is like margin, the latter is like padding; nest (cell)--the content of the table; nest filling (table filling) (cellpadding)--represents a distance outside the nest, used to separate nest and nest space; nest space (table spacing)--represents the distance between table border and nest filling, and is also the distance between nest filling
Expansion 1: How to merge rows and columns of a table? Colspan cross-column merge, rowspan cross-row merge
Code display:
<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>The 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 cellpacing=2 border=1 bordercolor=#ccc> <caption>Normal display: one row and three columns</caption> <tr> <td>Say something, don't know</td> <td>Say something, don't know</td> <td>Say something, I don't know</td> </tr> </table> <table width=600 cellpadding=10 cellpacing=2 border=1 bordercolor=#cc> <caption>What should I do now to display one row and two columns? colspan cross-column merge</caption> <tr> <td>Say something, don't know</td> <td colspan=2>Say something, don't know</td> <!-- <td>Say something, don't know</td> --> </tr> </table> <!-- ===================================================================================================================================================================================================================================================================================================================================================================================================================================== <td>Say something, don't know</td> </tr> <tr> <td>Say something, don't know</td> <td>Say something, don't know</td> <td>Say something, don't know</td> </tr> </table> <table width=600 cellpadding=10 cellpacing=2 border=1 bordercolor=#ccc> <caption>What to do now is to display one row and two columns? rowspan cross-row merge</caption> <tr> <td rowspan=2>Say something, don't know</td> <td>Say something, don't know</td> </tr> <tr> <!-- <td>Say something, don't know</td> --> <td>Say something, don't know</td> </tr> </table> </body></html>Expansion 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 cellpacing=2 border=1 bordercolor=#ccc> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tbody> </table>Finally, in the Chrome browser, the system default table border color grey, border spacing is 2, etc.
/* user agent stylesheet */ /* table { display: table; border-collapse: separate; border-spacing: 2px; border-color: grey; } */ /* border=1 default equals 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 article about the details of the difference between cesllpacing and cellpadding in table. For more related contents of cesllpacing and cellpadding in tables, please search for previous articles from Wulin.com or continue to browse the related articles below. I hope everyone will support Wulin.com in the future!