Table Readability Improvement Analysis

The front has written a big frame, seems a little general, because there is no point of the graphic analysis. Recently used a more table, this article specifically on the table readability to make a systematic summary, by the way http://www.aliyun.com/zixun/aggregation/16911.html "> Readability-framework updated to v1.1. The following figure:

Retrospective table history, the earliest designers like to use tables to layout, because the visualization is simple and intuitive, thus greatly reducing the technical difficulty of web-design. On the basis of the error understanding table, not only use the wrong, but also blur the real use of the table. By the end of the Web standards reform, some false views put the table in the doghouse, thinking that <table> is the source of evil.

In fact, users will have a variety of complex or simple multidimensional data content display requirements, in order to better comparative analysis of the use of tables (such as Excel), because the table can make the content more clear and readable. For example, the tab in Notepad can also emit a "sequential" effect with good readability, but it is not an intuitive and semantically organized pattern, so I think the table is for readability.

Tables are the most commonly used forms of content on the web, so over the years, the design and code of tables has been a classic topic that tests the basics of Web designer. How to make the tables communicate better in the presentation layer, test the skill of visual communication design, how to make the table structure more flexible in the semantic layer, and test the combination of structural performance. Both complement each other and affect the readability of the table in the presentation layer. So what factors affect the transmission of forms? How should specific communication be promoted? Look at the examples below.

row and column organization

Mainly about the effect of the relationship between cells on readability. Help can make information more differentiated, or highlight more important information. From the point of view of demand, the HTML structure code is closely related to the performance effect, and the semantic table is the core basis of further enhancing the user experience.

The table head and the table body are distinguished distinctly, the head is <thead>, the <tfoot> is the table, the table is <tbody>, and three structural codes are used together. The purpose is to better control the visual performance with the style sheet, to play a distinct role (usually the table head, the end of the result is consistent). It is easier to control the table header and footer, and some browsers directly support scrolling the body. The following figure, the table head footer and the table body hierarchy distinguish between obvious, screenshot has cut:

Using a border to separate cells, using the definition {border-collapse} to merge borders, and the early days when CSS is not valued, it's not easy to do a 1-pixel thin form. When you add a border to a cell, you can express the data more clearly, and it is not easy to see the fork. But note that the table's border color should not be too eye-catching, otherwise it would look bad. The following figure, 1 pixel gray border table and black text contrast:

Between the line color, in fact, and "with the border cell" is to solve the same problem, between the line color more applicable to the table too wide demand, to some extent, to enhance the avoidance of reading errors. Similarly, the color of the two colors can not contrast too much, otherwise it seems too "jumping." In addition, the line color is often used with a 1-pixel border, if you do not define the border color, the 1-pixel border is the background color of the gap effect. In the following figure, the table body region of the 1-pixel table has a less obvious line-color effect:

column for color, also known as alternate color, use <colgroup> & <col> combination labels to format the column, equal to the "vertical" version of the row color, you can strengthen the column and column differences. Although it seems to be of limited use, but often in response to actual needs, it is such a simple change can avoid the use of JS redevelopment. In the following illustration, specify the background color for each column:

Important data columns emphasize that the same use of <colgroup> & <col> to control, you can specify any data columns to emphasize the display, indicating the current operation results. The following figure, the visits field of the table, indicates that it is currently in descending order:

The main is the presentation of cell content and the impact of data attributes on readability. This paper expounds four kinds of alignment methods according to the data characteristic, first of all, satisfying the user's requirement, and secondly, catering to the user's reading habit. Finally, notice that the contents of the cell are not left blank.

Variable-length strings are aligned to the left, and "variable length" refers to data columns that are not necessarily in length, such as commodity names. This kind of situation should conform to the user's line of sight, the left alignment arrangement, but also can assist the comparison clear each data length. The following figure, table title, company, location three field data:

Fixed length, shorter string centered, "fixed length" refers to data columns that do not change in length specifications, such as Date 2009.02.21 (0 is the code for digital writing). "Shorter string" refers to a very short and do not need a logical comparison of data columns, such as Operation links, or table state text, put the middle left white equal is the best compromise effect. The following figure, the report, status two field data for the table:

You can compare strings to the right, "comparable" refers to the data columns that need to be correlated, basically exponential, such as 10-bit ￥24.30 and hundreds of ￥452.10. Note that the "comparable" here is actually "variable length", but "comparable" is a more important requirement. Table Data column Contrast is the most frequently encountered requirements of various systems and platforms, which is also the most easily overlooked problem. The following figure, the vertical contrast effect of the table:

Merge column cells at the top of the line, and "merge column cells" refers to the cross row property using RowSpan, a one-to-many relationship in a complex table that needs to be horizontally oriented across multiple cells. Cells that are already rowspan should define valign= top to ensure that all data is complete in the first row. Because cells are vertically centered by default, if they are multiple rows of data tables, users will often be confused about the subsequent data columns from reading down. The following figure, the table's "contact, status, price" three field data:

Do not leave blank, blank cell is easy to cause confusion and even misunderstanding, users will not know whether there is no data, or no value at all? Correct approach, no data display 0, give no value to the cell line or fork. In the following figure, the horizontal bar in the cell indicates no support:

Source: http://blog.rexsong.com/?p=10271