HTML table markup (suitable for beginners) _ HTML/Xhtml _ webpage Creation

Source: Internet
Author: User
TABLE & gt; & lt; TR & gt; & lt; TD & gt; & lt; TH & gt; & lt; CAPTION & gt; ■ & lt; TABLE & gt; & lt; TR & gt; & lt; TD & gt;: these three tags are the most important tags for table definition. It can be said that learning only these three tags is sufficient. & Lt; TABLE & gt; is a container tag, meaning it is used to declare that this is a TABLE and other TABLE tags can only be TABLE>


:
These three tags are the most important tags for defining a table. It can be said that learning only these three tags is sufficient.


It is a container tag, which means it is used to declare that this is a table and other table tags only apply within its range. There are other container tags. Used to mark table columns (row)
Used to mark Cells)

Parameter settings (commonly used ):For example:






Only multi-layer assurance. Yes. Valign = "TOP ".
Placement position (vertical) of text and painting in the Table. Optional values: top, middle, and bottom. Background = "myweb.gif"
Table paper, which is different from bgcolor. Bgcolor = "# 0000FF"
The background color of the table. Do not use the background color. See example 6. Bordercolor = "# FF00FF"
The border color of the table. NC and IE have different effects. See example 6. Bordercolorlight = "#00FF00"
The color of the border to the light area of the table. See example 2. "Only applies to IE" bordercolordark = "#00 FFFF"
The color of the background part of the table border. See example 2. When bordercolorlight or bordercolordark is used, bordercolor will become invalid. "Only applies to IE" cols = "2"
The number of table columns, which is used by the browser to draw the entire table before downloading the table.









Width = "400"The table width, which accepts absolute values (such as 80) and relative values (such as 80% ). Border = "1"The Border thickness of the table. Different browsers have different internal values, so please specify. Cellspacing = "2"Table grid line thickness. See example 3. It is a thick to 5 grid line. Cellpadding = "2"The distance between text and grid lines. See example 4. It is the padding to 10. Align = "CENTER"Table placement position (horizontal); optional values: left, right, center. See example 5 or 6. The table is placed in the middle, for fear that some browsers do not support it, therefore, the center mark is added. Parameter settings (commonly used ):For example: Align = "RIGHT"Placement position (horizontal) of the calligraphy and painting in this column. Optional values: left, center, and right. Valign = "MIDDLE"Placement position (vertical) of the text and painting in this column. Optional values: top, middle, and bottom. Bgcolor = "# 0000FF"See example 5 for the background color of this column. Bordercolor = "# FF00FF"The border color of this column. See example 3. 「 Only applies to IE 」 bordercolorlight = "#808080"The color of the border to the light part in this column. See example 3. "Only applies to IE" bordercolordark = "# FF0000"The color of the border backlight part in this column. See example 3. When bordercolorlight or bordercolordark is used, bordercolor will become invalid. "Only applies to IE 』 Align = "TOP"Position (horizontal) of the title column of the table relative to the table. Optional values: left, center, right, top, middle, bottom, if align = "bottom", the title column appears at the bottom of the table, regardless of
Parameter settings (commonly used ):
For example:
Width = "48%"
The storage space width, which accepts absolute values (such as 80) and relative values (such as 80% ). Height = "400"
The storage height. Colspan = "5"
Number of columns that can be connected to the right of a bucket. See example 6 rowspan = "4"
The number of columns in the bucket. See example 6 align = "RIGHT"
The placement position (horizontal) of the font and painting in the bucket. Optional values: left, center, and right. Valign = "BOTTOM"
The placement position (vertical) of the font and painting in the storage space. Optional values: top, middle, and bottom. Bgcolor = "# FF00FF"
See example 4. Bordercolor = "#808080"
The border color of the bucket. See example 3. "Only applies to IE" bordercolorlight = "# FF0000"
The color of the border to the light part of a cell. See example 3. "Only applies to IE" bordercolordark = "#00FF00"
The color of the backlight part of the bucket border. See example 3. bordercolorlight or bordercolordark will become invalid. "Only applies to IE" background = "myweb.gif"
This bucket is used with bgcolor.
Example 1:


Table with only one cell
Display result
Table with only one cell
Example 2:


First column, first column Column 1 and column 2
Display result
First column first column second column
Example 3:





First column, first column Column 1 and column 2
Column 2, column 1 Column 2
Display result
First column first column second column
Example 4:





First column, first column Column 1 and column 2
Column 2, column 1 Column 2
Display result
First column first column second column
Example 5: original code






First column, first column Column 1 and column 2 Column 1 and column 3
Column 2, column 1 Column 2 Column 2 and column 3

Display result First column first column second column first column third column second column first column second column third column
Example 6
Original code







First column, first column The second and third columns of the first column
The first column of the second and third columns Column 2 Column 2 and column 3
Column 3 and column 2 Third column, third column

Display result
The second column in the first column of the First column and the second column in the third column and the first column in the third column, the second column in the second column, the third column in the third column, and the third column in the second column
: And A bucket is also marked. The only difference is that The text in the marked bucket appears in a coarse body. It is usually used in the first column of the table to indicate the column. It is used to replace You can set the parameters. For more information, see .
Of course, if
Text in the marked cell is marked in boldJust like .
Example: original code










Month % Of IE visitor % Of NC visitor
August 61% 39%
July 54% 46%
June 52% 48%

Display result
Month % of IE visitor % of NC visitor August 61% 39% July 54% 46% June 52% 48%
: The function is to mark a title column for the table, such as adding a non-grid column above the table. Of course, it can also be placed below, usually used to store the table title.
Parameter settings (commonly used ):
For example:
Put in



In the header or tail. Valign = "TOP"The position (up and down) of the title column of the table relative to the table. The optional values are top and bottom. It is the same as align = "TOP" or align = "BOTTOM". Although the features are repeated, if you want to place the title column below and to the right or left, then the two parameters can be used. Align is preferred when only one parameter is used, because valign is a parameter starting from HTML 3.0.Example:






Analysis on the use of web browsers in February
Month % Of IE visitor % Of NC visitor
August 61% 39%

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.