CSS attribute table (Table)_html/css_WEB-ITnose

CSS attribute table (Table)

HTML defines 3 elements for the table to group rows, they are thead (table header), tbody ( Table body), tfoot (footnote).

In HTML4, tfoot in the document structure must appear before tbody. HTML5 removes this restriction.

If there is no grouping element written in the source code, the browser will automatically create tbody , so the selector table > tr is always invalid because there is tbody in the middle.

If each row in the table body starts with a td element, then these th are the row titles.

colgroup and col

tags can only be used in table elements.

tag can only be used within table or colgroup elements.

col can be used outside of colgroup.

Col in colgroup will override colgroup style.

table-layout: auto | fixed

auto: The default automatic algorithm. The layout will be based on the content of each cell. In other words, maybe you define a width of 100px for a cell, but the result may not be 100px. The table will not be displayed until each cell is read and calculated, which is very slow.

fixed: fixed layout algorithm. In this algorithm, the horizontal layout is only based on the width of the table, the width of the table border, the cell spacing, and the width of the columns, and has nothing to do with the table content. That is, content may be cropped.

border-collapse: separate | collapse

separate: Border is independent.

collapse: Adjacent edges are merged.

Border-spacing and empty-cells only work when the table border is independent (that is, when the border-collapse attribute is equal to separate).

border-spacing: {1,2}

Use length values ​​to define line sums The horizontal and vertical spacing between cell borders. Negative values ​​are not allowed.

If both length values ​​are provided, the first one acts on the horizontal spacing and the second one acts on the vertical spacing.

If only one length value is provided, this value will apply to the horizontal and vertical spacing.

caption-side: top | bottom

top: Specify the caption above the table.

bottom: Specify the caption below the table.

empty-cells: hide | show

Set or retrieve when the table cells have no content , whether to display the border of the cell.

hide: Specifies that when the table cell has no content, hide the border of the cell.

show: Specifies that when a table cell has no content, display the border of the cell.