Learn the basics of Web page creation tutorial (7) Table label

Tutorials | Getting Started | Web page

Related articles:

　　Learn the basics of Web Authoring Tutorial (1) Web authoring

　　Learn the basics of Web making (2) typography labels

　　Learn the basics of Web page creation tutorial (3) Font label

　　Learn the basics of Web page creation tutorial (4) Image label

　　Learn the basics of Web page creation tutorial (5) Image label

　　Learn the basics of Web page creation Tutorial (6) Connection label

　　Table cell Alignment Position setting

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

Raw code	Show results
<table border=1> <TR><TD>1</TD></TR> </TABLE>	1

2. Use <TABLE> this tag to tell the browser that this is a table, as for border=1 This parameter is to set the box line thickness of this table to 1. A set of <TR></TR> is the starting position for the set line. A set of <TD></TD> sets a cell. Of course, the text is to be put in here.

3. Now we're going to add two more cells:

Raw code	Show results
<table border=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE>	1 2 3

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

Raw code	Show results
<table border=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE>	1 2 3 4 5 6

　　Merge table cells

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

2. Merge: Basically, your form has been learned! Next, let's take a look at how to combine 1, 2, and 3 cells into a large grid:

Raw code	Show results
<table border=1> <TR><TD colspan=3>1</td></tr> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE>	1 4 5 6

You should find out, how 2, 3 have disappeared? Only 1 left. and the line's <TD> tag also has a strange face colspan= "3", yes, this is the "left and Right" attribute, colspan= "3" means "this line spans 3 cells", and because of this, the original two <TD > can be skipped because it's all been merged!

3. Merge up and down: Learn to merge around! Next, let's take a look at how to merge the 1 and 4 cells together into one big lattice:

Raw code	Show results
<table border=1> <TR><TD rowspan=2>1</td><td>2</td><td>3</td></tr> <TR><TD>5</TD><TD>6</TD></TR> </TABLE>	1 2 3 5 6

With the last experience, we know that to merge cells There must be some cell properties "sacrificed" (that is, those merged cells!). This time we're going to "merge up and down" and we're going to combine 1 and 4 into one cell, so which cell are we going to sacrifice? Yes, that's the unlucky 4 down there, we take a look at the above picture, sure enough 4 has been deleted, and in the 1 <TD> tag is more than a face ROWSPAN, this is the "up and down cell Merge" property, rowspan=2 means "this cell is connected up and down 2 cells", The results are as above.

　　Table cell Alignment Position setting

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

Raw code	Show results
<table width= "border=" 1 "height=" > <TR><TD>1</TD></TR> </TABLE>	1

2. 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:

Raw code	Show results
<table width= "border=" 1 "height=" > <TR><TD align=center>1</td></tr> </TABLE>	1

In addition, the use of align=right can make the elements of the table to the right, the use of align=left can make the table elements left (the default), as to why add in <TD>? Because,<td> is the meaning of a cell, we have to specify that the elements in this cell should be placed in or left to the right, and the align must be added to the <TD>.

3. Since you can put in, then you can also control the text in the table up, down? Yes, just use the Valign=top attribute to align the elements in the table.

Raw code	Show results
<table width= "border=" 1 "height=" > <TR><TD Align=center valign=top>1</td></tr> </TABLE>	1

With Valign=middle, you can make the elements in a table vertically (the default), and Valign=bottom can make the elements in the table lower.

　　Table background, color setting

1. Can I set the background of the form? Can not only table can, you can also specify a row or a column of color, the method and the background color, the use of bgcolor= "color code" on the line. Here's how to specify the entire table background color:

Raw code	Show results
<table border= "1" bgcolor= #FFCC33 > <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

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

Raw code	Show results
<table border= "1" > <tr bgcolor= #FFCC33 ><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

Add the bgcolor= color code to <TD> to specify the background color for one cell:

Raw code	Show results
<table border= "1" > <TR><TD bgcolor= #FFCC33 >1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

2. The table can be set in addition to the background, you can also use the 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 row or a column background picture:

Raw code	Show results
<table border= "1" bgcolor= "/images/bg.gif" > <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

　　Table Border Line Settings

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

Raw code	Show results
<table border=5> <TR><TD>1</TD></TR> </TABLE>	1

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

Raw code	Show results
<table border= "5" bordercolor= "#0080FF" > <TR><TD>1</TD></TR> </TABLE>	1

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

Raw code	Show results
<table border= "5" bordercolor= "#0080FF" bordercolorlight= "#62B0FF" bordercolordark= "#004B97" > <TR><TD>1</TD></TR> </TABLE>	1

Table Spacing Settings　　

1. We can use the CellPadding property to freely set the table content distance from the sideline, this property is very useful, to maintain the right distance, looks more comfortable. In general, the fixed value is 2, but it is recommended to set the 4 more beautiful.

Raw code	Show results
<table border= "1" cellpadding= "ten" > <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2

2. We can use the CellSpacing property to set the distance between the table cell edges. The default value is generally 2, but the recommended setting is 0.

Raw code	Show results
<table border= "1" cellspacing= "5" > <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2