CSS Properties table (table)

CSS Properties table (table)

HTML defines 3 elements for a table for grouping rows, which are thead (header), tbody (table body), TFOOT (footnote).

In the HTML4 Chinese document structure tfoot must appear before tbody, HTML5 removed this restriction.

If there is no write grouping element in the source code, the browser automatically creates the tbody, so the selector table > TR is always invalid because there is tbody in the middle.

If each row in the body of the table starts with a TD element, then these are the row headings.

Colgroup and Col

<colgroup> tags can only be used in table elements.

<col> tags can only be used in table or colgroup elements.

Col can be used outside of the colgroup.

Col in Colgroup overrides the Colgroup style.

Table-layout:auto | Fixed

Auto: The default automatic algorithm. The layout will be based on the contents of each cell, in other words, you might define a cell with a width of 100px, but the result might not be 100px. The table is displayed after each cell is read and is slow.

Fixed: The algorithm for fixing the layout. In this algorithm, the horizontal layout is based solely on the width of the table, the width of the table border, the cell spacing, and the width of the column, regardless of the table contents. In other words, the content may be cropped.

Border-collapse:separate | Collapse

Separate: Border is independent.

Collapse: Adjacent edges are merged.

Border-spacing and Empty-cells only work if the table border is independent (that is, when the Border-collapse property equals separate).

border-spacing:<length>{1,2}

Use length values to define the horizontal and vertical spacing of the borders of rows and cells. Negative values are not allowed.

If you provide all two length values, the first one is used for horizontal spacing, and the second is for vertical spacing.

If only one length value is provided, this value will be used for horizontal and vertical spacing.

Caption-side:top | Bottom

Top: Specifies that the caption is above the table.

Bottom: Specifies that the caption is below the table.

Empty-cells:hide | Show

Sets or retrieves whether the cell's border is displayed when the cell of the table has no content.

Hide: Specifies that the cell's border is hidden when the cell of the table has no content.

Show: Specifies that the cell's border is displayed when the cell of the table has no content.

CSS Properties table (table)