Take what to save you, my table

Category: Html/css | Reprint please specify: from Graceie's blog
This address: http://www.hicss.net/how-to-save-you-my-table/

Table once occupied the juchongruoqing position in the Web development--the layout, even to the Web2.0 we can still see its layout figure. Yet technology is a progressive div+css combination that eventually knocks out the old-fashioned layout of the door and blows up a new wave of layout. And then came the Xinchoujiuhen, and multitudes of people who had a problem with the table, or who had no opinion, began to cut the table pen--bloated code, no semantic tags, complicated writing methods, and so on. Remember that the table was created not for layout, but for displaying data. Discarding the table layout does not discard the table itself. Take what to save you, my table.

What is table:

Table person HTML table Also, the carrier of the data.

Here is a comparison of the standard table code notation:

1 <TableBorder= "0"cellspacing= "0"cellpadding= "0"width= "100%">2   <TR>3     <th>Month</th>4     <th>Date</th>5   </TR>6   <TR>7     <TD>The</TD>8     <TD>18</TD>9   </TR>Ten </Table>

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 cell for the header, and the TD element defines the table cell. The Border property specifies the width of the table border, cellpadding the whitespace between the edge of the cell and its contents, cellspacing the gap between the specified cells, which we generally manually set to 0 to avoid browser differences. The Width property specifies the table widths, because table widths vary with the width of the inner element, and in common cases we want the table to be as wide as the outer container, so the default setting is 100% width to fill the container.

Have to say the Table-layout:fixed property

Table-layout:auto (default) |fixed.

Parameters:

Auto: The default automatic algorithm. The layout will be based on the contents of each cell. The table is displayed after each cell is read and is slow.
Fixed: The algorithm for fixing the layout. In this algorithm, the horizontal layout is based solely on the width of the table, the width of the table border, the cell spacing, and the width of the column, regardless of the table contents. Fast parsing speed.

Working steps for the fixed layout model:
All column elements with a 1.width property value other than auto set the width of the column based on the width value.
2. Width of the cell in the first row of the table, based on the width of the cell, set this column. If the cell spans multiple columns, the widths are evenly distributed across the columns.
3. After the two steps above, if the width of the column is still auto, its size is automatically determined so that its width is as equal as possible. At this point, the width of the table is set to the sum of the table's width values or column widths (whichever is greater). If the degree of the table is greater than the sum of its column widths, divide the difference by the number of columns, and then add the resulting width to each column.
This method is very 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 by the column width defined by the first row. The cells in the subsequent rows do not change the column width. This means that the width values specified for these cells are ignored.

Generally in the complex form of HTML, sometimes you will find that no matter how to adjust the width of the first row of each column, the column width will be unexpected changes (such as a long list of English text, and there is no space in the middle of the case you want this column limit width, so that the long text forced to line and not burst the table, And often the result is how to adjust not to the appropriate width), this time under helpless, you can use table-layout:fixed.

Table the newline of incurable diseases

Display data with table sometimes there is a headache, that is, do not break the line to display a paragraph of text, especially in the table header th use the most places. In fact, your headache is not a newline, but the browser-compatible additive behind it makes the line of difficulties greatly increased. Here, you can view Raiders force line break and force not to wrap this article has been inspired, the paper discussed in detail in the different situations of the strategy of the method of line.

Overall in the table in the line of personal comparison recommended way: First set table-layout:fixed for table, basically set this property after the basic line-wrapping problem can be resolved without appearing in table td,th because of the amount of each content in the robbery other TD , th width of the case occurs. At this point if you still have forced line-up problem, then in this TD inside add a layer of div, and then use Word-wrap:break-word; Word-break:break-all; These two CSS methods can solve the problem of line wrapping.

A few table tags that are familiar and unfamiliar

THEAD, TFOOT and Tbody

These three tags are the product of the so-called XHTML, which basically gives you the ability to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a total row at the bottom. This partitioning gives the browser the ability to support table body scrolling independent of table headings and footers. When a long table is printed, the table header and footer can be printed on each page that contains the table data. The main purpose of the individual is that it is suitable for the display optimization of extra long tables.

The THEAD tag represents the HTML header
The head of the table THEAD, you can define the header using a separate style, and you can print the header at the top of the page when you print.

THEAD tags represent HTML footers
The footer of the table TFOOT, you can use a separate style to define the footer (footnote or note), and you can print the footer in the lower part of the page when you print.

The tbody tag represents the HTML table body
When the browser displays the table, it is usually completely downloaded and then all displayed, so when the table is long, you can use the TBODY segment display.

Note: If you use THEAD, TFOOT, and tbody elements, you must use all the elements. They appear in the order of THEAD, TFOOT, tbodyso that the browser can render the header and footer before all the data is received. You must use these tags inside the table element, and the thead must have a TR tag inside. So writing a more standard table method is the following code:

1 <TableBorder= "0"cellspacing= "0"cellpadding= "0"width= "100%">2   <thead>3     <TR>4       <th>Month</th>5       <th>Date</th>6     </TR>7   </thead>8   <tfoot>9     <TR>Ten       <th>Month Lists</th> One       <th>Date Lists</th> A     </TR> -   </tfoot> -   <tbody> the     <TR> -       <TD>The</TD> -       <TD>18</TD> -     </TR> +   </tbody> - </Table>

Personally think this thing is very chicken, take it useless, discard. Small projects can add some semantics, but because of the dilemma of having multiple different headers in the same table, limiting future development, formal projects are used with caution in terms of extensibility.

Col and Colgroup

These two labels are also the product of XHTML, powerful and compatible with the odd difference.

The col tag defines a property value for one or more columns in a table.

The Colgroup label is used to group columns in a table so that they can be formatted.

Their main purpose is to control the width of the cell, so as not to separate the trouble of defining each cell, in the past we tend to define the width on the first line of th or TD to specify the width of each column, and Col can not only define the width can also define the other properties, For example, you can control the sum of the widths of several columns through Col, and you can control the background color of the column. But the ideal is plump, the reality is the backbone, as said earlier, the larger the function does not mean that its compatibility is stronger, according to the existing test, Col and Colgroup can play a role can also ensure that compatible applications only two: width and background. For width, the individual prefers to use the usual way, the first line to set the width, to guarantee the column width. For Bacground, it is rare to use different backgrounds in a large area of the table in practice. So personally think: can not use as much as possible.

Where to use table

Personally, in a container where 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 contains your order Details: Product name, unit price, purchase quantity, subtotal, freight and so on, finally there will be a final order amount of results, table here is a duck to the magical of the data carrier.

The above is a common table knowledge points for a comb, the common to a few places to be analyzed and collated. Looking forward to seeing this article you can look at table with the right attitude, using table. I hope this article can save you a little bit, my table. Thank you.

Take what to save you, my table