Home > Developer > Web Develop
Here is the main summary of the table below some of the properties and simple style, convenient for future.
1. <table>
The table used to define the HTML, with the local property border for the border, the value of the border property must be 1 or an empty string (""). This property does not control the style of the border, but is controlled by CSS.
Table element can have tr,th,td,thead,tbody,tfoot,colgroup element
2. <tr>
Used to define a row of a table. Because HTML tables are row-oriented, you must represent each row separately
TR elements can be used within the table,thead,tbody and TFOOT elements
The TR element can contain one or more TD or TH elements
Its align,bgcolor properties are obsolete, and if you want to set properties, use CSS settings
3. <td>
Used to define table cells, which can be used with colspan,rowspan,headers local properties
(1) Colspan: A column span that specifies the number of columns that a cell can span, and the value of the property must be an integer
(2) RowSpan: The row span, which specifies the number of rows that a cell can span, and the value of the property must be an integer
(3) Headers: The value of this property is the id attribute value of one or more cells, and the cell is associated with the column header and can be used with a screen reader
?? : Each table must contain the above three elements
A simple example
<!DOCTYPE HTML><HTML> <Body> <Table> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </Table> </Body></HTML>
The effect is as follows:
4. <th>
Used to define the header cells so that we can effectively distinguish the data and its description
It has thesame local properties as the < td > elements, and the two have the following differences:
5. <thead>
The wrapper used to define the header of the table and the header of the table. You can define one or more rows, which are the column labels of a TABLE element
Without the thead element, all TR is assumed to belong to the body of the table
6. <tbody>
Used to define the body of the table
7. <tfoot>
The footer used to define the markup table
?? ：
8. <colgroup>
Used to define a table column group, which you can use to apply a style to a column, or you can use the following COL element.
<colgroup> with local attribute span indicates the number of columns the column group should span. The default is a column that sets the style for a column of a table
<colgroup> can contain one or more <col> elements
9. <col>
Used to represent a single column of a table, it is recommended to use the <colgroup> package <col> element instead of <colgroup> directly set the Span property definition group
<col> also has a local attribute span
<col> the,<col> instance that is placed inside the <colgroup> element represents a column in the group. Use this label to apply a style to a column's group and to a single column of that group
10. <caption>
Used to define the title of a table, each table can contain only one <caption> element
A simple example:
<!DOCTYPE HTML><HTML> <Head> <style>thead th,tfoot th{text-align: Left;background:Grey;Color: White}tbody th{text-align: Right;background:Lightgrey;Color:Grey} /*tbody td {Background:greenyellow; } */#colgroup1{Background-color:Blueviolet}#col3{Background-color:Yellow;font-size:Small} </style> </Head> <Body> <Table> <ColgroupID= "Colgroup1"> <ColID= "CollAnd2"span= "2"/> <ColID= "Col3"/> </Colgroup> <ColgroupID= "Colgroup2"span= "2"></Colgroup> <thead> <TR> <th>Rank</th> <th>Name</th> <th>Color</th> <thcolspan= "2">Size & votes</th> </TR> </thead> <tfoot> <TR> <th>Rank Footer</th> <th>Name Footer</th> <th>Color Footer</th> <thcolspan= "2">Size and Votes Footer</th> </TR> </tfoot> <tbody> <TR> <th>Favorite:</th> <TD>Xml</TD> <TD>Css</TD> <TD>Java</TD> <TD>Ios</TD> </TR> <TR> <th>2nd favorite:</th> <TD>Web</TD> <TD>HTML5</TD> <TD>Cs</TD> <TD>460</TD> </TR> </tbody> </Table> </Body></HTML>View Code
The effect is as follows:
HTML Table properties and simple instances
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
