Detailed explanation of the actual use of HTML table layout

When will the table be used

Now, tables <table> are generally no longer used for the overall layout of web pages. However, when faced with certain specific designs, such as form input and data presentation, forms may be the most appropriate choice.

The intuitive impression of a table is that elements are neatly arranged by multiple cells, which can clearly see rows and columns. This can be associated with Excel. From Excel's position in data processing and statistics, we can understand the significance of tables in web pages.

Simply put, when you can intuitively feel that multiple elements are arranged in the concept of rows and columns, using tables will make you much easier. For example, the application form in caniuse.com:

Using a table is simple, but sometimes the table ends up with each grid, which may not be what you want. For example, if some grids have line breaks, then the entire table looks very unsightly because line breaks. Especially for tables used for data presentation, width allocation is a very important topic. You may need to carefully calculate the total width of the table for the data that may be presented in each column of grids.

This is because a table has its own characteristics in layout, and it will follow certain principles and determine its actual layout through calculations. Next, this article uses actual table test examples to explore how tables calculate their own layout.

This article only focuses on the most common methods of applying tables and does not list all cases. Different browsers have different analyses of some concepts of tables, but the layout calculations are basically consistent (if there are differences, they will be mentioned separately).

The next test forms will be presented in this way (the content is taken from the trajectory of zero):

At the same time, the table will set border-collapse:collapse; and border-spacing:0;. This is also the most common practice for applying tables, and Normalize.css uses this part as the initialization definition.

The css attribute table-layout defined on the <table> element will determine the algorithm applied to the table during layout calculation. It has two values, auto and fixed. In normal cases, the default value auto is used.

The difference between these two algorithms is whether the width layout of the table is related to the data content in the table. This article will discuss the principle of the layout calculation of tables when taking these two values.

Automatic table layout -auto

The characteristic of automatic table layout is that the width layout of the table is related to all the data content in the table. It needs to obtain all the table contents before the final width layout can be determined and then displayed together.

In this way, the key point is that the content is relevant. What if the table defines a fixed width (500px here) and all cells do not define width (only discussing css define widths), what happens? See the results:

In the above table, the blank part is written with &nbsp; spaces. After comparison, we can find the following points:

The 2nd and 3rd columns have the same width.

The width of column 1 and the width ratio of any column following it seems to be 2:1.

Add the border and inner margins, and the widths of all columns are summed up, equal to the width defined by the table.

There is no width defined in each cell, so the width layout is entirely determined by the specific content data (text information). How to explain such a result? You can first intuitively infer such logic:

Step 1: Select the text with the most text content from each column (understand that if the text does not wrap the line, the text occupies the widest width) as the representative.

Step 2: Compare the widths of the representatives of each column, and assign them the total width of the table, including borders and inner margins according to their width proportional relationship.

Referring to the above logic, and then looking at the previous table, is there some reason? Note that the width ratio mentioned earlier seems to be 2:1, will this be? Let's take a look at the version that removes the inner margins:

Use the front-end debugging tool to look at the width of the cells above, and you will find that this table is different from before, and the ratio is very close to 2:1 (yes, there is also a small point because of the border, but without the border, you cannot distinguish the columns).

It can be seen that when analyzing the width proportional relationship, the content width, inner margin, and border will be taken into account. This also shows that it is not a measure of the number of characters, but a measure of the width that characters can occupy in a state without line breaking (the 2:1 here comes from the fact that Chinese characters are equal in width). Use the inner margins naturally just to make a more beautiful table :).

What happens when there is a width definition? Here is a table with a width defined in part of the cells:

Its corresponding html code is: