Construction of the table
The basic elements of the table includes: table, tr and td.
HTML document table represents a table support border attribute, a width defined for the table's borders;
TR represents a row in the table;
TD represents a table cell, comprising the following properties:
. 1) colspan: across the cell to a predetermined the number of columns;
2) rowspan: the number of lines may span a predetermined cell;
<table> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>
Table border
<table border="1"> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>
Irregular form
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td colspan="2">February</td> </tr> </table>
The following is an example of a cell across multiple rows:
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> <td rowspan="2">$50</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table>
Header
th element for adding a header as a table, can be used to distinguish between data and instructions to the data. th element supports the following attributes:
. 1) colspan: the number of columns of cells may span predetermined;
2) rowspan: Number of rows of cells may span predetermined;
. 3) scope: the method definition data with the header data associated unit ;
. 3) headers: a space-separated cell ID list header, the header provides information for the data cell, the property has no visual changes in the general browser, the screen reader can be used.
<table>
<tr>
<th>Rank</th><th>Name</th>
<th>Color</th><th>Size</th>
</tr>
<tr>
<th>Favorite:</th>
<td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
Let a cell associated with header
<table border="1" width="100%"> <tr> <th id="name">Name</th> <th id="Email">Email</th> <th id="Phone">Phone</th> <th id="Address">Address</th> </tr> <tr> <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>
Complex structure header
<table border="1"> <tr> <th colspan="2">Company in USA</th> </tr> <tr> <th>Name</th><th>Addr</th> </tr> <tr> <td>Apple, Inc.</td> <td>1 Infinite Loop Cupertino, CA 95014</td> </tr> <tr> <td>Google, Inc.</td> <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td> </tr> </table>
Adding a table structure
can be used thead, tbody and tfoot element to add structure to form, which would allow Adding CSS styles for each part of the table easier.
1) Form theme
tbody element represents the entire line configuration table topics, not including the header row (thead element represents) and table foot line (represented tfoot elements).
Note that most browsers will automatically insert table tbody element in dealing with the elements.
2) table header
thead element for marking the header row of the table. If there is no thead element, then all tr elements will be considered part of the main body of the table.
3) add footnotes
tfoot element row of the marking table to the foot. Before HTML5 tfoot elements can only appear before the tbody element, but in HTML5 elements placed after the tfoot tbody is allowed.
Here is a comprehensive example, which uses the tbody, thead and tfoot elements.
<table>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</tbody>
</table>
Add a title for the table
<table> <caption>Results of the 2011 Fruit Survey</caption> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody> </table>
Column Grouping
<html> <head> <style> #colgroup1{background-color: red} #colgroup2{background-color: green; font-size=small} </style> </head> <body> <table width="100%" border="1"> <colgroup id="colgroup1" span="2" ></colgroup> <colgroup id="colgroup2"></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html>
Examples of the above specified group of two columns, the first containing 2 before the second contains the remaining one, and specify different styles for different groups. The span attribute specifies colgroup expansion columns, if not specified span attribute may specify one or more col element, the following examples achieved the same effect as the example above.
<html> <head> <style> #colgroup1{background-color: red} #col3{background-color: green; font-size=small} </style> </head> <body> <table width="100%" border="1"> <colgroup id="colgroup1"> <col id="col1And2" span="2"/> <col id="col3"/> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html> ————————————————
I believe many people have problems and bottlenecks in the fourth year of front-end or mid-time will always be, as some time learning not get no sense of direction or a boring person to learn how to solve a problem do not know, I am finishing up like some of the information I'd like to discuss the article and learn together with more experienced Daniel, then welcome to join my group study exchange
907694362