Table elements in HTML

Source: Internet
Author: User
Tags count header first row window
--table elements in HTML [reprint]
A,<table> label. The <table> label is a form identifier used to define the scope of the table. <table> tags are used in pairs, and the content between hand and tail labels is the content of the table. <table> Label properties are mainly border,width,height,align,cellapcing,cellpasdding. They are all optional.

 

The parameter value of the 1,border property is a number that represents the pixel count of the table's border width. It can also be used without parameter values, only to indicate that the table has a border. For example, <table border=10> indicates that the table has a border width of 10 pixels.

The 2,width and Height properties are useful for specifying the size of the table. The Width property is used to specify the widths of the tables, and the Height property specifies how high the table is. The parameter values of these two properties can be numbers or percentages, where the number represents the pixel of the width (height) of the table, and the percentage indicates that the width (height) of the table occupies a percentage of the width (height) of the browser window. For example: <table width=200 height=50%> represents a table with a width of 200 pixels and a height of 50% of the height of the browser window.

The parameter value of the 3,align property is one of Left,center and right, representing the table's left side of its adjacent text, the table is centered horizontally, and the table is on the right-hand side of adjacent text. For example:

<title> test Page </title>
<body>
<table border=3 width=60% align=left>
<TR>
<TH> Cell </TH><TH> Cell </TH>
<TH> cell </TH><TH> cell </TH><TH> cell </TH>
</TR>
<TR>
<TD>1</TD><TD> Explanatory Items </TD>
<TD> interpretation </TD><TD> Ibid. </TD><TD> ditto </TD>
</TR>
<TR>
<TD>2</TD><TD> Interpretation </TD><TD> Ditto </TD>
<TD> another unit </TD><TD> then to </TD>
</TR>
</table>

Text description, this is the table in adjacent text to the left of the example, as long as the change of align attribute parameters can change the position of the table.

<HR>

4,cellspacing property. The CellSpacing property is used to specify the space between cells in the table. The parameter value of this property is a number that represents the amount of pixel that the cell gap occupies.

5,cellpadding property. Used to specify the amount of space between the cell contents and the cell boundary. The parameter value of this property is also a number that represents the pixel count of the height of the blank distance between the contents of the cell and the top and bottom bounds, and a pixel count of the width of the white space between the contents of the cell and the left and right edges. For example:

<title> test Page </title>
<body>
<HR>
No more than the rules of cell properties before:<br>
<table border=3>
<TR>
<TH> Cell </TH><TH> Cell </TH>
<TH> cell </TH><TH> cell </TH><TH> cell </TH>
</TR>
<TR>
<TD>1</TD><TD> Cell </TD>
<TD> cell </TD><TD> cell </TD><TD> cell </TD></TH>
<TR>
<TD>2</TD><TD> Cell </TD>
<TD> cell </TD><TD> cell </TD><TD> cell </TD></TR>
</table>
<HR>
What happens after you add a cell property rule:<br>
<table border=3 cellspacing=10 cellpadding=10>
<TR>
<TH> Cell </TH><TH> Cell </TH>
<TH> cell </TH><TH> cell </TH><TH> cell </TH>
</TR>
<TR>
<TD>1</TD><TD> Cell </TD>
<TD> cell </TD><TD> cell </TD><TD> cell </TD></TH>
<TR>
<TD>2</TD><TD> Cell </TD>
<TD> cell </TD><TD> cell </TD><TD> cell </TD></TR>
</table>
</body>

Then let's take a look at some of the unfamiliar labels we just saw.

A,<caption> label. is the label of the title of the table. It is the label used in pairs. The content between the first label and the tail tag is the title of the table. <caption> has two properties: Align and valign they are optional.

Where the parameter value of the Align property is left,center,right, which means that the table header is aligned with the left curb of the table, in the middle of the table and on the right side of the table curb. By default, the table header is in the middle of the table; The parameter value of the Valign property is one of top and bottom, representing that the table header is above and below the table, and the table's caption is above the table by default. For example:

<title> test Page </title>
<body>
<HR>
<table border=3>
<caption align=right><b> This is the title of the form </b></caption><BR>
<TR>
<TH> Cell </TH><TH> Cell </TH>
<TH> cell </TH><TH> cell </TH><TH> cell </TH>
</TR>
<TR>
<TD>1</TD><TD> Cell </TD>
<TD> cell </TD><TD> cell </TD><TD> cell </TD></TH>
<TR>
<TD>2</TD><TD> Cell </TD>
<TD> cell </TD><TD> cell </TD><TD> cell </TD></TR>
</table>
<HR>
</body>

The table headings in this example are aligned with the right curb of the table.

Two,<tr> labels. is the row label. HTML tables are organized in rows. A table consists of several lines, and a few labels correspond to them. Row Label <TR> is the label used in pairs. It must be used in conjunction with the <TH><TD> tag, which is nested between <TR> and </TR> when used to specify the contents of each cell in the row. The <TR> label has two properties. That is, align and valign properties, they are optional.

The parameter values for the Align property are left,center and right (later, as I specifically explained, the property's arguments are all three) that represent the contents of each cell in a row are left-aligned, horizontally centered, and right-aligned. The default is left (valign), and the parameter value of the property is one of Top,middle and bottom, which means that the contents of each cell in the row are immediately over curb, centered vertically, and immediately below the curb. The default is middle (centered).

Three,<th> and <TD> labels

<TH> and <TD> tags are used to specify the contents of a cell, the header tag <TH> is used to specify the contents of the header element, and the header element is generally located in the first row of each column to indicate which object the column's data is about. <TH> tags are in pairs. The data label <TD> is also used in pairs, and the content between the first label and the tail tag is the specific data of the cell (that is, the interpretation of the header) as both are used to specify the,<th> and <TD> of the cell contents. All the properties of the label and the corresponding property function are identical. The properties of the <TH><TD> label are rowspancolspanalignvalign.

(1) The parameter value of the RowSpan property is a number that represents the number of rows spanned by the cell. The default value is 1.

(2) The parameter value of the Colspan property is also a number that represents the number of columns spanned by the cell. The default value is 1.

(3) The Align property is used to specify the position of the cell content in the horizontal direction. Three parameter values indicate whether the cell is left-aligned, centered, or right-aligned. Left (aligned) by default

(4) The Valign property is used to specify the position of the cell content in the vertical direction. The parameter value of the property is one of Top,,middle and bottom, which indicates whether the cell content is immediately above the curb, vertically centered, or immediately below the curb. The default is middle (vertically centered).

Well, it's almost here today! Too much to see, not easy to remember.



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.