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

Source: Internet
Author: User
Tags add
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


Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.