11 Table layout

The table value specifies that an element defines a block-level table that defines a rectangular block that generates a block box. inloine-table specifies an element that defines an inline-level table. This means that the element defines a rectangular block that generates inline boxes. Table-row specifies that an element is a row of a cell. Table-row-group specifies that an element is a group of one or more rows. Table-header-group,table-footer-group is very similar to Table-row-group. The Table-column declaration element describes a column of a cell. Table-column-group declares that an element is a group of one or more columns. Table-cell specifies an element that represents a single cell in the table. Table-caption defines the total caption for a table.

CSS defines its table model as "to behave as master". In other words, this model assumes that the markup language created by the creator explicitly declares the row, and that the column is derived from the layout of the cell row. Columns and column groups in CSS can only accept 4 styles, border, background, width, and visibility. Border you can set a border for columns and column groups only if the Border-collapse property is collapse. Background the background of a column or column group is visible only if the cell and its rows have a transparent background. The Width property defines the minimum width of a column or column group. If the visibility of a column or column group is collapse, all cells in that column (or column group) are not displayed.

CSS defines 6 different "layers" to complete the display of a table. Table, column group, column, row group, row, cell. The styles for each aspect of the table are drawn on their respective layers. The column style is below the row style, so the row background overrides the column background. By default, all element backgrounds are transparent.

The Caption-side property can set the position of the caption, value: Top|bottom. In most cases, applying styles to caption is very similar to block-level elements, which can have padding, borders, backgrounds, and so on.

There are two kinds of border models in CSS. The cells that split the border model are separated from each other (the default model). There is no interval between the cells that merge the Border model. The Border-collapse property can set the border model, value: collapse|separate| Inherit. When the value of Border-collapse is collapse, the Border-spacing property can be used to set the distance between cell borders, value: <length><length>?| Inherit, if two lengths are provided, the first value is always the horizontal interval, and the second value is always the vertical interval. To declare a border-spacing value, apply to the table itself, not to a cell, and you cannot set a border for a row, row group, Columns column group.

The Empty-cells property can set how empty cells are handled, values: Show|hide|inherit, set to show, draw empty cell borders and backgrounds, as if these table cells have content, and set to hide, no part of the cell is drawn.

If two or more borders are adjacent, they merge with each other. The border-style of a merged border is hidden, which takes precedence over all other merged borders, Border-style to none, and has the lowest priority. If the Border-style value of at least one of the merged borders is not none, and the Border-style value with the merged border is not hidden, the narrow edge is lost to a wider border. With the same width, consider the border style, bouble, solid, dashed, dotted, ridge, outset, Groove, inset. The same way, the color of the element is used in the following table order, cell, row, row group, column, column group, table.

The Table-layout property can set the method for determining the width of the table, fixed-width layout and automatic width layout (height is automatically calculated), Value: Auto|fixed|inherit. The difference between the two is speed. The speed of a fixed layout model is that the layout is not lazy to the contents of table cells, and its layout is based on the table and the width values of the columns and cells in the table. Automatic layout is slow because the layout of the table cannot be determined until the user agent has finished viewing all the contents of the table.

The height of the table can be used to display settings with the Height property. If auto, the height is the row high of all rows in the table plus the sum of all the borders and cell intervals.

The Text-align property allows you to set the horizontal alignment. The cell is processed as a block-level box, where the contents are aligned according to the Text-align value. The Vertical-align property allows you to set vertical alignment.

11 Table layout