In-depth analysis of HTML table tags and related line breaks

What is table:

table is an Html table, the carrier of data.
The following is a relatively standard way of writing table code:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <th>Month</th>
    <th>Date</th>
  </tr>
  <tr>
    <td>AUG</td>
    <td>18</td>
  </tr>
</table>

A simple HTML table consists of the table element and one or more tr, th or td elements. The tr element defines the table row, the th element defines the header cell, and the td element defines the table cell. 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 set these three properties manually 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 situations, we want the table to be the same width as the external container, so the default width is often set to 100% to fill the container.

I have to say the table-layout: fixed attribute
table-layout: auto (default) | fixed.
Parameters:
auto: 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, the horizontal layout is based only on the width of the table, the width of the table border, the cell spacing, and the width of the columns, and has nothing to do with the table content. The parsing speed is fast.
Working steps of the 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 located 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 evenly across the columns.
3. After the above two steps, if the width of the column is still auto, its size will be automatically determined to make its width as equal as possible. At this time, the width of the table is set to the width value of the table 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 the resulting width to each column.
This method is fast because all column widths are defined by the first row of the table. Cells in all rows after the first row are sized according to the column width defined by the first row. Cells in these later rows do not change the column width. This means that any width values ​​specified for these cells will be ignored.
Generally when 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 (such as a long string of English text , and if there is no space in the middle, you want to limit the width of this column, so that the long text is forced to wrap without breaking the table, and often the result is that the appropriate width cannot be adjusted no matter how you do it). At this time, in desperation, you You can use table-layout:fixed.

Common but unfamiliar table tags
thead, tfoot and tbody
These three tags are products of the so-called xhtml, which mainly enable you to edit tables Group the rows in . 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 gives the browser the ability to support table body scrolling independent of table headers and footers. When long tables are printed, the table header and footer can be printed on each page that contains the table data. Personally, I think its main purpose is suitable for display optimization of very long tables. The
thead tag represents the HTML header
The head thead of the table. You can use a separate style to define the header, and you can print the header at the top of the page when printing.
thead tag represents the HTML footer
The footer tfoot of the table, you can use a separate style to define the footer (footnote or table note), and when printing, you can print the page in the lower part of the page foot.
The tbody tag represents the HTML table body
When the browser displays the table, it usually downloads the table completely and then displays it in full. 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. The order in which they appear is: thead, tfoot, tbody, so that the browser can render 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 it. Therefore, the more standard way to write a table is the following code:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Date</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Month Lists</th>
      <th>Date Lists</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>AUG</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

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

col and colgroup
These two tags are also products of xhtml, with powerful functions and extremely poor compatibility.
The col tag defines attribute values ​​for one or more columns in the table.
The colgroup tag is used to group columns in the table for formatting.
Their main function is to control the width of cells, 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. , and col can not only define the width but also define other attributes at the same time. For example, you can use col to control the sum of the widths of several columns, and you can also control the background color of this column. But the ideal is full, and the reality is backbone. As mentioned before, the greater the function, the greater the compatibility. According to existing tests, there are only two applications that can play a role and ensure compatibility with col and colgroup. :width and background. For width, I personally prefer to use the conventional method, set the width in the first row and ensure the column width. As for background, in practice it is rare for tables to use different backgrounds in large areas. Therefore, I personally think: don’t use it as much as possible.

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

Table Difficulties and Miscellaneous Problems: Line Breaking
Sometimes there is a headache when using table to display data, that is, displaying a certain text without line wrapping, especially in the table header th It is used most in places. In fact, the headache you have is not line wrapping, but the browser compatibility behind it makes line wrapping much more difficult.
Generally speaking, the recommended way to wrap the line in the table is: first set table-layout: fixed for the table. Basically, after setting this attribute, the basic line wrapping problem can be solved without td in the table. ,Th due to the amount of each content inside, the situation of snatching the width of other td and th occurs. If you still have the problem of forced line breaks at this time, then add a layer of p inside the td, and then use the two CSS methods word-wrap:break-word; word-break:break-all; to solve the line break problem.

Guidelines on forced line breaks and forced non-line breaks
The problem of forced line breaks and forced non-line breaks once bothered me. Whenever I encountered the line break problem, it was the beginning of painful memories. Now Finally, I learned from my experience and worked hard to solve this long-standing and stubborn problem.
Attributes used to force line breaks and force 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 we have to know what these three attributes are used for:

word-wrap syntax
word-wrap: normal (default) | break-word
Each browser can recognize
Parameters:
normal: Allow content to push past the specified container boundary.
break-word: Content will break within boundaries. Word-break will be triggered when necessary (note: please distinguish clearly that word-break and break-word are different things, one is an attribute and the other is a parameter).
Description:
word-wrap controls whether to "break lines for words" and sets or retrieves whether to break lines when the current line exceeds the boundary of the specified container. There is no problem with Chinese, and there is no problem with English sentences. But for long strings of English, it doesn't work.
Example:
congratulation This word belongs to a long string of English words. word-wrap:break-word treats the entire word as a whole. If the end of the line is not wide enough to display the entire word, it will automatically put the entire word on the next line. , without truncating the words, which is why it doesn't work for long strings of text. word-wrap:normal is the default, and English words are not split.
Conclusion:
The scope of action is only standard block-level elements such as p. Table elements such as th and td are recognized but have no effect (if it is td, th plus width word-wrap can work under IE Effective, but from the perspective of complete compatibility and convenient memory, the previous conclusion shall prevail).

word-break syntax
word-break: normal (default) | break-all | keep-all
Parameters:
normal: According to Asian languages ​​and non- Text rules for Asian languages ​​that allow line breaks within words.
break-all: The behavior is the same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. 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 that contains a small amount of Asian text.
Explanation:
word-break:break-all is a break word. 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 (it just makes up for the above defect that word-wrap:break-word does not work for long strings of text).
Example:
Continuing with the above word congratulation, which belongs to a long string of English words, word-break:break-all will truncate the word, and the end of the line will become something like conra (the front part of congratulation). Next The backend part of behavioral tulation (conguatulation).
word-break:keep-all refers to Chinese, Japanese, and Korean continuous words. That is to say, if you only use this time without word-wrap, the Chinese will not wrap. (English sentences are normal.)
Conclusion:
The scope is only standard block-level elements such as p. Table elements such as th and td are recognized but have no effect (tested under Chrome word-break:break-all It is effective, but from the perspective of complete compatibility and convenient memory, the previous conclusion shall prevail). Firefox and Opera cannot recognize word-break, let alone the effect of using word-break in th and td under Firefox.

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

Summary of forced line breaks:
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 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, but will not tear the word apart). Personally, I think that if you put a long string of addresses similar to URLs in your p, then using 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 use word-wrap:break-word;. As for the word-wrap:break-word; overflow:hidden; I saw 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 of forcing no line breaks:
The problem of forcing no line breaks is relatively easy to analyze. As discussed above, use white-space:nowrap, Firefox's p and There is no problem in td and p in IE. The only flaw is that there is a problem in IE's td. If the td does not specify a width, nowrap is still valid. If the td has a width and there are no punctuation or spaces in the text (such as a long string of Chinese text), nowrap will no longer work. efficient. The solution is to add word-break:keep-all; to solve this problem. To sum up, the safer way is to put another layer of p between the text and td, and then use nowrap, which will force no line breaks. Note that there is a high possibility that too much text will overflow the container at this time, so you have to add an overflow:hidden to prevent the container from overflowing, so that it can be compatible with various browsers.
After summarizing so much, I found that it seems that there is a balance of compatibility between those few attributes in the browser. There seems to be no perfect solution that can be fully compatible with various browsers. The most we can do is Just try to keep the browser display 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 smallest JS cost, but this is not within the scope of this article. .

For more in-depth analysis of HTML table tags and related line break issues, please pay attention to the PHP Chinese website!