[Table concept in the page] For example, if we want to do a 3-column 2 list today, in Word, as long as the set form is 3 columns, 2 columns are completed, but do it, do it in the web page A 3-column table, but to divide several steps, the first step, tell the computer with the
Table> tab I have to do a form; second step, using a group
< / TR> Tag first make a cross column, then use three groups of
TD> tags in the cross column, then separate the three columns; the third step, repeat the second step, then do a cross-column and then divide the three columns So you can get a list of 3 columns. Don't you understand? It doesn't matter, let's take a closer look slowly:
First let's take a look at the simplest form:
Original code Rendering results
1 td> tr> table>
1 Tell the computer with the
this tag, this is a table, as for border = 1 This parameter is set to set the frame of this table to 1. A group of
TR> is the beginning of a set of horizontal columns. A group of
TD> is set a field. Of course, the text is to put it here. Now let's add two plaids:
Original code presentation result
1
2 TD>
3 TD> Tr> TABLE>
123 See that
tr> did not increase,
TD> added two groups. That if I want to add a column? Very simple, just like this:
Original code presence
1
2 TD>
3
Tr>
4 TD>
5 TD>
6 TD> TR> table>
123456 [Merge Table]
Not all forms are only a few columns of regulations, several columns, sometimes we will want to be able to "merge the field", let the form more beautiful, more practical, and talk about the "merger field", We must know that there are two ways in the merge: one is the upper and lower mergers (which is the merge between the horizontal columns), one is the left and right mergers (the merger between the straight columns), these two merged methods have different ways Attribute setting method. Left and right column merge: Basically, your form has been learned! Next, let's take a look, how to combine 1, 2, 3 Grid into a big grid:
Original code presence
1
TD>
4
5 TD>
6 td> tr> table>
1456 You should find that how 2, 3 disappeared? There is only 1 left, and the
tag of the column has more unfamiliar face colspan = "3", it is right, this is the properties of "left and right field merge", colspan = "3" means "" This field has spanned three columns, "it is because of this, the two
can save, because it is there! The upper and lower fields merge: learn to merge around! Next, let's take a look, how to get up and down, combine 1, 4 pieces to become a big grid: original code rendering results
1 td>
2 TD>
3
TD>
6 TD> TD> 6 TD> Tr> table>
12356 After the last experience, we know that there must be some columns to be "sacrificed" (it is the column!), This time we want to "up and down", We combine 1 and 4 into a field, which one of the sacrifices is sacrificed? Yes, it is the one below, we look at the picture above, Sure enough, there is already deleted, and there is a lot of face rowspan in the
label, which is the "upper and lower fence merge" properties ROWSPAN = 2 means "this field is connected to 2 columns", the result is as follows: [Table field alignment location setting]
Can I set my own size? Of course, you can freely set the "wide" and "high" 喔 of the table! Let's make a width 100, high 60 table, the practice is as follows:
Original code presentation result
1 td> tr> table>
1 oh! How 1 is always on the left side of the table? Can you get the middle? Of course, you can: Just join the parameter in
to join Align = Center:
Original code rendering result
1 td> tr> table>
1 In addition, using align = Right to allow the object to place the object in the table, using align = left to allow the table to set the left (preset value) in the table, as for why add it in
? Because,
is the meaning of a field, we have to specify something in this field or left right, you must add Align to
. Since you can set it, you can also control the intrauterine text, right? Yes, as long as you use the value of valign = TOP, you can align the object in the table.
Original code rendering result
1 td> tr> table> 1 utilizing valign = Middle can make the object in the form (preset value), Valign = Bottom can hit the object in the form.
[Table background, background color setting]
So can you set the background color? You can not only form, you can also specify a column or a column, method, and plus background color, use BGColor = "color code". At the bottom, it is a method for specifying the colors of the table.
Original code rendering result
1 td>
2
TD>
3 TD>
4 TD> TR> table>
1234 Plus BGCOLOR = "Color Code" in
, you can specify a background color of "a column":
Original code presentation
1 td>
2
Tr>
3 TD>
4 TD> TR> table>
1234 Plus BGCOLOR = "Color Code" in
, you can specify a background color of the "column":
Original code presentation result
1 td>
2
tr>
3 td>
4 TD> TR> table>
1234 The table can be used to make a background in addition to the background? Of course, the method is as simple as possible, as long as the background = "picture name" is added to the table. Like the table background color, not only the table can set the background picture, you can also specify a background image of a column or a column:
Original code rendering result
1 td>
2
TD>
3 TD>
4 TD> TR> table>
1234 Plus Background = "Picture Name" in
, you can specify a background color of the "column":
Original code presentation result
1 td>
2
tr>
3 td>
4 TD> TR> Table> 1234 [Table Frame Table Setting]
How to set the form of a table? Just use Border = "rough value".
Original code rendering result
1 td> tr> table>
1 How do I set the table color? Just use the bordercolor = "color code".
Original code rendering result
1 td> tr> table>
1 In addition, we can also set the shadow of the table, bright colors, let the form look more stereo! Just use the bordercolorlight = "# color code" (bright surface setting) bordercolordark = "color code" (dark surface setting).
Original code rendering result
1 td> tr> table>
1 [Table Bar Scit Setting]
We can use the cellpadding property to freely set the distance of the table within the table, this property is very easy to maintain proper distance, it looks more comfortable. Generally, the internal value is 2, but I suggest that it is 4 more beautiful.
Original code rendering result
1 td>
2 td> tr> table>
12 We can use the CellsPacing property to set the distance between the table field. Generally, the internal value is 2, but I usually habitually set to 0.