In-depth analysis of HTML table tags and related line break issues

What is a table?
Table is an Html table, a carrier of data.
The following is a relatively standard table code writing method:

A simple HTML table consists of a table element and one or more tr, th, or td elements. The tr element defines the table rows, the th element defines the header cells, and the td element defines the table cells. The border attribute specifies the width of the table border, cellpadding specifies the space between the cell edge and its content, and cellspacing specifies the space between cells. We generally manually set these three attributes to 0 to avoid browser differences. The width attribute specifies the width of the table, because the width of the table changes with the width of the internal elements. In common cases, we hope that the table is the same width as the external container, so the default width is often set to 100% to fill the container.

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.

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:

Personally, I think this thing is useless, useless to use and a pity to throw away. Small projects can add some semantics, but because we have encountered the dilemma of having multiple different table headers displayed in the same table, which limits future development, formal projects should use these tags with caution from the perspective of scalability.

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.

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.
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.

Strategy on forced line break and forced no line break
The problem of forced line break and forced no line break once bothered me. Whenever I encountered the problem of line break, it was the beginning of painful memories. Now I have finally learned from my mistakes and solved this long-standing stubborn problem in one go.
Attributes used for forced line breaks and forced no line breaks We generally use three CSS attributes to control line breaks: word-wrap; word-break; white-space. These three attributes can be said to be created specifically for text line breaking. First of all, we need to know what these three attributes are used for:

word-wrap syntax
word-wrap: normal (default) | break-word
All browsers can recognize the parameters:
normal: Allows the content to push beyond the specified container boundaries.
break-word: The content will wrap within the boundary. A word-break will be triggered when necessary (note: please distinguish clearly that word-break and break-word are two different things, one is an attribute and the other is a parameter).
illustrate:
word-wrap controls whether to "break the line for words", setting or retrieving whether the current line breaks when it exceeds the boundary of the specified container. There is no problem with Chinese and English sentences. But it doesn't work for long strings of English.
example:
The word "congratulation" belongs to a long string of English words. word-wrap:break-word treats the entire word as a whole. If the width at the end of the line is not enough to display the entire word, it will automatically put the entire word on the next line instead of truncating the word. This is the explanation for why it does not work for long strings of text. word-wrap:normal is the default setting, and English words are not broken up.
in conclusion:
The scope of action is only for standard block-level elements such as div. Table elements such as th and td are recognized but have no effect (if word-wrap is added to td and th, it can be effective in IE, but from the perspective of complete compatibility and easy memory, the previous conclusion should prevail).

word-break syntax
word-break: normal (default) | break-all | keep-all
parameter:
normal: Follows the text rules for Asian and non-Asian languages, allowing line breaks within words.
break-all: This behavior is the same as normal for Asian languages. Also allows arbitrary word breaks in lines of text for non-Asian languages. This value is suitable for Asian text that contains some non-Asian text.
keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Good for non-Asian text with small amounts of Asian text.
illustrate:
word-break:break-all, which means breaking words. When a word reaches a boundary, the next letter automatically goes to the next line. It mainly solves the problem of long strings of English (which just makes up for the defect that word-wrap:break-word does not work for long strings of text).
example:
Continuing with the word congratulation above, which belongs to a long string of English, word-break:break-all will truncate the word, and the end of the line will become something like conra (the front part of congratulation), and the next line will be the back part of conguatulation (conguatulation).
word-break:keep-all, refers to Chinese, Japanese, and Korean keep-all words. That is, if you only use it at this time and don't use word-wrap, Chinese characters will not wrap. (English sentences are normal.)
in conclusion:
The scope of action is limited to standard block-level elements such as div. Table elements such as th and td are recognized but have no effect (after testing, word-break:break-all is effective under Chrome, but from the perspective of complete compatibility and easy memory, the previous conclusion should prevail). Firefox and Opera cannot recognize word-break, not to mention the effect of using word-break in th and td under Firefox.

White-space syntax
white-space: normal (default) | pre | nowrap
parameter:
normal: default. Whitespace is ignored by browsers.
pre: Whitespace will be preserved by the browser. It behaves similarly to the pre tag in HTML.
nowrap: The text will not wrap, the text will continue on the same line until a br tag is encountered.
illustrate:
For the pre attribute, multiple consecutive spaces in HTML will be merged, and then in order to prevent them from being merged (the most common occasion is to indicate code text indentation), the spaces in them are retained without the need for us to add additional styles and tags to control its indentation and line breaks. The principle of the pre tag is the same, with a white-space:pre inside by default.
As for the nowrap attribute, this is the core of forcing no line break. Generally, forcing no line break is to use this attribute. There are no problems in div and td of Firefox, or in div of IE. The only flaw is that there is a problem in IE's td. If td does not specify a width, nowrap is still valid. If td has a width and there are no punctuation or spaces in the text (such as a long string of Chinese text), nowrap is no longer valid. The solution is to add word-break:keep-all; to solve this problem.

Summary forced line break:
If you need to force a line break in a standard block-level element such as a div, the most common solution is word-wrap:break-word; word-break:break-all; the disadvantage of this method is that if the end of the line happens to be a long string of English words, the word will be torn apart in an awkward manner (and FF does not recognize word-break, so it will not tear the word apart). Personally, I think if you put a long URL in your div, this solution is a very good choice (note: since FF does not recognize word-break, there is no guarantee that the URL words will be neatly broken at the end of each line, but this is also a helpless choice). If you are not placing a long string of English that can be broken, such as a URL, but an English sentence, then you can use word-wrap:break-word;. As for the word-wrap:break-word; overflow:hidden; method seen on the Internet, it is said to be compatible with IE and FF, but after personal testing, it seems to have no special effect.

Summary forced no line break:
The problem of forced non-wrapping is relatively easy to analyze. As discussed above, using white-space:nowrap, there is no problem in Firefox's div and td, and in IE's div. The only flaw is that there is a problem in IE's td. If td does not specify a width, nowrap is still valid. If td has a width and there are no punctuation or spaces in the text (such as a long string of Chinese text), nowrap is no longer valid. The solution is to add word-break:keep-all; to solve this problem. In summary, the safer way is to put another div between the text and td, and then use nowrap, which will force no line break. Note that there is a high probability that there will be too much text, causing it to overflow the container, so you have to add overflow:hidden to prevent it from overflowing the container, so that it can be compatible with all browsers.
After summarizing so much, I found that it seems to be just a balance of compatibility of those few attributes in the browser. Now there seems to be no perfect solution that can be compatible with all browsers. The most we can do is to keep the display of each browser consistent as much as possible. If you still feel that you must be compatible with all browsers, then the final solution is to use JS. In future articles, I will consider meeting this requirement with the lowest JS cost, but this is not within the scope of this article.