Understanding table 1: graphic frame and rules attributes

Web standardization does not mean "sweeping all the cool and cool". The essence of Web standardization is to use tags in semantic principles and return to HTML/XHTML as the original form of a structured language.

Although we do not advocate the use of table elements for page layout, it is still the most suitable choice to organize table-based data. Because of the inherent characteristics of the table element, it is very convenient to use it to display formatted data. However, most of us only know about table elements in attributes such as bgcolor, cellspacing, cellspadding, and align and labels such as <tr> and <TD>, little knowledge about other useful attributes and related labels of table elements. Today, let's take a look at the two uncommonly used but very useful attributes of table elements-frame and rules. Go back and learn the labels related to the table elements, such as thead, tbody, and colgroup.

The following code is used as an example. Note that the two attributes are used in <Table Frame = "hsides" rules = "all">:

<table frame="hsides" rules="all">  <tr>     <td>First</td>     <td>Row</td>  </tr>  <tr>     <td>Second</td>     <td>Row</td>  </tr></table>

The above code displays the following table style on the webpage:

First	Row
Second	Row

We noticed that the four outer borders of the table are only visible in the horizontal direction (up and down), while the border of the table (between cells) is visible in the table. In fact, the frame attribute controls the visibility of the four borders at the periphery of the table, while the rules controls the visibility of the border inside the table. The value and meaning of the frame attribute are as follows:

• Void-default value. The outer border of the table is not displayed.
• Box-display four borders at the same time.
• Border-display four borders at the same time.
• Above-only the top border is displayed.
• Below-only show the bottom border.
• LHS-only display the left border.
• RHS-only display the right border.
• Hsides-only two borders in the horizontal direction are displayed.
• Vsides-only two vertical borders are displayed.

The effect of applying the above values in the three major Enis (Safari does not support this attribute) is shown in the following three figures (you can also try it on w3schools ). After careful observation, we can find that ff and OP are still regarded as rules. Except for the first value of IE, the implementations of the other eight values are incorrect. This will be discussed later. Now, from the perspective of the border effect, there are also slight differences between the three, namely:

• The border effect of FF is gray on the left and top borders, and black on the right and bottom borders;
• OP is black border;
• Ie uses a three-dimensional border effect.

 

The error in implementing the frame attribute in IE is that when rendering 8 values except void, it not only displays the border of the specified table, in addition, the internal border of the corresponding table is incorrectly displayed (it should be controlled by the rules attribute ). How can this problem be solved? In practice, because IE implements the rules attribute in the same way as ff and OP, it is recommended that developers use these two attributes at the same time, in this way, you can use the rules attribute to implement "Overwrite" the rendering effect of the frame attribute on the internal border of the table (the correct outer table border effect is still retained ).

The following five values are available for the rules attribute:

• None-default value. No border.
• Groups-adds borders to row or column groups.
• Rows-adds a border to the row.
• Cols-adds a border to the column.
• All-add borders to all rows and columns (cells)

Note: The border specified by the rules attribute does not overlap with the outer border of the table specified by the frame attribute. The effect of these values on the three browsers (Safari does not support this attribute) is shown in the following three figures:

 

As mentioned above, ie implements the rules attribute of the table element correctly, that is, it is consistent with the result of FF and op. The comparison of the above three images also confirms this point. Therefore, we can safely use both the frame and rules attributes to ensure consistent border effects among the three browsers.

Finally, there is another issue worth noting. For HTML tags, we usually think that the default value should be used if the corresponding attribute is not set or the attribute value is left blank. But as defined in the XHTML specification-it is illegal to add only attributes but not assign values to tags. It turns out that if you only add attributes to a tag and leave the attribute value blank, the default value is not always used for this attribute. The following table is a summary of my experiments. It can be seen that the default value is not used when the attribute values of IE and FF are left blank. Only op can automatically obtain the default value in this case (the first case in the table is described, the default values are automatically used only when no attribute is added ).

Therefore, in practice, to avoid inconsistent table appearances, you should strictly abide by the specifications to write code (do not leave the attribute value blank ). Specifically, these two attributes must be used at the same time, and cannot be left blank for any attribute -- but void or none default values can be assigned to them respectively.

Attribute combination	Ff2	OP9	IE7
<Table>
<Table Frame = "Void">
<Table rules = "NONE">
<Table Frame = "Void" rules = "NONE">
<Table Frame = "" rules = "">
<Table Frame = "">
<Table rules = "">
<Table Frame = "Void" rules = "">
<Table Frame = "" rules = "NONE">

Source: http://www.cn-cuckoo.com/2007/08/23/the-frame-and-rules-attributes-of-table-element-98.html