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>

The above table defines a two-line, three of the benefits of using the table are: the browser will ensure that the column width to meet the widest content, so that the height of the line to meet the highest cell.

Table border

Use border attribute table of elements, you can add borders to the table.

<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>

The browser's default border less attractive, usually you need to use CSS to reset for the various elements of the border style.

Irregular form

And using the cell colspan rowspan attributes irregular form may be constructed, so that some of the rows or columns of the table across a plurality of cells, the following is an example of a cell across multiple columns:

<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>

Th and td can be mixed in a row.

Let a cell associated with header

The use of headers td object attributes can be associated with the cell header and, mainly for the associated screen readers and other assistive technologies accessible to simplify handling of the table. id attribute value attribute headers can be for one or more cells of th:

<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

Th is used rowspan colspan and complex attributes can be configured 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

Use the caption element to define a title for the table, and associate it with the form.

<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>

A table can contain a caption element, it need not be the first element of the table, but always displayed above the table.

Column Grouping

In the table, because the table is set up in rows, resulting in the operation of the column is not easy, for example, define a style for a column of the table. Element may be used to specify the column colgroup packet

<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

907694362jq.qq.com

HTML5: Table