Table Formatting

HTML Table: In-depth understanding of complexity and styles

This article discusses the complexity of HTML tables and its application of CSS styles in depth. HTML tables contain elements such as title, row group and column group, and the rendering order is: table, column group, column, row group, row group, and cells. The HTML table model is centered in behavior and is contained within the rows on the cell structure.

Table formatting object

CSS provides ten table-related display attribute values ​​for controlling table styles. These values ​​can also be applied to other elements, but anonymous table-related elements may need to be generated to render correctly.

The width of the table and its columns is determined by two algorithms: the fixed table layout algorithm and the automatic table layout algorithm. The former is not affected by the content of the table cell, while the latter requires checking every cell in the table, which can be very time-consuming for large tables.

CSS2 defines two models that render internal table object borders: separate border models and folded border models. The Separated Border Model allows only the cells and tables to have borders, while the Collapse Border Model allows the borders of rows, row groups, columns, column groups, and tables themselves to overlap in complex ways.

Separate border rendering

Folded border rendering

Properties of columns and column group elements

Only a few properties can be applied to elements with display attribute value table-column or table-column-group: border attribute (only in the collapsed border model), background attribute (cells and rows have transparent background), width attribute and visibility attribute value collapse (other visibility values ​​will be ignored).

Table width algorithm

Unlike other block-level boxes, tables with width set to auto and horizontal margins of zero will not fill their containing blocks. The table size will be determined by its content. You can use margin-left and margin-right to set auto to center the table horizontally.

There are two algorithms for determining the width of the table column: the fixed table layout algorithm and the automatic table layout algorithm, specified by the table-layout attribute (the values ​​are fixed and auto respectively, and the initial value is auto). If the table width is specified as auto, an automatic table layout algorithm is usually used. For block-level tables (display set to table), the user agent can, but does not have to use a fixed table layout algorithm.

In the fixed table layout algorithm, the width of the columns and tables is not affected by the content of the table cells. The width of each column is determined as follows:

The width of the column object with
• is not set to the width of the column. auto The width of the first row cell with a width not
sets the width of the column to which it belongs. If the cells span multiple columns, the width is evenly distributed to those columns.
• autoRemaining columns evenly allocate remaining horizontal space (minus any border or cell spacing).
Table width is the larger value in the table width attribute value and the sum of column widths (plus border or cell spacing). If the table is wider than the column, additional space is allocated to the column.

Don't omit cells!

Since the first row cell is used to determine the column width, if a fixed table layout algorithm is used, no cells should be omitted from the first row. The behavior in this case is not defined in the CSS2.1 specification.

Automatic table layout algorithms usually require multiple traversals. The CSS2.1 specification suggests an algorithm for determining column widths, but user agents do not need to use it. The algorithm checks every cell in the entire table and calculates the minimum and maximum widths required to render each cell. These values ​​are then used to determine the width of each column, which in turn may determine the width of the table itself.

Because each cell has to be checked, the automatic table layout algorithm can be very time consuming for tables with a large number of rows and/or columns.

Table height algorithm

If the value of the table height attribute is not

and the specified height is different from the row height sum (plus border or cell spacing), the behavior is undefined. The percentage value of the height attribute of rows, row groups, and cells is not defined. The

property of each cell determines how it is aligned within the row. Only auto, vertical-align, baseline and top values ​​are allowed. For any other value, bottom will be used. middle baseline

Border of table object

There are two models that render internal table object borders in CSS2: the separation border model and the collapse border model. You can use the

attribute to set its value to

(initial value) or border-collapse to select the preferred model. separate collapseIn the decoupled border model, only cells (and table itself) can have borders; rows, row groups, columns and column groups cannot. The borders are drawn around the cells, separated by the vertical and horizontal distances specified by the

attribute. In the space between cell borders, the backgrounds of rows, row groups, columns, and column groups are not visible. Only the table background is visible in the cell spacing.

When the border-spacing

property is set to

, the cells are not separated, and their borders (and the borders of rows, row groups, columns, column groups and table itself) will be collapsed in a rather complicated way ( or overlap). border-collapse The collapse

and

properties are ignored when using the collapsed border model. border-spacing empty-cells

(The following is the FAQ part. Due to space limitations, only the title is retained here. Please refer to the original text for the complete content)

• Basic formatting steps for tables
• How to make a table responsive
• How to merge table cells
• How to add borders to table
• How to change the background color of a table
• How to align text in table
• How to add a title to a table
• How to style the first row or column of a table in different ways
• How to add hover effect to a table
• How to make a form more accessible

The above is the detailed content of Table Formatting. For more information, please follow other related articles on the PHP Chinese website!