HTML table tags and attributes

Table with a title and head of the table:

<Table> 
    <Caption> </ Caption> <-! table header, centered -> 
    <TR> 
        <TH> </ TH> <-! table header, content centered, bolded -> 
     </ TR> 
     <TR> 
         <TD> </ TD> 
     </ TR> 
</ Table>

Table with structure:

Label table structure to optimize the display, part of the load on the display part, will not wait until they have finished all the load display

Form is divided into three parts: the header, subject, footnote

　　thead: table head (put the table header)

　　tbody: a table body (discharge data body)

　　tfoot: table legs (put a table footnote)

　　<Thead> <tbody> <tfoot> tag will not affect the layout of the table, but the division of the table structure

<Table> tag attributes:

 

 

 

 

 

 

 

 

 

<Tr> tag attributes:

 

 

 

 

 

 

 

 

<Td> and <th> tag attributes:

 

 

 <Thead> <tbody> <tfoot> tag attributes:

 

 

 Cross-listed property colspan:

 

 

 Interbank attribute rowspan:

 

Complete example:

　　 <table border="2" width="500px" cellspacing="0" cellpadding="5px">
        <caption>前端工程师平均工资</caption>
        <thead>
            <tr bgcolor="#d8bce4">
                <th rowspan="2">城市</th>
                <th colspan="2">2014年</th>
                <th rowspan="2">2015年</th>
                <th rowspan="2">2016年</th>
            </tr>
            <tr bgcolor="#d8bce4">
                <th>上半年</th>
                <th>下半年</th>
            </tr>
        </thead>
        <tbody align="center" valign="middle">
            <tr>
                <td bgcolor="#b8cce4">北京</td>
                <td>8000</td>
                <td>9000</td>
                <td>10000</td>
                <td>12000</td>
            </tr>
            <tr>
                <td bgcolor="#b8cce4">上海</td>
                <td>6000</td>
                <td>7000</td>
                <td>8000</td>
                <td>10000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="center" valign="middle">
                <td height="30px" bgcolor="#b8cce4">合计</td>
                <td>7000</td>
                <td>8000</td>
                <td>9000</td>
                <td>11000</td>
            </tr>
        </tfoot>
    </table>

 Code running effect is as follows:

 

 Nested tables:

 

 

 

 Complete example:

<!-- 表格嵌套 -->
    <table border="1" cellspacing="0">
        <tr>
            <td>2014年</td>
            <td>2015年</td>
            <td>2016年</td>
        </tr>
        <tr>
            <td>
                <table border="1" cellspacing="0">
                    <tr>
                        <td>上半年</td>
                        <td>下半年</td>
                    </tr>
                    <tr>
                        <td>6000</td>
                        <td>8000</td>
                    </tr>
                </table>
            </td>
            <td>9000</td>
            <td>10000</td>
        </tr>
    </table>

代码运行效果：