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>

代码运行效果：

来源：https://www.cnblogs.com/helloCindy/p/11564823.html

标签

html表格

html代码