HTML 4.0 Syntax Table tags

"The table concept in the Web page"

For instance, if today we want to do a 3 column 2 columns of the table, in Word, as long as the set table is 3 columns, 2 columns to complete, but in the Web page to do a 3 column 2 columns, but to break into several steps, the first step, using <table></table > label tells the computer I want to make a table; the second step is to make a row with a set of <TR></TR> tags and then divide the three columns in the row by using three <TD></TD> tags; the third step, repeat the second step , then make a row and then three columns, so you can get a 3 column 2 columns of the table. Don't you understand? Okay, let's take a closer look at the following:

First, let's take a look at the simplest form:

Use <TABLE> this tag to tell the computer that this is a table, as for border=1 This parameter is to set the box thickness of this table to 1. A set of <TR></TR> is set to start with a row. A set of <TD></TD> sets a field. Of course, the text is to be placed in this area.

Now we're going to add two more squares:

See no,<tr></tr> no increase in,<td></td> but added two groups. What if I have to add another column? It's simple, like this:

"Merge table Fields"

Not all forms are just a few columns, a few columns, and sometimes we want to be able to "merge fields" to make the table more beautiful and practical, and when it comes to "merging fields," We have to know that there are two ways of merging: One is merging up and down (that is, merging between row), One is the merging of the left and right (i.e. the merging of the columns), each of which has a different method of setting the property.

Left-right field merge: Basically, your form has already learned! Next, let's take a look at how to combine 1, 2, and 3 into a large lattice:

You should find out, how 2, 3 have disappeared? There are only 1 left, and the <TD> tag of the column is also a strange face colspan= "3", yes, this is the "Left and right field merge" attribute, colspan= "3" means "this field spans 3 fields", and because of this, the original two < Td> can be saved, because they have been lost!

Up and down field Merge: Learned to merge around! Next, let's take a look at how to merge up and down, and merge the 1 and 4 lattices into one big lattice:

With the last experience, we know that in order to merge the fields, some of the fields will be "sacrificed" (that is, the fields that are merged!). This time we're going to "merge up and Down", and we'll combine 1 and 4 into one field, so which field is the one that's being sacrificed? Yes, that's the unlucky 4 down there. We look at the above picture, sure enough 4 has been deleted, and in the 1 <TD> tag is more than a raw face ROWSPAN, this is the "up and down field merge" property, rowspan=2 means "this field up and down with 2 fields", The results are as follows:

"table field alignment position setting"

Can I set the size of the table myself? Of course, you can set the "width" and "high" of the form freely. Let's make a 100-and-60-wide table, as follows:

Oh! How about 1 always on the left side of the table? Can I get the middle? Of course, as long as the <TD> add align=center This parameter can be:

In addition, the use of align=right can make the objects in the table to the right, the use of align=left can make the table objects left (preset), as for why to add in <TD>? Because the,<td> is a field meaning, we want to specify in this field to place the middle or left to the right, we must add align in <TD>.

Since you can put in, then you can also control the table text above, bottom? Yes, just use the Valign=top attribute to align objects above the table.

With Valign=middle you can make objects in a table vertical (preset), Valign=bottom can h make the objects in the table lower.

"Table background, color setting"

So can the table set the background? Can not only the table can, you can also specify a column or a row of color, the method and the background color, the use of bgcolor= "color code" on the line. Below is the specified whole grid table background color method:

Add bgcolor= "color code" to the <TR> to specify the background color of "one column":

Add bgcolor= "color code" to the <TD> to specify the background color of the "one column":

In addition to setting the background, you can also use a picture as a backdrop? Of course, the method is as simple as to add background= "picture name" to the table. As with the table background color, not only can the table set the background picture, you can also specify a column or a background picture:

Add the background= "picture name" to <TD> to specify the background color of the "one column":

"Table Box Line Settings"

How do I set the table thickness? Just use the border= "weight value" on the line.

How do I set the table color? Just use the bordercolor= "color code" on the line.

In addition, we can also set the table shadow, bright color, so that the table looks more three-dimensional ah! Just use the bordercolorlight= "#颜色码" (The Brightness setting) bordercolordark= "color code" (dark Side set) on the line.

"Table column spacing Settings"

We can use the CellPadding property to freely set the distance between the text in the table, this property is very useful, to maintain the right distance, looks more comfortable. In general, the default value is 2, but I recommend that the set is 4 more beautiful.

You can use the CellSpacing property to set the distance between the table field grid lines. In general, the default value is 2, but I usually get used to setting it to 0.