What can I use to save you, my table (Haiyu Blog)

Tables once played a very important role in web page development - layout. Even in Web 2.0, we can still see their layout. However, as technology continues to advance, the Div+Css combination has finally opened the door to the old-fashioned layout and ushered in a new wave of layout. What followed were new and old grudges, and many people, whether they had opinions about tables or not, began to criticize them - bloated code, semanticless tags, complicated writing methods, etc. Remember, tables were not originally created for layout, but for displaying data. Abandoning the table layout does not mean abandoning the table itself. What can I use to save you, my table?

What is a table?

Table is an Html table, a carrier of data.

The following is a relatively standard table code writing method:

The table-layout:fixed attribute that must be mentioned

table-layout: auto (default) | fixed.

parameter:

auto: The default automatic algorithm. The layout will be based on the contents of each cell. The table will not be displayed until each cell is read and calculated, which is very slow.
fixed: Fixed layout algorithm. In this algorithm, horizontal layout is based only on the table width, table border width, cell spacing, column width, and has nothing to do with the table content. Fast parsing speed.

Working steps of fixed layout model:
1. All column elements whose width attribute value is not auto will set the width of the column according to the width value.
2. The width of the cell in the column in the first row of the table. Set the width of this column according to the width of the cell. If the cell spans multiple columns, the width is divided equally across the columns.
3. After the above two steps, if the column width is still auto, its size will be automatically determined to make its width as equal as possible. In this case, the table width is set to the table width value or the sum of the column widths (whichever is larger). If the table width is greater than the sum of its column widths, divide the difference by the number of columns and add that width to each column.
This approach is fast because all column widths are defined by the first row of the table. The cells in all rows after the first row are sized according to the column widths defined in the first row. Cells in subsequent rows do not change column widths. This means that any width values ​​specified for these cells will be ignored.

Generally, when you are making complex table HTML, sometimes you will find that no matter how you adjust the width of each column in the first row, the column width will still change unexpectedly (for example, if there is a long string of English text with no spaces in the middle, you want to limit the width of this column so that the long text is forced to wrap and does not break the table, but often the result is that you can't adjust the width to the appropriate width). At this time, you are helpless and you can use table-layout:fixed.

Table line break problem

Using a table to display data can sometimes be a headache, that is, displaying a certain paragraph of text without wrapping it to the next line, especially in the table header, which is used most often. In fact, your headache is not the line break, but the browser compatibility behind it, which makes the line break much more difficult. Here, you can check out the article "Strategies for forced line breaks and forced non-line breaks" for inspiration, which discusses in detail how to manage line breaks in different situations.

In general, the way I recommend for line breaks in a table is: first set table-layout:fixed for the table. Basically, after setting this property, the basic line break problems can be solved and the situation where the td and th in the table grab the width of other td and th will not occur due to the amount of content in it. If you still have the problem of forced line breaks at this time, then add a div layer inside this td, and then use the two CSS methods word-wrap:break-word; word-break:break-all; to solve the line break problem.

Several common and unfamiliar table tags

thead, tfoot, and tbody

These three tags are products of so-called xhtml, and they primarily give you the ability to group rows in a table. When you create a table, you probably want to have a header row, some rows with data, and a total row at the bottom. This division enables browsers to support scrolling of the table body independently of the table header and footer. When long forms are printed, the table header and footer may be printed on each page that contains the table data. Personally, I think its main use is to optimize the display of very long tables.

thead tag represents the HTML table header
The header of the table, thead, can be defined using a separate style, and the header can be printed at the top of the page when printing.

thead tag represents the HTML footer
The table footer tfoot can use a separate style to define the footer (footnote or table note), and the footer can be printed at the bottom of the page when printing.

The tbody tag represents the HTML table body
When a browser displays a table, it usually downloads the table completely before displaying it in its entirety. Therefore, when the table is very long, you can use tbody to display it in sections.

Note: If you use thead, tfoot, and tbody elements, you must use all of them. They appear in the order: thead, tfoot, tbody, so that the browser can render the header and footer before receiving all the data. You must use these tags inside a table element and the thead must have a tr tag inside it. So the more standard way to write a table is as follows:

col and colgroup

These two tags are also products of xhtml. They are powerful but have poor compatibility.

The col tag defines attribute values ​​for one or more columns in a table.

The colgroup tag is used to group columns in a table for formatting purposes.

Their main function is to control the width of the cell, which saves the trouble of defining each cell separately. In the past, we often defined the width on th or td in the first row to specify the width of each column, while col can not only define the width but also other attributes at the same time. For example, col can be used to control the sum of the widths of several columns and the background color of the column. But ideals are full and reality is skeletal. As mentioned before, greater functions do not mean greater compatibility. According to existing tests, there are only two applications where col and colgroup can play a role and ensure compatibility: width and background. For width, I prefer to use the conventional method, setting the width in the first row to ensure the column width. As for background, it is rare to use different backgrounds in a large area of ​​a table in practice. Therefore, I personally think: try not to use it if possible.

Where to use table

Personally, I think that in a container where data is very dense and serialized, it is correct to use a table. The most common example is our common shopping order settlement page, which lists your order details: product name, unit price, purchase quantity, subtotal, shipping fee, etc., and finally there is a final order amount at the bottom. The table is like a fish in water here, achieving the magical effect of a data carrier.

The above is a review of common table knowledge points, and an analysis and summary of several commonly used places. I hope that after reading this article, you will view and use tables with the correct attitude. I hope this article can save you a little, my table. Thanks.