What can I do to save you, my table (Haiyu Blog)_HTML/Xhtml_Webpage Production-HTML Tutorial-php.cn

Table once occupied an important position in web development - layout. Even in Web2.0, we can still see its layout. However, technology is constantly improving, and the Div CSS combination method has finally knocked on the door of old-fashioned layout and set off a new wave of layout. What followed was new and old grudges. Many people, whether they had opinions about table or not, also began to criticize table - bloated code, unsemantic 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 do to save you, my table?

What is table:

Table is also an Html table, the carrier of data.

The following is a relatively standard way of writing table code:

Copy the code

The code is as follows:

Month	Date
AUG	18< /td>

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 attributes to 0 manually 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 mention the table-layout:fixed attribute

table-layout: auto (default) | fixed.

Parameters:

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, the horizontal layout is only based 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 cell width of this column in the first row of the table, set the width of this column according to the cell width. 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 so that its width is 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 try it). At this time, in desperation, you You can use table-layout:fixed.

Line breaks for difficult table problems

Using a table to display data sometimes has a headache, that is, displaying a certain text without line breaks, especially in the header th, which is used the most. In fact, the headache you have is not line wrapping, but the browser compatibility behind it makes line wrapping much more difficult. Here, you can check out the article Guide to forcing line breaks and forcing no line breaks to get inspiration. The article discusses in detail how to solve line breaks in different situations.

Generally speaking, the recommended way to wrap lines in a 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 competing for 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 div inside the td, and then use the two CSS methods word-wrap:break-word; word-break:break-all; to solve the line break problem.

A few common but unfamiliar table tags

thead, tfoot and tbody

These three tags are a product of what is called xhtml, and mainly 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 gives the browser the ability to support table body scrolling independently 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 table header
the head thead of the table. You can use a separate style to define the table header, and you can print the table 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 at the lower part of the page break foot.

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 of them. 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:

Copy the code

The code is as follows:

< ;th>Month

< ;/table>

Personally, I think this thing is useless, useless and a pity to throw away. 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.

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, I think that in a container where the data is very dense and very serialized, table is the right choice. 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.

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

Related labels：

table

source：php.cn

Previous article：Hide html elements through display or visibility_HTML/Xhtml_Web page production Next article：Use viewport in meta tag to define screen css_HTML/Xhtml_webpage production

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn