HTML表格標簽及其屬性

帶標題和表格頭的表格：

<table>
    <caption></caption>    <!-- 表格標題，居中顯示 -->
    <tr>
        <th></th>    <!-- 表格頭，內容居中，加粗顯示 -->
     </tr>
     <tr>
         <td></td>
     </tr>
</table>

帶結構的表格：

表格結構標簽來進行優化顯示，加載一部分就顯示一部分，不會等到全部加載完才顯示

表格划分分為三部分：表頭，主題，腳注

　　thead：表格的頭（放表格的表頭）

　　tbody：表格的主體（放數據本體）

　　tfoot：表格的腳（放表格的腳注）

　　<thead><tbody><tfoot>標簽不會影響表格的布局，只是對表格結構的划分

<table>標簽屬性：

 

 

 

 

 

 

 

 

 

<tr>標簽屬性：

 

 

 

 

 

 

 

 

<td>和<th>標簽屬性：

 

 

 <thead> <tbody> <tfoot>標簽屬性：

 

 

 跨列屬性colspan：

 

 

 跨行屬性rowspan：

 

完整示例：

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

 代碼運行效果如下：

 

 表格嵌套：

 

 

 

 完整示例：

<!-- 表格嵌套 -->
    <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>

代碼運行效果：