Learn HTML's Table tags

For the table, is the key to the production of Web pages, some graphical web-making tools (such as: Dreamweaver, fontpage, etc.) for it also support very well, but the HTML for the table set dozens of parameters, graphical web-making tools to fully support it is a bit easier to avoid it. Because there are too many parameters, and most of the parameters are familiar to us, it is not here to introduce, the following examples are only a few key parameters for details.

　　one, make series horizontal single line

In this example, the table main title tag <caption> is used, and its syntax is as follows:

<caption
Align=left|center|right
Valign=top|bottom>

Align and valign are used to set the horizontal and vertical positions of the headings respectively. The default value for align is top, which is the default value for Center;valign. The <caption> tag makes it easy to write text at the top or bottom of a table close to the edge, and to be centered, if it's more cumbersome. Additionally, in this example, the table can produce a single line effect by setting the rules and frame parameters for the <table> tag.

The rules parameter is the display control of the inner border of the table.
Rules= "None": indicates no internal border;
rules= "Rows": a border that shows only horizontal orientation;
Rules= "Cols: Indicates that only vertical borders are displayed;
Rules= "All" is to display a border in all directions, which is also the default value;
Frame= "void": indicates no outer frame;
Frame= "Above": Indicates the outer border showing the top;
Frame= "Below": indicates the bottom border of the display;
Frame= "LHS": Indicates the outer border showing the left side;
Frame= "RLS": Indicates the outer border of the display to the right;
Frame= "Hsides": Indicates the display of the upper and lower outer frame;
Frame= "Vsides": indicates that the left and right outer border is displayed;
Frame= "Box" indicates that all the outer boxes are displayed.

Understand the meaning of the parameter value, the effect of making this example is simple, this example completed after the source code as follows:

<table width= "60%" border= "1" cellspacing= "0" cellpadding= "0" rules= "Rows" frame= "Hsides" >
<caption> This is a series of horizontal single line test </caption>
<tr>
<td> This is a series of horizontal single line test, the effect is OK? </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

Use this method to draw a series of single lines, that is, fast and neat, and the code is very small.

　　second, make series vertical single line

This example of this effect in the production method with the previous example is not much different, but changed the rules and frame parameter values, so that the table only shows the vertical border inside and outside, and other examples of the same, this example is completed after the source code is:

<table border= "1" cellspacing= "1" cellpadding= "8" rules= "Clos" Frame= "Vsides" height= "to" "align=" "" "" Hspace= "" 10 " Width= "180" >
<tr>
<td> Higher Level </td>
<td> want to be poor and thousand-eyes </td>
<td> Yellow River into current </td>
<td> Day by Mountain </td>
<td><p><br> Deng Huang Tower </p></td>
</tr>
</table>

　　three, series double horizontal line

This is the result of adding the cellspacing parameter on the basis of example one. By setting the rules and frame parameters, the table displays only horizontal and internal border lines, and increases the set cellspacing parameters to produce a double line effect, but <table> Mark the default two-line color is not the same (because it is intended to use two colors to produce stereo effect), so also by setting bordercolorlight and Bordercolordark parameters to change the color of two-line, to achieve the two-line color consistent purpose. In addition, in order to make the text inside the table blank, and set the cellpadding parameters, of course, can also set the cell height to achieve this goal, but that would add a lot of code. The following describes the meaning of these parameters:

Cellspacing= "n": Cell spacing, which is the spacing between inner and outer border lines;
Cellpadding= "n": cell padding, that is, the distance between the contents of the cell and the inner border;
Bordercolorlight= "#n": Sets the color of the lighter part of a solid border line, represented by a color name or hexadecimal number.
bordercolordark= "#n": Sets the color of the darker part of a solid border line, represented by a color name or hexadecimal number.

In this case, the method of making double horizontal lines, compared with other methods convenient, fast, the use of less code, when the number of horizontal line, the more obvious effect. This example completes the following code:

<table width= "60%" border= "1" cellspacing= "6" cellpadding= "3" bordercolorlight= "#006633" bordercolordark= "#006633 "rules=" Rows "frame=" Hsides ">
<tr><td> This is based on an example of a further increase in the set of cellspacing parameters produced </td></tr>
The effect of <tr><td> students. </td></tr>
<tr><td> </td></tr>
</table>

Again, on the basis of example two and then add example three method can easily produce double vertical bar effect, you can try. Of course, the role of the table in the production of Web pages is much more than these, through these three examples can be seen, flexible application of the table parameter settings, can produce some special effects.