HTML5 Form_ Power Node Java College

The role of the table is to display the two -dimensional data. In HTML5, the layout of the content of the page is not allowed to control the page content. Instead, the new CSS table characteristics are used (the CSS is not involved here, it will be introduced later). The following mainly introduces HTML elements for making tables.

The basic elements of the form include: TABLE, TR, and TD.

Table represents the table in the HTML document that supports the Border attribute to define the width of the frame frame;

TR represents the line in the table;

TD represents the cells in the table, including the following attributes:

1) COLSPAN: The number of columns that cells can cross;

2) ROWSPAN: The number of rows that cells can cross;

3) Headers: Standards the head -related header of the cell. This attribute will not produce any visual changes in ordinary browsers, but it can be used by screen readers.

 <Table> <TR> <TD> Apples </td> <td> Green </td> <td> Medium </td> </tr> <td> oranges </td> <td> Orange < /td> <TD> Large </td> </tr> </table>

The above defines a table of two lines and three columns. The advantage of using the table is that the browser will ensure that the width of the column meets the widest content and allows the height of the way to meet the highest cells.

Using the BORDER attribute of Table element can add borders to the table.

 <table border = 1> <tr> <td> Apples </td> <TD> Green </td> </tdium </td> </tr> <td> oranges </td> <TD > Orange </td> <TD> Large </td> </tr> </table>

The default border of the browser is not very beautiful, and it usually needs to use CSS to set the frame style for various elements.

Using the COLSPAN and ROWSPAN attributes of the cell can build irregular tables, so that some rows or columns of the table span multiple cells. Below is an example of a cell span multiple columns:

 <Table border = 1> <ter> <th> Month </th> <th> savings </th> </tr> <td colorpan = 2> january </td> </tr> <ter> <td colorpan = 2> February </td> </tr> </table>

The following is an example of a cell crossing multiple lines:

 <Table border = 1> <ter> <th> Month </th> <th> savings </th> </tr> <td> january </td> <td> $ 100.00 </td> <TD ROWSPAN = 2> $ 50 </td> </tr> <TD> FEBRUARY </td> <TD> $ 10.00 </TD> </Table>

The TH element is used to add a header to the form, which can be used to distinguish data and explanations of data. TH element supports the following attributes:

1) COLSPAN: The number of columns that cells can cross;

2) ROWSPAN: The number of rows that cells can cross;

3) Scope: Define the method of associating the head data with unit data;

3) Headers: The header ID list separated by the space is provided with a header information for the data cell. This attribute will not produce any visual changes in the ordinary browser, but it can be used by the screen reader.

 <table> <ter> <TH> RANK </th> <th> name </th> <th> color </th> </th> </tr> <TH> Favorite: not /TD> <TD> Orange </td> <TD> Large </td> </tr> <ter> <TH> 3rd Favorite: </th> <TD> Pomegraanate </td> <TD> A Kind of of Greeny-Red </TD> <TD> Varies from Medium to Large </td> </tr> </table>

TH and TD can be used in a line.

Using TD's headers attributes can be associated with the cells. The purpose of the association is to simplify the processing of the screen reader and other disabled auxiliary technologies. Headers attribute can be the ID attribute value of one or more TH cells:

 <Table border = 1 width = 100%> <ter> <th ID = name> name </th> <TH ID = Email> Email </th> <th ID = Phone> Phone> Phone </th> <TH ID = Address> address </th> </tr> <ter> <td headers = name> George bush </td> <td headers = email> [email protected] </td> <td headers = phone> +789451236 < /TD> <td Headers = Address> Fifth Avenue New York, USA </td> </tr> </table>

Using TH's Colspan and ROWSPAN attributes can construct complex tables.

 <Table Border = 1> <TR> <th Colspan = 2> Company in USA </th> </tr> <th> name </th> <th> addr </th> </tr> tr> <TD> Apple, Inc. </TD> <TD> 1 Infinite loop cupertino, CA 95014 </td> </tr> <td> Google, Inc. </TD> 1600 amphitheater Parkway Mountain View, CA 94043 </td> </tr> </table>

You can use THEAD, TBODY and TFOOT elements to add structures to the form, so that you can add a CSS style to each part of the form to become easier.

1) Table theme

TBODY element represents the whole line of the theme of the form, excluding the header (thead element representation) and the scooter (TFOOT element representation).

Note that most browsers will automatically insert the TBODY element when processing Table elements.

2) Form header

Thead element is used to mark the title line of the form. If there is no TheAD element, all TR elements will be regarded as part of the subject of the form.

3) Add footnote

TFOOT elements are used to mark the lines of forming. Before HTML5, TFOOT elements can only appear before the TBODY element, and in HTML5, the TFOOT element is allowed to place the TFOOT element after TBODY.

Below is a comprehensive example, which uses TBODY, thead, and TFOOT elements.

 <Table> <d> <ter> <th> RANK </th> <th> name </th> <th> color </th> <th> size </th> </thead> </thead> < tfoot> <ter> <th> RANK </th> <th> name </th> <th> color </th> </th> </tr> </tFoot> <TR> <ter > <th> Favorite: <TH> <TD> Apples </td> <TD> Green </td> <em> Medium </td> </tr> <TR> <TH> 2nd Favorite: </TH > <TD> OrangeS </td> <TD> Orange </td> <TD> Large </td> </tr> <Tr> <TH> 3rd Favorite: </th> <TD> Pomegraanate </td> <TD> A Kind of Greeny-Red </TD> <TD> Varies from Medium to Large </td> </Tr> </TBODY> </Table>

Using the CAPTION element can define a title for the form and associate it with the form.

 <Table> <CAPTION> Results of the 2011 FRUIT SURVEY </CAPTION> <Thead> <TR> </th> <th> name </th> </th> <th> size </th> </tr> </thead> <TFOOT> <ter> <th> RANK </th> <th> name </th> <TH> COLOR </th> <th> SIZE </th> not > <ter> <TH> 2nd Favorite: </th> <TD> Orange </td> <td> Orange </td> <TD> Large </td> </tr> <TRD Favorite : </th> <TD> POMEGRANATE </td> <TD> A Kind of Greeny-Red </td> <TD> Varies from Medium to Large </td> </tbody> </table>

A form can only contain a Caption element, not the first element of the form, but it is always displayed above the table.

In the table, because the table is formed by the line, the operation of the column is not convenient, such as a definition style of a column of the form. You can use the Colgroup element to specify the group.

 <html> <head> <Style> #Colryp1 {background-color: red} #Colryp2 {background-color: Green; font-siZe = Small} </style> </head> <body> table width = 100% border = 1> <colorp id = colorp1 span = 2> </colorp> <colorp id = colorp2> </colorp> <ter> </th> </th> </th> not TD> <TD> My FIRST CSS </TD> <TD> $ 47 </td> </tr> </table> </body> </html>

The above example specifies the group of two columns. The first one contains the first two columns, and the second one contains the remaining 1 column, and specifies different styles for different groups. Colgroup's SPAN attribute specifies the extensions. If the SPAN attribute is not specified, one or more color elements can also be specified. The following example achieves the same effect as the above example.

 <html> <head> <Style> #Colryp1 {background-color: red} #Col3 {background-color: Green; font-siZe = Small} </style> </head> <blate> <Table IDth = 100% border = 1> <colgroup ID = colorp1> <col id = col1and2 span = 2/> <col id = color3/> </colorp> <ter> </th> <TH> Title </th> <th> Price </th> </tr> <l> <TD> 3476896 </td> <TD> My First HTML </td> <TD> $ 53 </td> </tr> <TD > 2489604 </TD> <TD> My First CSS </TD> <TD> $ 47 </td> </table> </body> </html>

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.