HTML表格概念、语法、操作、案例

怡红公子0526 2020-08-10

展开全文

创建两行三列表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table border="1">
        <tr>
            <td>2018年</td>
            <td>2019年</td>
            <td>2020年</td>
        </tr>
        <tr>
            <td>8000</td>
            <td>10000</td>
            <td>120000</td>
        </tr>
    </table>
</body>
</html>

表格
th 表头，内容居中，加粗显示
<caption></caption> 表格标题，居中显示

表格作为整体被解析，完全解析完才会被显示出来
表格结构标签可以优化显示，加载一部分显示一部分
thead 表格的头（表头）
tbody 表格的主体（数据）
tfoot 表格的脚（脚注）

表格属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="rows">
        <caption>前端工程师平均工资</caption>
        <thead>
            <tr>
                <th>城市</th>
                <th>2018年</th>
                <th>2018年</th>
                <th>2019年</th>
                <th>2020年</th>
            </tr>
            <tr>
                <th>城市</th>
                <th>上半年</th>
                <th>下半年</th>
                <th>2019年</th>
                <th>2020年</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>北京</td>
                <td>8000</td>
                <td>9000</td>
                <td>10000</td>
                <td>120000</td>
            </tr>
            <tr>
                <td>上海</td>
                <td>6000</td>
                <td>7000</td>
                <td>8000</td>
                <td>100000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>合计</td>
                <td>7000</td>
                <td>8000</td>
                <td>9000</td>
                <td>110000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

tr标签属性

td和th标签属性

thead / tbody / tfoot 标签属性

跨列属性 colspan
跨行属性 rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
        <caption>前端工程师平均工资</caption>
        <thead>
            <tr bgcolor="#d8e4bc">
                <th rowspan="2">城市</th>
                <th colspan="2">2018年</th>

                <th rowspan="2">2019年</th>
                <th rowspan="2">2020年</th>
            </tr>
            <tr bgcolor="#d8e4bc">
                
                <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">
                <td bgcolor="#b8cce4">合计</td>
                <td>7000</td>
                <td>8000</td>
                <td>9000</td>
                <td>11000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格嵌套：
嵌入的必须是完整的表格结构
放到td标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
        <caption>前端工程师平均工资</caption>
        <thead>
            <tr bgcolor="#d8e4bc">
                <th>城市</th>
                <th>2018年</th>
                <th>2019年</th>
                <th>2020年</th>
            </tr>
        </thead>
        <tbody align="center" valign="middle">
            <tr>
                <td bgcolor="#b8cce4">北京</td>
                <td>
                    <table border="1" cellspacing="0" frame="void">
                        <tr>
                            <td>上半年</td>
                            <td>下半年</td>
                        </tr>
                        <tr>
                            <td>8000</td>
                            <td>9000</td>
                        </tr>
                    </table>
                </td>
                <td>10000</td>
                <td>12000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>