What are the properties of css setting table?

css sets the attributes of the table: 1. border-collapse attribute, collapse table border; 2. padding attribute; 3. border-spacing attribute; 4. caption-side attribute; 5. empty-cells attribute; 6 , table-layout attribute.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS table:

##caption-side##empty-cells

##Properties	Description
##border-collapse	Set whether to merge table borders into a single border.
border-spacing	Set the dividing cell border distance.
##Set the position of the table title .
Set whether to display in the table of empty cells.	##table-layout
##Set display unit, row and column algorithm.	1. Collapse table border: border-collapse attribute

(1) Function: Set whether the borders of the table are merged into a single border, or displayed separately like in standard HTML;
(2) Supplement Knowledge point: The table has a double line border. This is because the table, th and td elements have independent borders.

(3) Possible values:

##Value

default value. The borders will be separated. The border-spacing and empty-cells properties are not ignored. ##If possible, the borders will be merged into A single border. The border-spacing and empty-cells properties are ignored. inherit

Description

##separate

##collapse

## Specifies that the border should be inherited from the parent element The value of the -collapse attribute.

(4) Browser support: All major browsers support the border-collapse attribute.

Ps: Must specify !DOCTYPE, otherwise border-collapse may produce unexpected results.

2. Table inner margin: padding attribute

#Function: Control the content and content in the table For the distance of the border, please set the padding attribute for the td and th elements;

3. Border separation: border-spacing attribute

(1) Function: This attribute specifies the distance between cell boundaries in the separated border model. This property is ignored unless border-collapse is set to separate. Although this property only applies to tables, it is inherited by all elements in the table.

(2) Possible values:

## specifies that border should be inherited from the parent element The value of the -spacing attribute. (3) Browser compatibility: All mainstream browsers except IE support the border-spacing attribute. Internet Explorer 8 (and later) supports the border-spacing attribute if !DOCTYPE is specified.

##Value	describe
length length	Specifies the distance between the borders of adjacent cells. Use units such as px, cm, etc. Negative values ​​are not allowed. If you define a length parameter, then the horizontal and vertical spacing is defined. If two length parameters are defined, then the first sets the horizontal spacing, and the second sets the vertical spacing.
##inherit

4. Table title: caption-side attribute

(1) Function: Set the position of the table title, This property specifies the placement of the table title relative to the table frame. The table title is displayed as if it were a block-level element before (or after) the table.

(2) Possible values:

##ValueDescription##top ## specifies that the caption should be inherited from the parent element The value of the -side attribute.

(3) Browser compatibility: All mainstream browsers except IE support the caption-side attribute. Internet Explorer 8 (and later) supports the caption-side attribute if !DOCTYPE is specified.

5. Processing of empty cells: empty-cells attribute

(1) Function: This attribute definition How to represent table cells that contain no content. If displayed, the cell's borders and background are drawn. This property is ignored unless border-collapse is set to separate.

(2) Possible values:

default value. Position the table title above the table.	##bottom
## Position the table title within the table Down.	##inherit

##Draw a border around empty cells . default. inherit

##Value

Description

##hide

#Do not draw borders around empty cells.

show

## Specifies that empty should be inherited from the parent element The value of the -cells attribute.

(3) Browser compatibility: All browsers except IE support the empty-cells attribute. Internet Explorer 8 (and later) supports the empty-cells attribute if !DOCTYPE is specified.

6. Table layout algorithm: table-layout attribute

(1) Function: to display table cells , Algorithm rules for rows and columns. This attribute specifies the layout algorithm used to complete the table layout.

(2) Two algorithms:

<1>Fixed table layout: fixed

          #Advantages: Allows the browser to layout the table faster, (in a fixed table layout, the horizontal layout only depends on the table width, column width, table border width, and cell spacing, and is not related to the table width, column width, table border width, and cell spacing. The content of the cell is irrelevant. By using a fixed table layout, the user agent can display the table after receiving the first row.);

       #Disadvantages: Not very flexible.

                                                                                                                                                                                    ,,,,,,,,,,,,,,, In automatic table layout, the width of the column is set by the widest content in the column cell without a row break.);

​​ #Disadvantages: The automatic algorithm is slower, this This is because it requires access to all the contents of the table before determining the final layout.

(3) Possible values:

##Value##The column width is determined by the table width and the column width Width setting. ##inherit）

Description	##automatic
default. Column width is set by cell content.	##fixed
	## Specifies that table should be inherited from the parent element -The value of the layout attribute.
（Learning video sharing: css video tutorial

The above is the detailed content of What are the properties of css setting table?. For more information, please follow other related articles on the PHP Chinese website!