HTML table layout Actual use of the detailed

Now, table <table> generally no longer applies to the overall layout of the page. However, in the face of certain design, such as form input, data rendering, the table may be the most appropriate choice.

The intuitive impression of a table is that the elements are neatly arranged by multiple cells (cell), and you can clearly see rows and columns (column). This can be associated with Excel, the role of Excel in data processing and statistics, you can understand the meaning of the table on the page.

In simple terms, it's easier to use a table when you can intuitively feel that multiple elements are arranged in a row and column concept. Examples of application forms in caniuse.com:

Table layout Calculation

It's easy to use a table, but sometimes the table eventually shows the status of each lattice, which may not be what you want. For example, some grids have a newline, and then the whole table is because the line break looks pretty ugly. Especially for data rendering tables, width allocation is an important topic, and you might want to make a careful calculations of the total width of the table for the data that may be present in each column of the grid.

This is because the table has its own characteristics on the layout, it will follow a certain principle, through the calculation, determine its actual layout. Next, this article takes a practical table to test the example and explores how the table calculates its own layout.
Initial declaration

This article is only for the most common methods of applying a table, not all of which are listed. There are differences in the resolution of some of the concepts in different browsers, but the layout calculation is basically consistent (if there is a difference, it is mentioned separately).

The next Test table will look like this (the content is taken from the 0 trajectory):

At the same time, the table will be set border-collapse:collapse; border-spacing:0;. This is also the most common practice for applying tables, and NORMALIZE.CSS this part as an initialization definition.
Two kinds of algorithms

The CSS attribute table-layout defined on the <table> element determines the algorithm that the table applies to when the layout is calculated. It has two kinds of values, auto and fixed. In general, the default value of auto is used.

The difference between the two algorithms is whether the width layout of the table is related to the data content in the table. In this paper, we discuss the principle of the layout calculation of the table in these two kinds of values respectively.
Automatic table Layout-auto

The automatic table layout is characterized by the fact that the width layout of the table is related to all the data content in the table, which requires that the final width layout be determined after all the table contents are obtained, and then displayed together.

The point, then, is "content-related". What if the table defines a fixed width (here is 500px), and all the cells do not have a width defined (only the CSS definition width is discussed)? To see the results:

In the above table, the blank part is written &nbsp; space. After comparison, the following points can be found:

The 2nd and 3rd columns are the same width.
The width of the 1th column and the width of any subsequent column appears to be 2:1.
Together with the border and padding, all columns have a total width equal to the width of the table definition.

Each cell has no width defined, so the width layout is entirely determined by the specific content data (text information). How do you explain such a result? It is possible to visualize this logic first:

In the 1th step, select the most width of the text from each column, which is the widest in the case of non-wrapping, as the "Representative".
2nd, compare the widths of each column's "represents", and then assign them the total width of the table, including the border and padding, according to their width-proportional relationship.

Referring to the above logic, and then to look back at the previous table, is there some truth? Note that the width above "seems" to be 2:1, this will be? Take a look at the version that removed the inner margin:

Using the front-end debugging tool to look at the width of the cell above, you will find that this table is different from before, the ratio is already very close to 2:1 (yes, some of this small point is because of the border, but no border can not be divided into the region).

It can be seen that the content width and padding, as well as the bounding rectangle, are taken into account when analyzing the width-proportional relationship. This also means that it is not a measure of the number of words, but rather a measure of the width of the text in the non-newline state (where 2:1 comes from the Chinese characters are equal width). Using padding is natural only to make a more aesthetically pleasing form:).

What happens when there is a definition of width? Here is a table with the width definition for a partial cell:

Its corresponding HTML code is:

xml/html Code copy content to clipboard

2. <table class="exhibit_table">
4. <tr>
6. <th> One or two </th>
8. <th style="width:200px;" > </th>
10. <th> </th>
12. </tr>
14. <tr>
16. <TD Style="width:5px;" > </td>
18. <TD></td>
20. <TD> </td>
22. </tr>
24. <tr>
26. <TD> </td>
28. <TD Style="width:70px;" > </td>
30. <TD> 1234 </td>
32. </tr>
34. </table>

The table above shows you the following points:

The width of the cell is set to 5px, the actual rendering width is 13px, which is exactly the width of a single Chinese character, the same column has a Chinese character cell is the smallest cell width of the form of the text (so, wrap).
A cell with a width of 200px, the actual rendering width is 200px, although the same column has a definition of a width of 70px.
There is no 3rd column defined by the exact width, and finally the remaining width of the table after the 1th and 2nd columns are allocated.

The inference to this is that there are cases where the width definition and the column without the width definition are present:

If the cell definition is less than the minimum arrangement width of its contents (and the width of the cell is the same as if it were arranged in the cell as many rows as possible), the column that contains the cell will render the content in the smallest arrangement.
If the content width of the cell in the same column (no wrapping is the meaning of the word) is less than the maximum width definition in the column, the actual width of the column is equal to the width definition.
Columns that do not have a width definition are assigned by the table to the width-defined columns before being assigned to them (again, the ratio between them depends on the content width).

The front of the definition of no width can be seen as the case 1, where some columns have a width definition, and some do not, can be seen as the situation 2. Here is case 3, when all columns have a width definition:

Corresponding HTML code:

xml/html Code copy content to clipboard

2. <table class="exhibit_table exhibit_table_with_no_padding">
4. <tr>
6. <th style="width:50px;" > </th>
8. <th style="width:50px;" > </th>
10. <th style="width:100px;" > </th>
12. </tr>
14. <tr>
16. <TD> </td>
18. <TD> </td>
20. <TD> </td>
22. </tr>
24. <tr>
26. <TD> </td>
28. <TD> </td>
30. <TD> </td>
32. </tr>
34. </table>

In the table above, the padding is removed, so the value can be defined clearly by the width, and the width ratio of the 3 columns is 2:1:1. There is also a condition where the contents of the cell do not exceed the width definition value. After testing, IE7 and the following are different in content than the width definition value and other browser performance.

As you can see from this table example, if all columns have a width definition, and those widths define values that are less than the width of the table, the table will continue to assign the remaining widths to their widths, as well as to their width, as they are assigned to the widths defined by their widths.

The above is the analysis of 3 cases where the table layout is automatic and the table itself is defined as a fixed width. If the table itself does not define the width, there will be more, and will be related to the table containing the block (containing block, details), if there is a suitable opportunity later to discuss (the so-called article space is limited ...) ）。
Fixed table layout-fixed

The characteristic of a fixed table layout is that the width layout of the table is independent of the data content in the table, so that you can determine the final width layout and start the display by simply receiving the information from the first row of the table.

The fixed table layout is "content-independent", and it emphasizes "first line." Take a look at the table below for an example:

Corresponding HTML code:

xml/html Code copy content to clipboard

2. <table class="exhibit_table exhibit_table_fixed">
4. <tr>
6. <th style="width:50px;" ></th>
8. <th> One or two </th>
10. <th> 1234 </th>
12. </tr>
14. <tr>
16. <TD> Aistil Blette </td>
18. <TD Width="1000px;" > </td>
20. <TD> </td>
22. </tr>
24. <tr>
26. <TD Style="width:5px;" > </td>
28. <TD> </td>
30. <TD> </td>
32. </tr>
34. </table>

The logic for fixing the table layout is much simpler and is expressed as follows:

Take only the first line of information, ignoring the contents of all cells after the first row, and the width definition
In the first row, if the cells have a width definition, they are assigned the width they want, and then the remaining widths are evenly assigned to cells that do not have a width definition
The width allocation of the cell in the first row determines the width layout of the table, and the contents after the first row no longer change the layout.

Also note that when using a fixed table layout, be sure to define a width for the table element, and if its width is undefined (that is, the auto default), the browser will use automatic table layout instead.
End Statement

In fact, there are <colgroup>, <thead>, <tfoot>, <caption> and other elements in the table, but they are not needed in the most common usage. In fact, they are also considered in the layout calculation of the table. In addition to the case of cell merging, you can probably imagine how complex the table layout calculation actually is.

The document mentions that the layout calculation (automatic table layout) of the table has not yet become a specification. Refer to table width algorithms for instructions on how to calculate the table layout.
Conclusion

In fact, the principle of table layout calculation, do such meticulous inference, and not much practicality. It's just that when it comes to addressing the details, it helps to have this information, even though there are few opportunities.

However, you can get a more meaningful conclusion about the contents of this article: table definition width, and all cells do not define the width, then the automatic layout of the table as far as possible to keep all of your data is not wrapped, and if you encounter a line break affect the appearance of the situation, it is necessary to streamline the data or reduce the margin, Instead of trying to redo the width assignment yourself.

HTML table layout Actual use of the detailed