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

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 table tr td,th{border:1px solid #000;};

Common table writing methods in html: A. … : 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:

Header Data Copy after login 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.

今天星期五/th> today is Friday Copy after login

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:

table中cellspacing的区别 table{ margin-bottom: 50px; } .ceshi{ border-spacing: 20px; /*Specifies the distance between the borders of adjoining cells in a table. */ } 第一个单元格 测试1 测试2 测试3 第二个单元格 测试1 测试2 测试3 第三个单元格 测试1 测试2 测试3 Copy after login Expansion 2: How to merge table borders? border-collapse: collapse;

tabl表格中cellpadding的区别 table{ margin-bottom: 50px; } 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 Copy after login Finally, in the chrome browser, the system default table border color is gray, the border spacing is 2, etc.

colspan与rowspan的区别 table{ margin: 0 auto; margin-bottom: 50px; text-align: center; } 正常展示：一行三列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办？colspan跨列合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 正常展示：二行二列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办?rowspan跨行合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 说点啥了,不知道 Copy after login Recommended Tutorial: "

CSS Tutorial "