In-depth analysis of HTML table labels and related line breaks _ HTML/Xhtml _ webpage Creation

This article mainly introduces HTML table labels and related line breaks. It provides a solution to force line breaks and force line breaks. For more information, see What is table:
The table's Html table is also the carrier of data.
The following is a standard table code syntax:

Copy XML/HTML Code to clipboard

Month	Date
AUG	18

A simple HTML table consists of a table element and one or more tr, th, or td elements. The tr element defines the table row, the th element defines the table header cell, and the td element defines the table cell. The border attribute specifies the border width of the table. cellpadding specifies the gap between the cell edge and its content, and cellspacing specifies the gap between cells. These three attributes are generally set to 0 manually to avoid browser differences. The width attribute specifies the table width, because the table width varies with the width of the internal element. In common cases, we want the table to be equal to the external container width, therefore, the 100% width is usually set by default to fill the container.

I have to say that the table-layout: fixed attribute
Table-layout: auto (default) | fixed.
Parameters:
Auto: the default automatic algorithm. The layout is based on the content of each cell. The table is displayed after each cell is read and computed, and the speed is very slow.
Fixed: fixed Layout Algorithm. In this algorithm, the horizontal layout is only based on the table width, the table Border width, cell spacing, and column width, but is not related to the table content. Fast resolution.
Steps for fixed layout model:
1. All column elements whose width attribute value is not auto will set the width of the Column Based on the width value.
2. Set the width of the cell in the column in the first row of the table based on the cell width. If the cell spans multiple columns, the width is evenly distributed among these columns.
3. After the preceding two steps, if the column width is still auto, the size of the column is automatically determined so that its width is as equal as possible. In this case, the width of the table is set to the width value of the table or the sum of the column width (whichever is larger ). If the table degree is greater than the sum of its column width, divide the difference between the two by the number of columns, and then increase the obtained width to each column.
This method 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 determined based on the column width defined in the first row. Cells in the following rows do not change the column width. This means that the width value specified for these cells will be ignored.
When making html complex tables, you may find that no matter how you adjust the width of each column in the first row, the column width is still unexpected (for example, if a long string of English text is separated by spaces, You need to limit the column width, in this way, you can use table-layout: fixed to forcibly wrap long text without breaking the table, but often the result cannot be adjusted to the proper width.

Common and unfamiliar table labels
Thead, tfoot, and tbody
These three tags are the product of the so-called xhtml, mainly enabling you to group rows in the table. When creating a table, you may want to have a title row, some rows with data, and a total row at the bottom. This division enables the browser to support table body scrolling independent of the table title and footer. When a long table is printed, the table header and footer can be printed on each page that contains table data. I personally think its main purpose is to optimize the display of ultra-long tables.
Thead label indicates the HTML Header
The table header thead can be defined using a separate style, and the header can be printed on the top of the page during printing.
Thead label indicates HTML footer
The table footer tfoot can be defined using a separate style (footer or table note), and the footer can be printed at the bottom of the page.
Tbody label indicates the HTML table body
When the browser displays a table, it is usually displayed after the table is completely downloaded. Therefore, when the table is very long, you can use tbody to display it in segments.
Note: If you use thead, tfoot, and tbody elements, you must use all elements. They appear in the order of thead, tfoot, and tbody, so that the browser can display the header and footer before receiving all the data. You must use these tags inside the table element, and thead must have the tr tag inside. Therefore, the code for writing a more standard table is as follows:

Copy XML/HTML Code to clipboard

Month	Date
Month Lists	Date Lists
AUG	18

I personally think this thing is quite tasteless and useless. It is a pity to discard it. Small projects can be added with semantics, but it has been difficult to display multiple different headers in the same table, which limits future development, therefore, formal projects use these labels with caution from the perspective of scalability.

Col and colgroup
These two tags are also the product of xhtml, which are powerful and compatible with odd differences.
The col label defines attribute values for one or more columns in the table.
The colgroup label is used to combine columns in a table for formatting.
They are mainly used to control the cell width, saving the trouble of defining each cell separately, in the past, we often defined the width on th or td in the first line to specify the width of each column, while col can not only define the width but also define other attributes, for example, you can use col to control the total width of several columns and the background color of these columns. But the ideal is full, and the reality is the backbone. As mentioned above, the larger the function, the stronger the compatibility. According to the existing tests, col and colgroup can play a role and ensure that only two compatible applications are available: width and background. For width, I would rather use the regular method. Set the width in the first row to ensure the column width. For bacground, it is rare to use different backgrounds in a large area of a table. Therefore, I personally think: Do not use it whenever possible.

Where to use table
I personally think that using table in a container where data is very intensive and serialized is correct. The most common example is our common shopping order settlement page, which contains the Order details: product name, unit price, purchase quantity, amount subtotal, freight, etc, at the bottom of the end, there is a result of the final order amount. The table here is like a fish, achieving the effect of the carrier of data.

Table FAQ
Displaying Data with a table sometimes has a headache, that is, displaying a text segment without line breaks, especially where the th header is used most often. In fact, you don't have to worry about line breaks, but the browser compatibility behind it makes it much more difficult to wrap lines.
Generally, it is recommended to wrap a line in a table: set table-layout: fixed for the table first, basically, after this attribute is set, the basic line feed problem can be solved without the td In the table. The th occurs because of the amount of each content in the table to snatch other td and th width. At this time, if you still have a forced line feed problem, add a p layer inside the td, and then use word-wrap: break-word; word-break: break-all; these two CSS methods can solve the line feed problem.

Force line breaks and force line breaks
Forced line breaks and forced line breaks once plagued me. When I encountered a line break problem, it was the beginning of painful memories. Now, I am finally excited to solve this long-term stubborn problem.
Attributes used for force wrapping and force not wrapping
We generally control the CSS attributes used for line feed. There are three attributes: word-wrap, word-break, and white-space. These three attributes can be said to be created specifically for text disconnection. First, we need to know what the three attributes are:

Word-wrap syntax
Word-wrap: normal (default) | break-word
All browsers can recognize
Parameters:
Normal: allows the content to open the specified container boundary.
Break-word: the content will wrap in the boundary. If necessary, the word-break is triggered. (Note: The word-break and break-word are different. One is the attribute and the other is the parameter ).
Note:
Word-wrap controls whether to "break a line" and determines whether to disconnect a line when the current row exceeds the boundary of the specified container. There is no problem with Chinese and no problem with English statements. However, long strings do not work in English.
Example:
The word congratulation is a long string of English letters. The word-wrap: break-word is regarded as a whole. If the end width of the line is insufficient to display the entire word, it will automatically put the entire word in the next line, rather than trunking words, this is an explanation that does not work for long strings. Word-wrap: normal is the default condition. English words are not separated.
Conclusion:
The function scope is only for standard block-level elements such as p. Although table elements such as th and td are identified, they have no effect (if they are td and th, word-wrap can play an effect in IE, however, from the perspective of full compatibility and convenient memory, the previous conclusion prevails ).

Word-break syntax
Word-break: normal (default) | break-all | keep-all
Parameters:
Normal: line breaks are allowed according to the text rules of the Asian and non-Asian languages.
Break-all: this behavior is the same as that of the Asian language normal. It also allows non-Asian text lines to be broken in any word. This value is suitable for Asian texts that contain non-Asian texts.
Keep-all: same as normal in all non-Asian languages. Chinese, Korean, and Japanese cannot be disconnected. It is suitable for non-Asian texts that contain a small number of Asian texts.
Note:
Word-break: break-all, which is a broken word. When a word reaches the boundary, the next letter automatically goes to the next line. It mainly solves the problem of long strings in English (it makes up for the defect that the word-wrap: break-word does not work for long strings ).
Example:
The above congratulation is a long English string. The word-break: break-all truncates the word, and the end of the line is changed to a conra (front-end part of congratulation ), the next line is the back-end part of tulation (conguatulation.
Word-break: keep-all, which is a constant term in Chinese, Japanese, and Korean. That is to say, in this case, word-wrap is not used, and the Chinese text will not wrap. (The English statement is normal .)
Conclusion:
The function scope is only for standard block-level elements such as p. Although table elements such as th and td are identified, they have no effect (the word-break: break-all in Chrome is tested to be effective, however, from the perspective of full compatibility and convenient memory, the previous conclusion prevails ). Firefox and Opera cannot recognize word-break, so we do not need to mention the th in Firefox. The word-break effect is used in td.

White-space syntax
White-space: normal (default) | pre | nowrap
Parameters:
Normal: default value. The blank space is ignored by the browser.
Pre: white space is retained by the browser. The behavior is similar to the pre Tag in HTML.
Nowrap: The text will not wrap, and the text will continue on the same line until the br label is encountered.
Note:
For the pre attribute, multiple consecutive blank characters in HTML will be merged, and then in order not to merge them (the most common scenario is to indicate code text indentation) keep the blank spaces without adding additional styles and labels to control indentation and line breaks. The principle of the pre label is the same. By default, a white-space: pre exists.
For the nowrap attribute, this is the core of forcing no line feed. Generally, this attribute is used to force no line feed. There is no problem in Firefox p, td, and IE p. The only flaw is that there is a problem in IE's td. If td does not specify the width, nowrap is still valid. If td has the width, in addition, there is no punctuation or space in the text (for example, long Chinese strings), and nowrap is no longer valid. The solution is to add word-break: keep-all; to solve this problem.

Summary force line feed:
If you need to force line breaks in standard block-level elements such as p, the most common solution is word-wrap: break-word; word-break: break-all; the disadvantage of this method is that if the end width of the line is a long string of English words, the word will be torn apart (and FF does not recognize word-break, rather than breaking the word ). I personally think that if you put a long string address similar to the URL in this p, it is a very good choice to use this solution (Note: Because FF does not recognize word-break, therefore, it cannot be ensured that the URL words will be neatly broken at the end of each line, but this is also a helpless choice ). Use word-wrap: break-word; if it is not a long string that can be broken, such as a URL, but an English sentence. As for the word-wrap: break-word; overflow: hidden; on the Internet, it is said that it is compatible with IE and FF, but it does not seem to have any special effect after testing.

Summary force do not wrap:
It is easier to analyze the issue of force-don't wrap, as discussed above, using white-space: nowrap, Firefox p and td, and IE p, no problem. The only flaw is that there is a problem in IE's td. If td does not specify the width, nowrap is still valid. If td has the width, in addition, there is no punctuation or space in the text (for example, long Chinese strings), and nowrap is no longer valid. The solution is to add word-break: keep-all; to solve this problem. In combination, it is safer to set another p layer between the text and td, and then use nowrap, which means to force the line break. Note that at this time, there may be too many texts that may cause overflow of the container, so you have to add an overflow: hidden to prevent overflow of the container, so that it can be compatible with various browsers.
After summing up so much, I found that there seems to be a balance between the compatibility of those attributes in the browser. Now there seems to be no perfect solution that can be fully compatible with all browsers, what we can do most is to keep the display consistency of Each browser as much as possible. If you still feel that you must be compatible with all browsers, the final solution is to use JS. In future articles, I will consider satisfying this requirement at the minimal JS cost, however, this is not within the scope of this article.